/* ============================================================
   PagerVPN cabinet light theme — pager-theme v2
   ------------------------------------------------------------
   Заменяет pager-palette.css v1 (9 наслоённых стейджей, 3410 строк).
   Механизм: файл грузится ПОСЛЕ бандловского index-*.css и
   переобъявляет его RGB-токены (--color-dark-*, --color-accent-* и
   т.д.) — все Tailwind-утилиты, включая /opacity-варианты,
   перекрашиваются автоматически. Менять порядок подключения нельзя.

   v2 2026-06-11 — полный рерайт:
   - слейт #4F6975 заменён графитом #363636 (активная навигация,
     тёмные кнопки, фокус-кольца); CTA-жёлтый #F6C453 сохранён,
     ховер #FFDB85 (как на pagervpn.com);
   - лоадеры/спиннеры снова видимы (v1 их прятал);
   - выпилены мёртвые правила (bottom-nav, <table>, skeleton,
     :has-text(), will-change/transition-молотки);
   - определены отсутствовавшие токены --color-status-success,
     --color-accent-dark;
   - канонические брейкпоинты: 639.98px (ниже sm) / 1023.98px (ниже lg);
   - перекраска тёмной инжект-модалки «Забыли пароль»
     (password-forgot-live.js) — секция 9.
   Пост-ревью фиксы (22 находки адверсариального ревью):
   warning-текст → тёмный янтарь #7A5410; нав-иконки и 2×2-грид
   скоупнуты на юзер-нав /app* (admin-шелл не ломается); исключения
   из глушения градиентов (аватары/прогресс-бары); статус-канты
   тостов; admin confirm-диалоги; реферальный граф остаётся тёмным;
   подчёркивание инлайн-ссылок; placeholder 0.85; admin-чипы.
   Аудит и спека: lk_audit, память lk-pagervpn-audit.md.
   ============================================================ */

/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */
:root {
  /* --- Поверхности и текст --- */
  --color-bg-main: #FCFCFC;
  --color-card: #FFFFFF;
  --color-card-muted: #FCFCFC;
  --color-bg: var(--color-card);            /* legacy-алиас */
  --color-bg-soft: var(--color-card-muted); /* legacy-алиас */
  --color-section-gray: #E3E3E2;
  --color-text: #111111;
  --color-text-soft: #323232;
  --color-text-muted: #707273;
  --color-text-inverse: #FFFFFF;
  --color-border: #D1D2D2;

  /* --- Бренд: ГРАФИТ (был слейт #4F6975) --- */
  --color-brand: #363636;
  --color-brand-dark: #232323;
  --color-brand-light: #ECECEB;
  --color-brand-muted: #6E6E6E;

  /* --- Акцент: жёлтый CTA --- */
  --color-accent: #F6C453;
  --color-accent-hover: #FFDB85;
  --color-accent-light: var(--color-accent-hover);
  --color-accent-deep: #D9A53C;
  --color-accent-dark: var(--color-accent-deep);  /* FIX: использовался, но не был определён */
  --color-accent-tint: #FFF8E8;

  /* --- Статусы --- */
  --color-warning-text: #7A5410;   /* тёмный янтарь: warning-текст на светлом (≈6.8:1) */
  --color-success: #70D691;
  --color-success-light: #E8F8EC;
  --color-success-text: #22643A;
  --color-success-border: rgb(112 214 145 / 0.45);
  --color-status-success: var(--color-success);   /* FIX: использовался, но не был определён */
  --color-danger: #E63946;
  --color-danger-light: #FAD2D5;
  --color-danger-bg: #FCE7E9;
  --color-danger-bg-hover: #F8C2C7;
  --color-danger-text: #9F1D2A;
  --color-danger-strong: #B11B28;
  --color-danger-border: rgb(230 57 70 / 0.45);

  /* --- Собственные дизайн-токены v2 (--pv-: имена radius/spacing заняты бандлом) --- */
  --pv-radius-card: 20px;
  --pv-radius-card-sm: 18px;
  --pv-radius-inner: 14px;
  --pv-radius-control: 12px;
  --pv-radius-badge: 8px;
  --pv-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --pv-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --pv-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.12);
  --pv-shadow-cta: 0 4px 12px rgba(246, 196, 83, 0.28);
  --pv-shadow-cta-hover: 0 6px 16px rgba(246, 196, 83, 0.35);
  --pv-ring: 0 0 0 4px rgba(54, 54, 54, 0.10);
  --pv-focus-outline: 3px solid rgba(54, 54, 54, 0.45);

  /* --- ЯДРО МЕХАНИЗМА: ремап RGB-триплетов бандла (имена = tw.css) --- */
  /* dark (слейт -> светлые серые) */
  --color-dark-50: 17, 17, 17;
  --color-dark-100: 17, 17, 17;
  --color-dark-200: 50, 50, 50;
  --color-dark-300: 112, 114, 115;
  --color-dark-400: 112, 114, 115;
  --color-dark-500: 112, 114, 115;
  --color-dark-600: 209, 210, 210;
  --color-dark-700: 209, 210, 210;
  --color-dark-800: 242, 242, 242;
  --color-dark-850: 252, 252, 252;
  --color-dark-900: 255, 255, 255;
  --color-dark-950: 252, 252, 252;

  /* accent (синий бандла -> жёлтый CTA + графит для структурных) */
  --color-accent-50: 255, 250, 237;
  --color-accent-100: 227, 227, 226;
  --color-accent-200: 227, 227, 226;
  --color-accent-300: 54, 54, 54;
  --color-accent-400: 54, 54, 54;
  --color-accent-500: 246, 196, 83;
  --color-accent-600: 255, 219, 133;
  --color-accent-700: 217, 165, 60;
  --color-accent-800: 31, 31, 31;
  --color-accent-900: 31, 31, 31;
  --color-accent-950: 227, 227, 226;

  /* success / error / warning */
  --color-success-50: 232, 248, 236;
  --color-success-100: 232, 248, 236;
  --color-success-200: 232, 248, 236;
  --color-success-300: 112, 214, 145;
  --color-success-400: 112, 214, 145;
  --color-success-500: 112, 214, 145;
  --color-success-600: 112, 214, 145;
  --color-success-700: 47, 126, 72;
  --color-success-800: 47, 126, 72;
  --color-success-900: 47, 126, 72;
  --color-error-50: 250, 210, 213;
  --color-error-100: 250, 210, 213;
  --color-error-200: 250, 210, 213;
  --color-error-300: 230, 57, 70;
  --color-error-400: 230, 57, 70;
  --color-error-500: 230, 57, 70;
  --color-error-600: 206, 45, 57;
  --color-error-700: 165, 32, 42;
  --color-error-800: 120, 24, 31;
  --color-error-900: 90, 18, 24;
  --color-warning-50: 255, 250, 237;
  --color-warning-100: 255, 244, 210;
  --color-warning-200: 255, 219, 133;
  --color-warning-300: 246, 196, 83;
  --color-warning-400: 246, 196, 83;
  --color-warning-500: 246, 196, 83;
  --color-warning-600: 217, 165, 60;

  /* дефолтное ring-кольцо -> графит */
  --tw-ring-color: rgb(54 54 54 / 0.22);
}

/* ============================================================
   2. БАЗА / СВЕТЛЫЙ РЕСЕТ
   ============================================================ */
html,
html.dark {
  color-scheme: light;
  background: var(--color-bg-main);
}

body,
.dark body,
#root,
#root > .min-h-screen,
#root .min-h-screen.bg-dark-950,
#root .flex.min-h-screen.bg-dark-950 {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
}

#root [class*="border-dark-"] {
  border-color: var(--color-border) !important;
}

#root [class*="bg-dark-900"],
#root [class*="bg-dark-950"],
#root [class*="bg-dark-850"] {
  background-color: var(--color-card) !important;
}

#root [class*="bg-dark-800"],
#root [class*="bg-dark-700"],
#root [class*="bg-dark-600"] {
  background-color: var(--color-card-muted) !important;
}

/* Градиенты: гасим в плоский светлый фон */
#root [class*="bg-gradient-to-br"],
#root [class*="bg-gradient-to-r"],
#root section[class*="bg-gradient-to-"],
#root article[class*="bg-gradient-to-"],
#root div[class*="bg-gradient-to-"] {
  background-image: none !important;
  background-color: var(--color-card) !important;
}

#root [class*="from-dark-"],
#root [class*="via-dark-"],
#root [class*="to-accent-"] {
  --tw-gradient-from: var(--color-card) !important;
  --tw-gradient-to: var(--color-card) !important;
  --tw-gradient-stops: var(--color-card), var(--color-card) !important;
}

/* Исключения из глушения градиентов (иначе белое-на-белом):
   аватар с инициалом (admin) — графит; прогресс-бар рассылки — жёлтый */
#root .rounded-full[class*="from-accent-"] {
  background-image: none !important;
  background-color: var(--color-brand) !important;
}

#root [class*="h-full"][class*="from-accent-500"] {
  background-image: none !important;
  background-color: var(--color-accent) !important;
}

#root svg {
  color: currentColor;
}

/* Декоративные blur-пятна — мягкий жёлтый тинт */
#root [class*="blur-3xl"] {
  background: var(--color-accent-hover) !important;
  opacity: 0.18 !important;
}

/* Скроллбары (единый блок) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-card-muted);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-muted);
}

html,
#root *,
body > .fixed.inset-0 * {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-card-muted);
}

/* Транзишены: только интерактив, без глобальных div/* -молотков */
#root button,
#root a,
#root input,
#root select,
#root textarea {
  transition: background-color 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Лоадеры ВИДИМЫ (v1 их прятал). Спиннеры в бандле — div.animate-spin:
   жёлтое кольцо с прозрачным верхом; вариант border-t-accent-500 —
   серое кольцо с жёлтым верхом. Анимация бандла не трогается. */
#root div[class*="animate-spin"] {
  border-color: var(--color-accent) !important;
  border-top-color: transparent !important;
  opacity: 0.9;
}

#root div[class*="animate-spin"][class*="border-t-accent-500"] {
  border-color: var(--color-section-gray) !important;
  border-top-color: var(--color-accent) !important;
}

/* ============================================================
   3. ТИПОГРАФИКА
   ============================================================ */
#root h1,
#root .text-3xl {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

#root h2,
#root .text-2xl {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

#root h3,
#root .text-xl {
  font-size: 1.125rem !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}

/* Основной текст: ТОЛЬКО текстовые элементы (не bare div — иначе
   раздуваются text-2xl-статы и ломается типошкала) */
#root p,
#root li,
#root .text-sm {
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
}

#root label,
#root .text-xs {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Eyebrow-подписи секций (uppercase + tracking) */
#root section > .text-xs:first-child,
#root section [class*="uppercase"][class*="tracking-"] {
  color: var(--color-text-muted) !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
}

/* Мобильная типошкала: компактнее (фикс «растянуто по длине»).
   16px обязательны только ИНПУТАМ (iOS-зум) — текст 15px. */
@media (max-width: 639.98px) {
  #root h1,
  #root .text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  #root h2,
  #root .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
  }

  #root h3,
  #root .text-xl {
    font-size: 1.0625rem !important;
  }

  #root p,
  #root li,
  #root .text-base {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
  }
}

/* ============================================================
   4. КНОПКИ + ФОКУС
   ============================================================ */
#root button,
#root a.inline-flex {
  border-radius: var(--pv-radius-control);
}

/* --- Primary: жёлтый CTA --- */
#root .text-white.bg-accent-500,
#root button.bg-accent-500,
#root a.bg-accent-500,
#root [class~="bg-accent-500"][class~="text-white"] {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  min-height: 48px;
  padding: 14px 24px !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border-radius: var(--pv-radius-control) !important;
  box-shadow: var(--pv-shadow-cta) !important;
}

#root .hover\:bg-accent-600:hover,
#root button.bg-accent-500:hover,
#root a.bg-accent-500:hover {
  background: var(--color-accent-hover) !important;
  color: var(--color-text) !important;
  transform: translateY(-1px);
  box-shadow: var(--pv-shadow-cta-hover) !important;
}

#root button.bg-accent-500:active,
#root a.bg-accent-500:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(246, 196, 83, 0.22) !important;
}

/* --- Secondary: белая с серой рамкой --- */
#root button[class*="border-dark-"]:where(:not(.bg-accent-500)),
#root a[class*="border-dark-"]:where(:not(.bg-accent-500)) {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  border-width: 1.5px !important;
}

/* --- Единый нейтральный ховер для всего вторичного.
   Исключения в :where() — нулевая специфичность, точечные правила
   (yellow CTA, графит-навигация, danger, чат) перебивают это. --- */
#root button:where(:not([class*="bg-accent-500"]):not([class*="border-accent-500"]):not([class*="text-error-"]):not([class*="bg-error-"]):not([class*="bg-success-"]):not([aria-current="page"]):not(:disabled)):hover,
#root a:where([class*="border-dark-"]:not([class*="bg-accent-500"]):not([aria-current="page"])):hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

/* --- Danger: тихий красный (Удалить / Сбросить ключ) — красный текст
   и красноватая рамка отличают от нейтральных, но сплошная розовая
   заливка на каждой карточке перегружала страницу. Заливка — на ховер. --- */
#root button[class*="border-error-500"][class*="text-error-"],
#root button[class*="bg-error-500/"][class*="text-error-"] {
  background: transparent !important;
  border: 1px solid rgb(230 57 70 / 0.35) !important;
  color: var(--color-danger-strong) !important;
  font-weight: 600 !important;
}

#root button[class*="border-error-500"][class*="text-error-"]:hover,
#root button[class*="bg-error-500/"][class*="text-error-"]:hover {
  background: var(--color-danger-bg) !important;
  border-color: rgb(230 57 70 / 0.55) !important;
  color: var(--color-danger-text) !important;
}

/* --- Success-кнопки --- */
#root .bg-success-500,
#root button.bg-success-500 {
  background: var(--color-success) !important;
  color: var(--color-text) !important;
}

/* --- Disabled --- */
#root button:disabled,
#root a:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  transform: none !important;
  box-shadow: none !important;
}

#root button:disabled:hover,
#root a:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* --- Фокус: графит, только для кнопок/ссылок --- */
#root button:focus-visible,
#root a:focus-visible {
  outline: var(--pv-focus-outline) !important;
  outline-offset: 2px !important;
  box-shadow: var(--pv-ring) !important;
}

#root button:focus:not(:focus-visible),
#root a:focus:not(:focus-visible) {
  outline: none !important;
}

/* --- Мобильные размеры кнопок --- */
@media (max-width: 639.98px) {
  /* Кнопки: умеренные тач-таргеты 44-46px (52px раздувало страницы);
     иконочные/квадратные/pill — исключены через :where() */
  #root button:where(:not([class*="h-9"]):not([class*="h-8"]):not([class*="h-5"]):not([class*="w-9"]):not([class*="w-8"]):not([class*="w-10"]):not([class*="rounded-full"]):not(.absolute)),
  #root a[class*="inline-flex"]:where(:not([class*="h-9"]):not([class*="h-8"]):not([class*="rounded-full"])) {
    min-height: 46px;
    padding: 12px 16px;
    font-size: 0.9375rem;
  }

  #root button[class*="border-dark-"]:where(:not(.bg-accent-500)),
  #root a[class*="border-dark-"]:where(:not(.bg-accent-500)) {
    min-height: 44px;
    padding: 11px 14px;
  }

  #root form button[type="submit"],
  #root form button[class*="bg-accent-500"] {
    width: 100% !important;
  }

  /* Touch feedback + без жёлтой подсветки тапа */
  #root button:active,
  #root a:active {
    opacity: 0.85 !important;
    transform: scale(0.98) !important;
  }

  #root button,
  #root a,
  #root input,
  #root textarea {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ============================================================
   5. ФОРМЫ
   ============================================================ */
#root input,
#root select,
#root textarea {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  border-radius: var(--pv-radius-control) !important;
  border-width: 1.5px !important;
  border-color: var(--color-border) !important;
  background: var(--color-card-muted) !important;
  color: var(--color-text) !important;
}

#root textarea {
  min-height: 96px;
  padding: 14px 16px;
  line-height: 1.6;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 0.85 !important; /* 0.65 давало 2.5:1 — ниже 3:1 */
  font-weight: 400 !important;
}

/* Фокус: бордер-бренд + кольцо. outline прозрачный, НЕ none —
   ринг остаётся индикатором, а forced-colors/high-contrast работает. */
#root input:focus,
#root select:focus,
#root textarea:focus {
  border-color: var(--color-brand) !important;
  border-width: 2px !important;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: var(--pv-ring) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

#root textarea:focus {
  padding-top: 13px;
  padding-bottom: 13px;
}

/* Инпуты с кнопкой-глазом справа */
#root input[type="password"],
#root input[type="text"]:has(+ button) {
  padding-right: 48px !important;
}

#root input[type="password"] + button,
#root input[type="text"] + button[aria-label*="пароль"] {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#root input[type="password"] + button:hover,
#root input[type="text"] + button[aria-label*="пароль"]:hover {
  background: var(--color-card-muted) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

#root label {
  margin-bottom: 8px !important;
  display: block !important;
  color: var(--color-text-soft) !important;
}

/* Сообщения об ошибке/успехе/предупреждении */
#root div[class*="border-error-500"][class*="bg-error-500"],
#root div[class*="text-error-"],
#root div[class*="border-success-500"][class*="bg-success-500"],
#root div[class*="text-success-"],
#root div[class*="border-warning-500"][class*="bg-warning-500"] {
  padding: 12px 16px;
  border-radius: var(--pv-radius-control);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Spacing внутри форм */
#root form label + input,
#root form label + textarea,
#root form label + select {
  margin-top: 8px !important;
}

#root form > div + div,
#root form .space-y-4 > * + * {
  margin-top: 18px !important;
}

#root input:disabled,
#root textarea:disabled,
#root select:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  background: var(--color-section-gray) !important;
  color: var(--color-text-muted) !important;
}

#root input:disabled::placeholder,
#root textarea:disabled::placeholder {
  opacity: 0.4 !important;
}

@media (max-width: 639.98px) {
  /* 16px — iOS не зумит при фокусе. Критично. */
  #root input,
  #root select {
    min-height: 52px;
    padding: 14px 16px;
    font-size: 1rem !important;
  }

  #root textarea {
    min-height: 104px;
    padding: 16px;
    font-size: 1rem !important;
  }

  #root input:focus,
  #root select:focus {
    padding-left: 15px;
    padding-right: 15px;
  }

  #root textarea:focus {
    padding: 15px;
  }

  #root label {
    font-size: 0.875rem !important;
    margin-bottom: 6px !important;
  }

  #root form > div + div {
    margin-top: 20px !important;
  }
}

/* ============================================================
   6. ЛЭЙАУТ: ШАПКА / САЙДБАР / МОБИЛЬНАЯ НАВИГАЦИЯ
   ============================================================ */
#root aside,
#root header {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

#root aside {
  box-shadow: 2px 0 16px rgba(17, 17, 17, 0.06) !important;
}

#root header {
  box-shadow: 0 2px 12px rgba(17, 17, 17, 0.05) !important;
}

/* --- Сайдбар: выравнивание + SVG-иконки по href.
   База — flex (админ-шелл /admin* использует тот же aside);
   грид с колонкой под иконку и ::before — только у 4 юзер-ссылок
   /app*, у которых определён --nav-icon (иначе вместо иконки
   рисуется сплошной квадрат currentColor) --- */
#root aside nav a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--pv-radius-control) !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

#root aside nav a:where([href^="/app"]) {
  display: grid !important;
  grid-template-columns: 1.25rem minmax(0, 1fr) !important;
  column-gap: 0.875rem !important;
}

#root aside nav a:where([href^="/app"])::before {
  content: "";
  grid-column: 1;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 !important;
  background: currentColor;
  opacity: 1;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}

#root aside nav a[href="/app"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h3A2.5 2.5 0 0 1 12 5.5v3A2.5 2.5 0 0 1 9.5 11h-3A2.5 2.5 0 0 1 4 8.5v-3Zm10 0A2.5 2.5 0 0 1 16.5 3h1A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16h-1A2.5 2.5 0 0 1 14 13.5v-8ZM4 15.5A2.5 2.5 0 0 1 6.5 13h3A2.5 2.5 0 0 1 12 15.5v3A2.5 2.5 0 0 1 9.5 21h-3A2.5 2.5 0 0 1 4 18.5v-3Zm10 3A2.5 2.5 0 0 1 16.5 16h1a2.5 2.5 0 0 1 0 5h-1A2.5 2.5 0 0 1 14 18.5Z'/%3E%3C/svg%3E");
}

#root aside nav a[href="/app/devices"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 5A2.75 2.75 0 0 0 2 7.75v6.5A2.75 2.75 0 0 0 4.75 17h5.75v2H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-2.5v-2h5.75A2.75 2.75 0 0 0 22 14.25v-6.5A2.75 2.75 0 0 0 19.25 5H4.75ZM4 7.75A.75.75 0 0 1 4.75 7h14.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75H4.75a.75.75 0 0 1-.75-.75v-6.5Z'/%3E%3C/svg%3E");
}

#root aside nav a[href="/app/purchase"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75A2.75 2.75 0 0 1 5.75 5h12.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19H5.75A2.75 2.75 0 0 1 3 16.25v-8.5ZM5.75 7a.75.75 0 0 0-.75.75V9h14V7.75a.75.75 0 0 0-.75-.75H5.75ZM19 12H5v4.25c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75V12Zm-12 2.5a1 1 0 0 1 1-1h2.5a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
}

#root aside nav a[href="/app/support"] {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 4A3.5 3.5 0 0 0 2 7.5v5A3.5 3.5 0 0 0 5.5 16H7v2.35a1.25 1.25 0 0 0 2.04.97L13.1 16h5.4a3.5 3.5 0 0 0 3.5-3.5v-5A3.5 3.5 0 0 0 18.5 4h-13ZM4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v5a1.5 1.5 0 0 1-1.5 1.5h-5.76a1 1 0 0 0-.63.22L9 16.77V15a1 1 0 0 0-1-1H5.5A1.5 1.5 0 0 1 4 12.5v-5Z'/%3E%3C/svg%3E");
}

#root aside nav a:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
}

#root aside nav a:hover:not([aria-current="page"]) {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
  transform: translateX(2px);
}

#root aside nav a[aria-current="page"] {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--color-brand-dark) !important;
}

#root aside nav a[aria-current="page"]:hover {
  background: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

#root aside nav a[aria-current="page"] * {
  color: inherit !important;
}

/* --- Навигация в шапке (если есть) --- */
#root header nav a {
  min-height: 44px !important;
  padding: 0.625rem 1rem !important;
  border-radius: var(--pv-radius-control) !important;
  font-size: 0.9375rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

#root header nav a:not([aria-current="page"]) {
  background: var(--color-bg-soft) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid transparent !important;
}

#root header nav a:hover:not([aria-current="page"]) {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

#root header nav a[aria-current="page"] {
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid var(--color-brand) !important;
}

/* --- Кнопки шапки --- */
#root header button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-radius: var(--pv-radius-control) !important;
}

#root header button:hover {
  border-color: rgba(50, 50, 50, 0.35) !important;
  background: rgba(227, 227, 226, 0.25) !important;
  color: var(--color-text) !important;
}

/* Кнопка «Выйти»: компактная (перебивает общие размеры специфичностью) */
#root header button[class*="border-dark-"] {
  min-height: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.8125rem !important;
}

/* --- Мобильная/планшетная навигация: 2×2 сетка с иконками.
   Бандл: nav.scrollbar-hide.flex.gap-2.overflow-x-auto.lg:hidden (<1024px).
   Bottom-nav в бандле НЕ существует.
   :has(> a[href^="/app"]) — только юзер-нав из 4 пунктов; 7-пунктовый
   админ-нав (/admin*) остаётся горизонтальным скроллером бандла --- */
@media (max-width: 1023.98px) {
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a,
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    border-radius: var(--pv-radius-control) !important;
    flex: initial !important;
  }

  /* Планшет 640-1023: все 4 вкладки в одну строку — 2×2 съедала
     лишние ~60px шапки там, где всё помещается */
  @media (min-width: 640px) {
    #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a svg,
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button svg {
    flex: 0 0 auto !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* Иконки — те же SVG-маски, что у сайдбара */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href^="/app"]::before {
    content: "" !important;
    flex: 0 0 1.05rem !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    background: currentColor !important;
    -webkit-mask: var(--nav-icon) center / contain no-repeat !important;
    mask: var(--nav-icon) center / contain no-repeat !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href="/app"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h3A2.5 2.5 0 0 1 12 5.5v3A2.5 2.5 0 0 1 9.5 11h-3A2.5 2.5 0 0 1 4 8.5v-3Zm10 0A2.5 2.5 0 0 1 16.5 3h1A2.5 2.5 0 0 1 20 5.5v8A2.5 2.5 0 0 1 17.5 16h-1A2.5 2.5 0 0 1 14 13.5v-8ZM4 15.5A2.5 2.5 0 0 1 6.5 13h3A2.5 2.5 0 0 1 12 15.5v3A2.5 2.5 0 0 1 9.5 21h-3A2.5 2.5 0 0 1 4 18.5v-3Zm10 3A2.5 2.5 0 0 1 16.5 16h1a2.5 2.5 0 0 1 0 5h-1A2.5 2.5 0 0 1 14 18.5Z'/%3E%3C/svg%3E") !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href="/app/devices"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.75 5A2.75 2.75 0 0 0 2 7.75v6.5A2.75 2.75 0 0 0 4.75 17h5.75v2H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-2.5v-2h5.75A2.75 2.75 0 0 0 22 14.25v-6.5A2.75 2.75 0 0 0 19.25 5H4.75ZM4 7.75A.75.75 0 0 1 4.75 7h14.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75H4.75a.75.75 0 0 1-.75-.75v-6.5Z'/%3E%3C/svg%3E") !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href="/app/purchase"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.75A2.75 2.75 0 0 1 5.75 5h12.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19H5.75A2.75 2.75 0 0 1 3 16.25v-8.5ZM5.75 7a.75.75 0 0 0-.75.75V9h14V7.75a.75.75 0 0 0-.75-.75H5.75ZM19 12H5v4.25c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75V12Zm-12 2.5a1 1 0 0 1 1-1h2.5a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href="/app/support"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 4A3.5 3.5 0 0 0 2 7.5v5A3.5 3.5 0 0 0 5.5 16H7v2.35a1.25 1.25 0 0 0 2.04.97L13.1 16h5.4a3.5 3.5 0 0 0 3.5-3.5v-5A3.5 3.5 0 0 0 18.5 4h-13ZM4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v5a1.5 1.5 0 0 1-1.5 1.5h-5.76a1 1 0 0 0-.63.22L9 16.77V15a1 1 0 0 0-1-1H5.5A1.5 1.5 0 0 1 4 12.5v-5Z'/%3E%3C/svg%3E") !important;
  }

  /* Контраст: неактивные — фон+бордер+тёмный текст; актив — графит */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a:not([aria-current="page"]),
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button:not([aria-current="page"]) {
    background: var(--color-bg-soft) !important;
    color: var(--color-text-soft) !important;
    border: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a:hover:not([aria-current="page"]) {
    background: var(--color-brand-light) !important;
    color: var(--color-text) !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[aria-current="page"],
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button[aria-current="page"] {
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    border: 1px solid var(--color-brand) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(54, 54, 54, 0.25) !important;
  }
}

/* --- Мобильная база --- */
@media (max-width: 639.98px) {
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #root {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Боковые отступы под safe-area; снизу без фантомных 80px
     (bottom-nav не существует) */
  #root > div,
  #root > main {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  html,
  body {
    overscroll-behavior-y: auto !important;
  }

  #root header {
    padding: 12px 16px !important;
    min-height: 56px !important;
  }

  #root header button,
  #root header a {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.875rem;
  }
}

/* ============================================================
   7. КАРТОЧКИ / СЕКЦИИ / БЕЙДЖИ
   ============================================================ */
#root section[class*="rounded-3xl"],
#root article[class*="rounded-3xl"],
#root div[class*="rounded-3xl"][class*="border-"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  padding: 24px !important;
  border-radius: var(--pv-radius-card) !important;
  box-shadow: var(--pv-shadow-card) !important;
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#root .rounded-2xl[class*="border-"] {
  border-color: var(--color-border) !important;
}

/* Цветные статус-канты тостов (border-l-4 border-l-{type}-500):
   двойной атрибут даёт (1,2,0) — перебивает border-ремапы выше */
#root [class*="border-l-4"][class*="border-l-success-500"] {
  border-left-color: var(--color-success) !important;
}

#root [class*="border-l-4"][class*="border-l-error-500"] {
  border-left-color: var(--color-danger) !important;
}

#root [class*="border-l-4"][class*="border-l-warning-500"] {
  border-left-color: var(--color-accent) !important;
}

#root [class*="border-l-4"][class*="border-l-accent-500"] {
  border-left-color: var(--color-brand) !important;
}

#root section[class*="rounded-3xl"] div[class*="rounded-2xl"][class*="border-"],
#root article[class*="rounded-3xl"] div[class*="rounded-2xl"][class*="border-"] {
  padding: 16px;
  border-radius: var(--pv-radius-inner) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Ховер-лифт только для кликабельных карточек */
#root a:hover > section[class*="rounded-3xl"],
#root a:hover > article[class*="rounded-3xl"],
#root section[class*="rounded-3xl"]:hover:has(a[href]),
#root section[class*="rounded-3xl"]:hover:has(button) {
  box-shadow: var(--pv-shadow-card-hover) !important;
  border-color: var(--color-brand-muted) !important;
  transform: translateY(-2px);
}

#root section[class*="rounded-3xl"]:not(:has(a)):not(:has(button)):hover,
#root article[class*="rounded-3xl"]:not(:has(a)):not(:has(button)):hover {
  transform: none !important;
  box-shadow: var(--pv-shadow-card) !important;
}

/* Тени-утилиты — в мягкую систему */
#root .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#root .shadow,
#root .shadow-md {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#root .shadow-lg {
  box-shadow: var(--pv-shadow-card-hover) !important;
}

#root .shadow-xl,
#root .shadow-2xl,
#root .shadow-black\/20,
#root .shadow-black\/50,
#root [class*="shadow-["] {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Статус-бейджи */
#root span[class*="border-success-500"][class*="bg-success-500"],
#root span[class*="text-success-"][class*="border-"] {
  background: var(--color-success-light) !important;
  border: 1px solid var(--color-success-border) !important;
  color: var(--color-success-text) !important;
  padding: 6px 12px !important;
  border-radius: var(--pv-radius-badge) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#root span[class*="border-error-500"][class*="bg-error-500"],
#root span[class*="text-error-"][class*="border-"] {
  background: var(--color-danger-bg) !important;
  border: 1px solid rgb(230 57 70 / 0.38) !important;
  color: var(--color-danger-text) !important;
  padding: 6px 12px !important;
  border-radius: var(--pv-radius-badge) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#root span[class*="border-warning-500"][class*="bg-warning-500"] {
  padding: 6px 12px !important;
  border-radius: var(--pv-radius-badge) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

#root .text-success-200,
#root .text-success-300,
#root .text-success-400 {
  color: var(--color-success-text) !important;
}

#root .text-error-200,
#root .text-error-300,
#root .text-error-400 {
  color: var(--color-danger-text) !important;
}

/* Warning-текст: жёлтый #F6C453 на светлом нечитаем (1.5:1) —
   тёмный янтарь, по аналогии с success/error */
#root .text-warning-100,
#root .text-warning-200,
#root .text-warning-300,
#root .text-warning-400 {
  color: var(--color-warning-text) !important;
}

/* Бывшие синие акценты текста: триплеты 100/200 дают светло-серый —
   текстом нечитабельно, форсим графит */
#root .text-accent-100,
#root .text-accent-200,
#root .text-accent-300,
#root .text-accent-400 {
  color: var(--color-brand) !important;
}

/* Инлайн-текстовые ссылки («Перейдите к тарифам»): после перекраски
   text-accent-* в графит нужна явная аффордансность — подчёркивание.
   :not([class*="bg-"]) отсекает кнопки/CTA/активную навигацию */
#root a[class*="text-accent-"]:not([class*="bg-"]) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

#root a[class*="text-accent-"]:not([class*="bg-"]):hover {
  color: var(--color-accent-deep) !important;
}

/* Сырые Tailwind-цвета админ-чипов (мимо токен-ремапа): blue/purple/pink/
   yellow-чипы каналов рассылок и статусов юзеров — в читаемую систему */
#root [class*="text-blue-400"],
#root [class*="text-purple-400"],
#root [class*="text-pink-400"] {
  color: var(--color-text-soft) !important;
}

#root [class*="bg-blue-500/"],
#root [class*="bg-purple-500/"],
#root [class*="bg-pink-500/"] {
  background-color: var(--color-brand-light) !important;
}

#root [class*="text-yellow-400"] {
  color: var(--color-warning-text) !important;
}

#root [class*="bg-yellow-500/"] {
  background-color: var(--color-accent-tint) !important;
}

#root [class*="border-yellow-500/"] {
  border-color: rgba(246, 196, 83, 0.55) !important;
}

#root .border-accent-500,
#root [class*="border-accent-500/"] {
  border-color: rgba(54, 54, 54, 0.35) !important;
}

#root [class*="bg-accent-500/"] {
  background-color: rgba(227, 227, 226, 0.72) !important;
}

#root article .bg-accent-500\/10,
#root article [class*="bg-accent-500/"] {
  background: var(--color-brand-light) !important;
  color: var(--color-brand-dark) !important;
}

/* Жёлтый info-box «Важно»: мягкий тинт вместо сплошной заливки.
   :is(div,section) — warning-секции (пустые состояния, Telegram не привязан)
   тоже получают тинт, а не белую карточку с невидимым жёлтым текстом */
#root :is(div, section)[class*="border-warning-500"][class*="bg-warning-500"] {
  background: var(--color-accent-tint) !important;
  border: 1px solid rgba(246, 196, 83, 0.55) !important;
  color: var(--color-text-soft) !important;
}

/* Моно-боксы (vless://, tg://): серый фон, выделение всего URI тапом.
   [class*="break-all"] — только URI-боксы; скроллируемый HTML-превью
   рассылок (overflow-y-auto whitespace-pre-wrap) не трогаем */
#root [class*="font-mono"][class*="bg-dark-"][class*="break-all"] {
  background: #F6F6F5 !important;
  border: 1px solid var(--color-section-gray) !important;
  border-radius: 10px !important;
  padding: 10px 12px;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-text) !important;
  user-select: all;
  -webkit-user-select: all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spacing-ритм */
#root .space-y-6 > * + * {
  margin-top: 28px !important;
}

#root .space-y-4 > * + * {
  margin-top: 18px !important;
}

#root .space-y-3 > * + * {
  margin-top: 14px !important;
}

#root .space-y-2 > * + * {
  margin-top: 10px !important;
}

#root .grid.gap-6 {
  gap: 28px !important;
}

#root .grid.gap-4 {
  gap: 18px !important;
}

#root .grid.gap-3 {
  gap: 14px !important;
}

#root .flex.gap-6 {
  gap: 28px !important;
}

#root .flex.gap-4 {
  gap: 18px !important;
}

#root .flex.gap-3 {
  gap: 14px !important;
}

#root .flex.gap-2 {
  gap: 10px !important;
}

@media (max-width: 639.98px) {
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #root section div[class*="rounded-2xl"],
  #root article div[class*="rounded-2xl"] {
    padding: 12px;
    border-radius: var(--pv-radius-control) !important;
  }

  #root .space-y-6 > * + * {
    margin-top: 18px !important;
  }

  #root .space-y-4 > * + * {
    margin-top: 12px !important;
  }

  #root .grid.gap-4 {
    gap: 12px !important;
  }

  #root .flex.gap-4 {
    gap: 12px !important;
  }
}

/* ============================================================
   8. СТРАНИЦЫ
   ============================================================ */

/* ----- 8.1 Обзор: секция Telegram-статуса ----- */
#root section[class*="border-success-500"][class*="bg-success-500"] {
  background: var(--color-brand-light) !important;
  border: 1.5px solid var(--color-border) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] [class*="bg-success-500/"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-success-text) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] span[class*="border-success-500"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-success-text) !important;
  border-color: color-mix(in srgb, var(--color-status-success) 38%, white) !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"] {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

#root section[class*="border-success-500"][class*="bg-success-500"] button[class*="border-dark-700"]:hover {
  background: var(--color-bg-soft) !important;
  border-color: rgba(50, 50, 50, 0.4) !important;
}

/* ----- 8.2 Обзор: CTA-ссылки (скоуп — section, чтобы не задевать nav) ----- */
#root section a[href="/app/purchase"] {
  min-height: 48px;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--pv-radius-control) !important;
  font-weight: 700 !important;
}

#root section a[href="/app/devices"] {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  min-height: 48px;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--pv-radius-control) !important;
  font-weight: 700 !important;
}

#root section a[href="/app/devices"] * {
  color: inherit !important;
}

#root section a[href="/app/devices"]:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

/* ----- 8.3 Обзор: блок «Доступ к кабинету» (anti-overflow, прод-проверено) ----- */
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) {
  min-width: 0 !important;
}

#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) > div:not([class*="shrink-0"]) {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) h1,
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) p,
#root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) span {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

@media (max-width: 639.98px) {
  /* Иконка В РЯД с текстом (40px) — стопка с иконкой 56px съедала
     треть первого экрана */
  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #root section[class*="rounded-3xl"] div[class*="h-14"][class*="w-14"][class*="rounded-2xl"] {
    height: 40px !important;
    width: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
  }

  #root section[class*="rounded-3xl"] div[class*="h-14"][class*="w-14"][class*="rounded-2xl"] svg {
    height: 20px !important;
    width: 20px !important;
  }

  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="tracking-"] {
    letter-spacing: 0.08em !important;
  }

  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) h1 {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }

  #root div[class*="flex"][class*="gap-4"]:has(> div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="flex-wrap"] span:last-child {
    overflow-wrap: anywhere !important;
  }

  /* Чистка на телефоне: описание, пилюли Telegram/email, хелпер */
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) p,
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="flex-wrap"],
  #root section[class*="rounded-3xl"]:has(div[class*="h-14"][class*="w-14"][class*="rounded-2xl"]) [class*="min-w-[240px]"] [class*="text-xs"] {
    display: none !important;
  }
}

/* ----- 8.4 Обзор: CTA-плитки «Тарифы»+«Устройства» — полноширинные
   РЯДЫ (заголовок слева, компактная кнопка справа). 2-в-ряд плитки
   сжимали жёлтую кнопку до переноса «Выбрать / тариф».
   ВНИМАНИЕ: :has() нельзя вкладывать в :has() — таргетим по ссылкам-потомкам. */
@media (max-width: 639.98px) {
  #root div[class*="grid"]:has(a[href="/app/purchase"]):has(a[href="/app/devices"]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]),
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) {
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) > div[class*="flex"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) > div[class*="flex"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) p,
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) p {
    display: none !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) h2,
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) a[href="/app/purchase"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) a[href="/app/devices"] {
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
  }
}

/* Планшет 640-1023: CTA-секции — тоже ряд (бандл держит column до lg) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) > div[class*="flex"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) > div[class*="flex"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
}

/* ≥640: CTA-ссылки не переносятся на 2 строки и не растягиваются */
@media (min-width: 640px) {
  #root section a[href="/app/purchase"],
  #root section a[href="/app/devices"] {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}

/* ----- 8.5 Устройства: скрыть шапку-карточку и сломанный фильтр (прод-решение) ----- */
#root section[class*="rounded-3xl"]:has(div[class*="sm:min-w-[420px]"]) {
  display: none !important;
}

#root section[class*="rounded-3xl"] + div[class*="overflow-x-auto"][class*="bg-dark-900/70"] {
  display: none !important;
}

/* ----- 8.6 Устройства/Обзор: список ключей одним полем вниз, без внутреннего скролла ----- */
#root section:has(article[class*="rounded-2xl"]) > div,
#root div:has(> article[class*="rounded-2xl"] + article[class*="rounded-2xl"]) {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#root article[class*="rounded-2xl"] {
  margin-bottom: 12px !important;
}

#root article[class*="rounded-2xl"]:last-child {
  margin-bottom: 0 !important;
}

/* Zebra + ховер строк */
#root article[class*="rounded-2xl"]:nth-child(even) {
  background: var(--color-card) !important;
}

#root article[class*="rounded-2xl"]:nth-child(odd) {
  background: var(--color-card-muted) !important;
}

#root article[class*="rounded-2xl"]:hover {
  background: rgba(227, 227, 226, 0.35) !important;
  border-color: var(--color-brand-muted) !important;
  transform: translateX(2px);
}

@media (max-width: 639.98px) {
  #root article[class*="rounded-2xl"] {
    padding: 16px !important;
    margin-bottom: 10px !important;
  }
}

/* ----- 8.7 Устройства: строки устройств в ряд на телефоне (STAGE 9, прод-проверено) ----- */
@media (max-width: 639.98px) {
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="flex-col"][class*="sm:flex-row"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"]:has(> div[class*="sm:flex-row"]) {
    width: 100% !important;
    display: block !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] > button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    flex: 0 0 auto !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] > div[class*="min-w-0"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #root article[class*="rounded-3xl"] div[class*="space-y-3"][class*="p-5"] {
    padding: 12px !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] > div[class*="sm:flex-row"] [class*="h-12"][class*="w-12"] {
    height: 2rem !important;
    width: 2rem !important;
    flex: 0 0 2rem !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  /* Имя устройства НЕ обрезать в «iPhon…» — переносить */
  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"] [class*="truncate"][class*="font-semibold"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
  }

  /* Счётчик «Устройства 2/5»: компактная пилюля вместо полноширинного бокса */
  #root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"] {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    width: fit-content !important;
    padding: 6px 12px !important;
    text-align: left !important;
    border-radius: 999px !important;
  }

  #root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"] > [class*="mt-1"] {
    margin-top: 0 !important;
    font-size: 0.9375rem !important;
  }
}

/* ----- 8.8 Тарифы ----- */
#root [class*="border-accent-500/35"][class*="bg-accent-500/5"] {
  background: #F5F5F4 !important;
  border: 1px solid rgba(54, 54, 54, 0.22) !important;
  box-shadow: none !important;
}

/* Кнопки периода — это конверсионный CTA, а не серый инфо-бокс:
   центр, лейбл сверху, жёлтая пилюля «Оформить», жёлтый ховер */
#root button.group[class*="bg-dark-950"][class*="border-dark-700"] {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  background: var(--color-card) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 16px !important;
  padding: 14px 12px !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"] .text-dark-400 {
  color: var(--color-text-muted) !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"] > div[class*="mt-3"] {
  margin-top: 2px !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"]::after {
  content: "Оформить";
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-accent);
  border-radius: 999px;
  padding: 6px 16px;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"]:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-tint) !important;
  color: var(--color-text) !important;
}

#root button.group[class*="bg-dark-950"][class*="border-dark-700"]:hover::after {
  background: var(--color-accent-hover);
}

/* Грид периодов ≥640: auto-fit без сирот; без max-width — ряд доходит
   до правого края карточки (пустая полоса ~165px на ПК была недочётом) */
@media (min-width: 640px) {
  #root [class*="rounded-[28px]"] div[class*="grid-cols-2"][class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  }
}

/* Популярный тариф: класс pv-tariff-popular ставит внешний патч
   pager-ui-patch.js ТОЛЬКО карточке с «PLUS» в названии — прежняя
   эвристика «2+ периода» метила ОБА тарифа на проде. Бейдж — статичный
   чип НАД заголовком (absolute top-right перекрывал «Подписка PLUS»).
   Без патча класса нет → бейджа нет нигде (fail-safe). */
#root div[class*="rounded-[28px]"].pv-tariff-popular {
  border: 2px solid var(--color-accent) !important;
  box-shadow: 0 8px 24px rgba(246, 196, 83, 0.18) !important;
}

#root div[class*="rounded-[28px]"].pv-tariff-popular::before {
  content: "Популярный";
  display: inline-flex;
  width: fit-content;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Мобила: внутренний бордер-бокс «Что входит» — без рамки, фичи-чипы
   «Во всех тарифах» — компактные пилюли в строку */
@media (max-width: 639.98px) {
  #root div[class*="rounded-[28px]"] > div[class*="mt-6"][class*="p-5"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 14px !important;
  }

  #root section[class*="bg-dark-900/50"] > div[class*="mt-4"][class*="grid"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  #root section[class*="bg-dark-900/50"] > div[class*="mt-4"][class*="grid"] > div[class*="bg-dark-950/60"] {
    width: auto;
    padding: 6px 12px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #F4F4F3 !important;
    font-size: 0.8125rem !important;
  }
}

/* Фиксированная панель оформления */
#root .fixed button[class*="border-accent-500"][class*="bg-accent-500/10"] {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent-dark) !important;
  color: var(--color-text) !important;
  min-height: 48px;
  padding: 14px 24px;
  font-size: 0.9375rem;
}

#root .fixed button[class*="border-accent-500"][class*="bg-accent-500/10"]:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-dark) !important;
  color: var(--color-text) !important;
}

#root .fixed button[class*="border-dark-700"][class*="bg-dark-950"],
#root .fixed button[class*="border-dark-700"][class*="bg-dark-900"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  min-height: 44px;
  padding: 12px 20px;
}

#root .fixed button[class*="border-dark-700"][class*="bg-dark-950"]:hover,
#root .fixed button[class*="border-dark-700"][class*="bg-dark-900"]:hover {
  background: rgba(227, 227, 226, 0.3) !important;
  border-color: rgba(50, 50, 50, 0.4) !important;
}

/* ----- 8.9 Поддержка: чат ----- */
#root section:has(#support-message) {
  overflow: hidden !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--pv-radius-card) !important;
  box-shadow: var(--pv-shadow-card) !important;
  color: var(--color-text) !important;
  padding: 24px !important;
}

#root section:has(#support-message) h2,
#root section:has(#support-message) .text-dark-100,
#root section:has(#support-message) .text-dark-200 {
  color: var(--color-text) !important;
}

#root section:has(#support-message) .text-dark-300,
#root section:has(#support-message) .text-dark-400,
#root section:has(#support-message) .text-dark-500 {
  color: var(--color-text-muted) !important;
}

#root section:has(#support-message) span[class*="border-success-500"] {
  background: color-mix(in srgb, var(--color-status-success) 18%, white) !important;
  color: var(--color-success-text) !important;
  border-color: color-mix(in srgb, var(--color-status-success) 38%, white) !important;
}

/* Зона сообщений */
#root section:has(#support-message) [style*="overflow-y"],
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl {
  background: var(--color-bg-soft) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  padding: 16px;
  scrollbar-color: var(--color-brand-muted) var(--color-bg-soft);
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar {
  width: 8px;
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar-track {
  background: var(--color-bg-soft);
}

#root section:has(#support-message) [style*="overflow-y"]::-webkit-scrollbar-thumb {
  background: var(--color-brand-muted);
  border-radius: 999px;
}

/* Подписи отправителей */
#root section:has(#support-message) .items-start > .mb-0\.5 {
  color: var(--color-brand) !important;
  font-weight: 600 !important;
}

#root section:has(#support-message) .items-end > .mb-0\.5 {
  color: var(--color-brand-dark) !important;
  font-weight: 600 !important;
}

/* Пузыри: входящие — белые, исходящие — графит */
#root section:has(#support-message) .items-start > .mr-auto {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px 16px 16px 6px !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#root section:has(#support-message) .items-start > .mr-auto * {
  color: var(--color-text) !important;
}

#root section:has(#support-message) .items-start > .mr-auto span {
  color: var(--color-text-muted) !important;
}

#root section:has(#support-message) .items-end > .ml-auto {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  border-radius: 16px 16px 6px 16px !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root section:has(#support-message) .items-end > .ml-auto * {
  color: var(--color-text-inverse) !important;
}

#root section:has(#support-message) .items-end > .ml-auto span {
  color: rgb(255 255 255 / 0.72) !important;
}

/* Форма отправки: вынесена на подложку во всю ширину карточки */
#root section:has(#support-message) form {
  margin-inline: -24px !important;
  margin-bottom: -24px !important;
  padding: 16px 24px 24px !important;
  background: var(--color-card) !important;
  border-top: 1px solid var(--color-border) !important;
}

#root section:has(#support-message) form > div.flex {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#root section:has(#support-message) form > div[style] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

#root #support-message {
  min-height: 96px !important;
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  color: var(--color-text) !important;
}

#root #support-message::placeholder {
  color: var(--color-text-muted) !important;
}

/* Кнопка-скрепка */
#root #support-message + button {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-soft) !important;
  box-shadow: none !important;
}

#root #support-message + button:hover {
  background: rgba(227, 227, 226, 0.3) !important;
  border-color: rgba(50, 50, 50, 0.4) !important;
  color: var(--color-text) !important;
}

/* Кнопка «Отправить» — графит */
#root #support-message + button + button {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root #support-message + button + button:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

#root #support-message + button + button:disabled {
  background: var(--color-section-gray) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* ----- 8.10 Поддержка: карточка Telegram / MTProxy ----- */
#root section:has(a[href^="tg://proxy"]) {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--pv-radius-card) !important;
  box-shadow: var(--pv-shadow-card) !important;
}

#root section:has(a[href^="tg://proxy"]) .text-dark-100 {
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) .text-dark-400,
#root section:has(a[href^="tg://proxy"]) .text-dark-500 {
  color: var(--color-text-muted) !important;
}

#root section:has(a[href^="tg://proxy"]) .rounded-2xl[class*="bg-dark-950"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
}

#root section:has(a[href^="tg://proxy"]) .font-mono {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #F6F6F5 !important;
  border: 1px solid var(--color-section-gray) !important;
  color: var(--color-text) !important;
  user-select: all;
  -webkit-user-select: all;
}

/* Жёлтая CTA «Подключить прокси» */
#root section:has(a[href^="tg://proxy"]) a[href^="tg://proxy"].bg-accent-500 {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) a[href^="tg://proxy"].bg-accent-500:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-dark) !important;
}

/* Нейтральные кнопки (бот, копирование) */
#root section:has(a[href^="tg://proxy"]) button,
#root section:has(a[href^="tg://proxy"]) a[href="https://t.me/pagervpn_bot"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

#root section:has(a[href^="tg://proxy"]) button:hover,
#root section:has(a[href^="tg://proxy"]) a[href="https://t.me/pagervpn_bot"]:hover {
  background: rgba(227, 227, 226, 0.3) !important;
  border-color: rgba(50, 50, 50, 0.4) !important;
}

/* ----- 8.11 Поддержка: мобильная упаковка ----- */
#root div:has(> section #support-message):has(> section a[href^="tg://proxy"]),
#root section:has(#support-message),
#root section:has(a[href^="tg://proxy"]),
#root section:has(#support-message) form,
#root section:has(#support-message) form > div.flex,
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl,
#root #support-message {
  min-width: 0 !important;
  max-width: 100% !important;
}

#root section:has(#support-message) .items-start,
#root section:has(#support-message) .items-end,
#root section:has(#support-message) .items-start > .mr-auto,
#root section:has(#support-message) .items-end > .ml-auto {
  min-width: 0 !important;
}

#root section:has(#support-message) .items-start > .mr-auto,
#root section:has(#support-message) .items-end > .ml-auto {
  max-width: 92% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#root section:has(#support-message) .items-start > .mr-auto img,
#root section:has(#support-message) .items-end > .ml-auto img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 639.98px) {
  #root div:has(> section #support-message):has(> section a[href^="tg://proxy"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  #root section:has(#support-message),
  #root section:has(a[href^="tg://proxy"]) {
    padding: 16px !important;
    border-radius: var(--pv-radius-card-sm) !important;
  }

  #root section:has(#support-message) [style*="overflow-y"] {
    max-height: min(60vh, 420px) !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  #root section:has(#support-message) .items-start > .mr-auto,
  #root section:has(#support-message) .items-end > .ml-auto {
    max-width: 85% !important;
    padding: 12px 14px !important;
    font-size: 0.9375rem !important;
  }

  #root section:has(#support-message) form {
    margin-inline: -16px !important;
    margin-bottom: -16px !important;
    padding: 14px 16px 16px !important;
  }

  /* Композер: textarea на всю ширину, под ним Фото + Отправить в РЯД
     (3 стопки полноширинных контролов растягивали страницу) */
  #root section:has(#support-message) form > div.flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #root #support-message {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 84px !important;
    padding: 12px !important;
  }

  #root #support-message + button {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 11px 16px !important;
  }

  #root #support-message + button + button {
    width: auto !important;
    flex: 1 1 0 !important;
  }
}

/* ----- 8.12 Login: вкладки «Вход/Регистрация» — актив графит ----- */
#root a[aria-current="page"],
#root button.flex-1.bg-accent-500,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"],
#root button[class*="bg-accent-500/15"],
#root a[class*="bg-accent-500/10"][class*="border-accent-500"] {
  border-color: var(--color-brand) !important;
  background: var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: none !important;
}

#root a[aria-current="page"] *,
#root button.flex-1.bg-accent-500 *,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"] *,
#root button[class*="bg-accent-500/15"] *,
#root a[class*="bg-accent-500/10"][class*="border-accent-500"] * {
  color: inherit !important;
}

#root a[aria-current="page"]:hover,
#root button.flex-1.bg-accent-500:hover,
#root button[class*="bg-accent-500/10"][class*="border-accent-500"]:hover,
#root button[class*="bg-accent-500/15"]:hover,
#root a[class*="bg-accent-500/10"][class*="border-accent-500"]:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
  transform: none;
  box-shadow: none !important;
}

/* ============================================================
   9. МОДАЛКИ
   ============================================================ */

/* ----- 9.1 Payment/portal-модалки (рендерятся вне #root).
   :is(.max-w-lg, .max-w-md) накрывает обе портальные карточки. ----- */
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: var(--pv-shadow-modal) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) h2 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) .text-dark-400,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) .text-dark-500 {
  color: var(--color-text-muted) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) .text-dark-100,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) .text-dark-200,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) .text-dark-300 {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) > button.absolute {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) > button.absolute:hover {
  color: var(--color-text) !important;
  background: var(--color-bg-soft) !important;
}

/* Способы оплаты: выбранный — жёлтая рамка + тинт */
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-accent-500"][class*="bg-accent-500/10"] {
  background: rgba(246, 196, 83, 0.1) !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.16) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-accent-500"][class*="bg-accent-500/10"] * {
  color: var(--color-text) !important;
}

/* Невыбранные способы: белые, ховер — жёлтый намёк */
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"],
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"] *,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"] * {
  color: inherit !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-100,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-100 {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-300,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-300,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"] .text-dark-400,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"] .text-dark-400 {
  color: var(--color-text-soft) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-950"]:hover,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-700"][class*="bg-dark-900"]:hover {
  background: var(--color-card) !important;
  border-color: rgba(246, 196, 83, 0.55) !important;
}

/* Primary CTA модалки — жёлтая */
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button.bg-accent-500,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) a.bg-accent-500 {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  min-height: 48px;
  padding: 14px 24px;
  font-size: 0.9375rem;
  box-shadow: none !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button.bg-accent-500 *,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) a.bg-accent-500 * {
  color: var(--color-text) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button.bg-accent-500:hover,
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) a.bg-accent-500:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-dark) !important;
  color: var(--color-text) !important;
}

/* Вторичные кнопки модалки */
body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button[class*="border-dark-"]:where(:not([class*="bg-dark-950"]):not([class*="bg-dark-900"])) {
  min-height: 44px;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

body > .fixed.inset-0 button[class*="border-dark-"]:where(:not([class*="bg-dark-950"]):not([class*="bg-dark-900"])):hover {
  border-color: rgba(50, 50, 50, 0.4) !important;
  background: rgba(227, 227, 226, 0.3) !important;
  color: var(--color-text) !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button:disabled {
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

@media (max-width: 639.98px) {
  body > .fixed.inset-0 {
    padding: 16px !important;
  }

  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--pv-radius-card) !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
  }

  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) > button.absolute {
    width: 40px !important;
    height: 40px !important;
    top: 12px !important;
    right: 12px !important;
  }

  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) button {
    min-height: 48px;
  }
}

/* ----- 9.1a Инлайн-диалоги подтверждения (admin, НЕ портал: fixed inset-0
   внутри #root без своего фона; карточка max-w-sm bg-dark-800 без рамки —
   на светлой теме без этих правил диалог сливается со страницей) ----- */
#root div[class*="fixed"][class*="inset-0"]:has(> div[class*="max-w-sm"]) {
  background: rgba(17, 17, 17, 0.45) !important;
}

#root div[class*="fixed"][class*="inset-0"] > div[class*="max-w-sm"] {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--pv-shadow-modal) !important;
}

/* ----- 9.1b Реферальный граф (портал #referral-network-container вне #root):
   канвас остаётся тёмным (bg-[#0a0a0f] — литеральный hex), но плашки
   с классами bg-dark / text-dark белеют из-за глобального ремапа токенов —
   возвращаем им тёмные поверхности для цельного тёмного оверлея ----- */
#referral-network-container [class*="bg-dark-9"] {
  background-color: #15181D !important;
}

#referral-network-container [class*="text-dark-1"],
#referral-network-container [class*="text-dark-2"] {
  color: #E8E8E8 !important;
}

#referral-network-container [class*="border-dark-"] {
  border-color: #2F3338 !important;
}

/* ----- 9.2 Инжект-модалка «Забыли пароль» (password-forgot-live.js).
   Скрипт вешает <style> в head ПОЗЖЕ нашего <link> — без !important его
   тёмная синяя тема победила бы. Инлайн-цветов там нет, только
   позиционирование глаза. JS не трогаем. ----- */
.pager-forgot-password-live-link {
  color: var(--color-text-soft) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.pager-forgot-password-live-link:hover {
  color: var(--color-text) !important;
}

.pager-login-live-notice {
  background: var(--color-success-light) !important;
  color: var(--color-success-text) !important;
  border-color: var(--color-success-border) !important;
}

.pager-forgot-password-live-overlay {
  background: rgba(17, 17, 17, 0.45) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--pv-shadow-modal) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card h2 {
  color: var(--color-text) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card p {
  color: var(--color-text-muted) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card label {
  color: var(--color-text-soft) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card input {
  background: var(--color-card-muted) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

#pager-forgot-password-live-modal .pager-forgot-password-live-card input:focus {
  border-color: var(--color-brand) !important;
  box-shadow: var(--pv-ring) !important;
}

.pager-forgot-password-live-send {
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
}

.pager-forgot-password-live-send:hover {
  background: var(--color-accent-hover) !important;
}

.pager-forgot-password-live-cancel {
  border-color: var(--color-border) !important;
  background: transparent !important;
  color: var(--color-text-soft) !important;
}

.pager-forgot-password-live-cancel:hover {
  background: var(--color-brand-light) !important;
  color: var(--color-text) !important;
}

.pager-forgot-password-live-message.success {
  background: var(--color-success-light) !important;
  border-color: var(--color-success-border) !important;
  color: var(--color-success-text) !important;
}

.pager-forgot-password-live-message.error {
  background: var(--color-danger-bg) !important;
  border-color: var(--color-danger-border) !important;
  color: var(--color-danger-text) !important;
}

/* Глаз-тоггл: его инжект-стили с !important — перебиваем специфичностью
   (body + class + element > class + element) */
body button.pager-live-password-toggle {
  color: var(--color-text-muted) !important;
}

body button.pager-live-password-toggle:hover,
body button.pager-live-password-toggle:focus-visible {
  background: rgba(54, 54, 54, 0.08) !important;
  color: var(--color-brand) !important;
}

/* ============================================================
   10. АДАПТИВ: СКВОЗНЫЕ ПРАВИЛА
   ============================================================ */
@media (max-width: 639.98px) {
  body,
  #root {
    overflow-x: hidden !important;
  }

  /* Многоколоночные сетки (3+) схлопываем; 2-колоночные оставляем */
  #root [class*="grid-cols-3"],
  #root [class*="grid-cols-4"],
  #root [class*="grid-cols-5"],
  #root [class*="grid-cols-6"] {
    grid-template-columns: 1fr !important;
  }

  /* Моно-текст: перенос вместо обрезания — НО НЕ для URI-боксов
     (break-all) и tg://-ссылки: им одна строка с эллипсисом, копия —
     кнопкой/тапом (user-select:all). Стена из 4-6 строк mono-гибериша
     раздувала каждую карточку */
  #root [class*="font-mono"]:not([class*="break-all"]),
  #root code,
  #root pre {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  #root [class*="font-mono"][class*="break-all"],
  #root section:has(a[href^="tg://proxy"]) .font-mono {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Обёртка «URI + Скопировать»: с v3b URI на мобиле скрыт целиком,
     раскладку задаёт секция 14 (одна колонка, кнопка на всю ширину) */

  /* Длинный текст: перенос только на текстовых элементах */
  #root p,
  #root span,
  #root h1,
  #root h2,
  #root h3 {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Альбомная ориентация на телефоне/планшете: компактнее по вертикали */
@media (max-width: 1023.98px) and (orientation: landscape) {
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    padding: 16px 20px !important;
  }

  #root .space-y-6 > * + * {
    margin-top: 20px !important;
  }

  #root .space-y-4 > * + * {
    margin-top: 14px !important;
  }
}

/* Touch-устройства: без hover-трансформов */
@media (hover: none) {
  #root button:hover,
  #root a:hover,
  #root section[class*="rounded-3xl"]:hover,
  #root article[class*="rounded-3xl"]:hover,
  #root article[class*="rounded-2xl"]:hover,
  #root aside nav a:hover {
    transform: none !important;
  }
}

/* ============================================================
   12. ДИЗАЙН-ПОЛИРОВКА 2026-06-11b (по скриншот-критике):
   логин, жёлтые копи-кнопки, флэттенинг рамок, консистентность
   ============================================================ */

/* --- 12.1 Login: на мобиле форма ПЕРВОЙ (маркетинг-карточка вниз) --- */
@media (max-width: 1023.98px) {
  #root div[class*="max-w-5xl"] > div[class*="rounded-3xl"]:first-child {
    order: 2;
  }

  /* Карточка не липнет к верхнему краю экрана */
  #root .flex.min-h-screen.items-center.justify-center {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }
}

/* Дубль-брендинг: «PAGER VPN» капсом прямо над заголовком «Pager VPN» */
#root div[class*="max-w-5xl"] > div[class*="rounded-3xl"] > div[class*="uppercase"] {
  display: none !important;
}

/* Шаги 1/2/3 на мобиле: компактные чипы вместо трёх карточек по 114px */
@media (max-width: 639.98px) {
  #root div[class*="max-w-5xl"] div[class*="mt-8"][class*="grid"] {
    margin-top: 16px !important;
    gap: 8px !important;
  }

  #root div[class*="max-w-5xl"] div[class*="mt-8"][class*="grid"] > div[class*="rounded-2xl"] {
    padding: 10px 14px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
  }

  #root div[class*="max-w-5xl"] div[class*="mt-8"][class*="grid"] > div[class*="rounded-2xl"] > [class*="mt-2"] {
    margin-top: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    flex: 1 1 100%; /* описание всегда с новой строки — шаги выглядят одинаково */
  }
}

/* Login десктоп: шаги прижаты к низу карточки (было 90px пустоты),
   заголовки шагов в одну строку */
@media (min-width: 1024px) {
  #root div[class*="max-w-5xl"] > div[class*="rounded-3xl"]:first-child {
    display: flex;
    flex-direction: column;
  }

  #root div[class*="max-w-5xl"] > div[class*="rounded-3xl"]:first-child > div[class*="mt-8"] {
    margin-top: auto !important;
    padding-top: 32px;
  }

  /* nowrap прижимал «2. Подтверждение» к самому краю карточки шага */
  #root div[class*="max-w-5xl"] div[class*="mt-8"][class*="grid"] > div[class*="rounded-2xl"] > div:first-child {
    font-size: 0.8125rem;
    white-space: normal;
  }
}

/* Login: «Войти» — герой-CTA, а не ещё одно поле */
#root div[class*="max-w-5xl"] form button[type="submit"] {
  min-height: 54px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
}

/* --- 12.2 «Скопировать» у ключей — главное действие, жёлтое.
   :not(success/pv-copied) — НЕ глушить зелёный фидбек «Скопировано»
   (раньше жёлтый перебивал bg-success-500 и смена не была видна) --- */
#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button {
  min-height: 40px;
  padding: 9px 14px !important;
  border-radius: var(--pv-radius-control) !important;
  white-space: nowrap;
}

#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button:not([class*="bg-success-"]):not(.pv-copied) {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button:hover:not([class*="bg-success-"]):not(.pv-copied) {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-text) !important;
}

/* --- 12.3 Флэттенинг «рамка-в-рамке»: внутренние боксы — мягкая
   заливка без бордера (строки устройств, шаги логина, чипы) --- */
#root div[class*="rounded-2xl"][class*="bg-dark-950/60"],
#root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"],
#root [class*="font-mono"][class*="bg-dark-"][class*="break-all"] {
  border-color: transparent !important;
  background: #F6F6F5 !important;
}

/* --- 12.4 Мета-строка ключа на мобиле: без повисших «•» в конце строк --- */
@media (max-width: 639.98px) {
  #root article [class*="gap-x-2"] span[class*="text-dark-600"] {
    display: none !important;
  }
}

/* --- 12.5 Шапка: сабтайтл (email · страница) одной строкой с эллипсисом —
   высота шапки не прыгает между вкладками --- */
#root header div:has(> [class*="text-dark-500"]) {
  min-width: 0;
}

#root header [class*="text-dark-500"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100%;
}

/* --- 12.6 Интро страниц: убрать дубль-eyebrow над H1, выровнять размер --- */
#root main > div > div:has(> h1) > div[class*="uppercase"] {
  display: none !important;
}

#root .text-4xl {
  font-size: 1.875rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

/* --- 12.7 Устройства: нижние кнопки карточки — общий хром (радиус 12) --- */
#root article[class*="rounded-3xl"] button[class*="rounded-2xl"] {
  border-radius: var(--pv-radius-control) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* --- 12.8 Поддержка: плоское пустое состояние (тройная рамка),
   живой disabled-Отправить, tg-ссылка без подчёркивания --- */
#root section:has(#support-message) [class*="rounded-2xl"][class*="text-center"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 20px 8px !important;
}

#root #support-message + button + button:disabled {
  background: rgba(54, 54, 54, 0.45) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  opacity: 1 !important; /* перебить общий :disabled {opacity:.5} — иначе застирано */
}

#root section:has(a[href^="tg://proxy"]) .font-mono a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}

/* --- 12.9 Поддержка десктоп: чат-карточка без мёртвой пустоты снизу,
   плейсхолдер textarea не режется, кнопки MTProxy стопкой без переносов --- */
@media (min-width: 1024px) {
  #root section:has(#support-message) {
    display: flex !important;
    flex-direction: column !important;
  }

  #root section:has(#support-message) [style*="overflow-y"],
  #root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl {
    flex: 1 1 auto !important;
  }

  #root section:has(#support-message) form {
    margin-top: auto !important;
  }

  #root #support-message {
    min-height: 136px !important;
  }

  #root section:has(a[href^="tg://proxy"]) div[class*="mt-3"][class*="sm:flex-row"] {
    flex-direction: column !important;
  }

  #root section:has(a[href^="tg://proxy"]) div[class*="mt-3"][class*="sm:flex-row"] > * {
    white-space: nowrap;
  }
}

/* ============================================================
   11. A11Y (в конце файла — выигрывает ничьи)
   ============================================================ */
html {
  scroll-behavior: smooth;
}

#root aside nav a:focus-visible,
#root header nav a:focus-visible,
#root nav[class*="overflow-x-auto"] a:focus-visible {
  outline: var(--pv-focus-outline) !important;
  outline-offset: 2px !important;
}

/* Reduced motion: честное отключение, скоуп — приложение и порталы,
   не голый * (инжект-модалка продолжает работать). Спиннеры замирают,
   но остаются видимыми. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  #root *,
  #root *::before,
  #root *::after,
  body > .fixed.inset-0 * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   13. MOBILE APP SHELL — тема v3 (ТОЛЬКО телефон ≤639.98px)
   Телефон выглядит как приложение: фиксированный таб-бар снизу
   (иконка над подписью), компактная шапка-бренд, large-title,
   серый фон страницы + белые карточки без бордеров.
   ПК (≥1024) и планшет (640–1023.98) НЕ затронуты.
   Скоуп юзер-нав :has(> a[href^="/app"]) — admin-шелл не трогаем.
   Секция в конце файла: перебивает прежние мобильные правила
   каскадом при равной специфичности.
   ============================================================ */
@media (max-width: 639.98px) {
  /* --- 13.1 Фон приложения: серый холст, белые карточки --- */
  html,
  body,
  #root {
    background: #F3F3F1 !important;
  }

  /* --- 13.2 Шапка: компактный бренд-бар ~52px.
     ВАЖНО: backdrop-filter создаёт containing block для fixed-потомков —
     гасим, иначе нижний бар прилипнет к низу шапки, а не экрана --- */
  #root header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--color-card) !important;
    border-bottom: 1px solid #E8E8E6 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  #root header > div {
    padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)) !important;
    gap: 0 !important;
    min-height: 52px !important;
    justify-content: center !important;
  }

  #root header [class*="text-lg"] {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  /* Сабтайтл (email · путь) в шапке не нужен — контекст даёт large-title */
  #root header [class*="text-dark-500"] {
    display: none !important;
  }

  /* --- 13.3 Нижняя таб-навигация (главный «как приложение» паттерн).
     Бандл: nav.scrollbar-hide.flex.gap-2.overflow-x-auto.lg:hidden ВНУТРИ
     header.sticky.z-40 — fixed выдёргивает его к низу вьюпорта --- */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 45 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid #E5E5E3 !important;
    box-shadow: 0 -6px 24px rgba(17, 17, 17, 0.07) !important;
    overflow: visible !important;
  }

  /* Без поддержки blur полупрозрачный фон гостит текст под баром —
     фолбэк: непрозрачный белый */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) {
      background: #FFFFFF !important;
    }
  }

  /* Таб: иконка 22px над подписью 11px, колонкой, без пилюль */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a,
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 5px 2px !important;
    font-size: 0.6875rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
  }

  /* Иконка крупнее, чем в 2×2-наве */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[href^="/app"]::before {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  /* Неактив — серый, актив — графит; никаких заливок и бордеров */
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a:not([aria-current="page"]),
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button:not([aria-current="page"]) {
    background: transparent !important;
    border: 0 !important;
    color: #8A8C8E !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a:hover:not([aria-current="page"]) {
    background: transparent !important;
    color: var(--color-text) !important;
  }

  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > a[aria-current="page"],
  #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) > button[aria-current="page"] {
    background: transparent !important;
    border: 0 !important;
    color: var(--color-text) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }

  /* Клавиатура: бар прячется при вводе текста, чтобы не толкаться
     с клавиатурой (инпуты инжект-модалок вне #root тоже считаются) */
  body:has(input:focus:not([type="checkbox"]):not([type="radio"]), textarea:focus, select:focus) #root nav[class*="overflow-x-auto"][class*="lg:hidden"]:has(> a[href^="/app"]) {
    display: none !important;
  }

  /* Контенту — место под бар (66-70px) + воздух; скоуп только страницы
     с юзер-навом (/login и /admin без изменений) */
  #root > div:has(nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href^="/app"]),
  #root > main:has(nav[class*="overflow-x-auto"][class*="lg:hidden"] > a[href^="/app"]) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  /* --- 13.4 Large-title страниц (как iOS): h1 крупный и жирный;
     заголовок «Доступа к кабинету» остаётся 1.5rem (правило 8.3 выше
     специфичнее — длинный email в 1.75rem не нужен) --- */
  #root main h1 {
    font-size: 1.75rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
  }

  /* Подписи секций: 13px uppercase muted */
  #root main [class*="uppercase"][class*="tracking-"] {
    font-size: 0.8125rem !important;
    letter-spacing: 0.07em !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
  }

  /* --- 13.5 Карточки как в приложении: белые, БЕЗ бордеров,
     radius 18, мягкая тень на сером фоне --- */
  #root section[class*="rounded-3xl"],
  #root article[class*="rounded-3xl"] {
    background: var(--color-card) !important;
    border-color: transparent !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 6px 20px rgba(17, 17, 17, 0.05) !important;
  }

  /* Вложенные карточки ключей (Обзор): мягкая заливка без бордера */
  #root section article[class*="rounded-2xl"] {
    background: #F6F6F5 !important;
    border-color: transparent !important;
    border-radius: 14px !important;
  }

  /* --- 13.6 Строки устройств: ряды списка с разделителями
     вместо вложенных серых боксов --- */
  #root article[class*="rounded-3xl"] div[class*="space-y-3"][class*="p-5"] {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  #root article[class*="rounded-3xl"] div[class*="space-y-3"][class*="p-5"] > * + * {
    margin-top: 0 !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"]:has(> div[class*="sm:flex-row"]) {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #ECECEB !important;
    border-radius: 0 !important;
    padding: 12px 2px !important;
    margin: 0 !important;
  }

  #root article[class*="rounded-3xl"] div[class*="rounded-2xl"]:has(> div[class*="sm:flex-row"]):first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
  }

  /* --- 13.7 Кнопки: полноширинные primary 50px / radius 14
     («Скопировать» в гриде URI+кнопка финально стилит секция 14 —
     с v3b она тоже полноширинная, жёлтую красит 12.2) --- */
  #root main form button[type="submit"],
  #root main button[class*="w-full"],
  #root main a[class*="w-full"][class*="bg-accent-500"] {
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  /* Композер поддержки: [Фото|Отправить] в ряд — 1rem из 13.7 ломал
     «Отправить» в две строки на 360px */
  #root #support-message ~ button {
    min-height: 46px !important;
    font-size: 0.9375rem !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
  }

  /* --- 13.8 Карточка Telegram-статуса: белая, как остальные
     (правило 8.1 красило в серый — на сером фоне v3 выглядела
     «утопленной»; специфичность (1,2,1) перебивает 8.1) --- */
  #root section[class*="border-success-500"][class*="bg-success-500"] {
    background: var(--color-card) !important;
    border-color: transparent !important;
  }
}

/* ============================================================
   14. MOBILE v3b: ключ без сырого URI (фидбек юзера 2026-06-11)
   ============================================================ */
@media (max-width: 639.98px) {
  /* Сырой vless-URI на телефоне не читается («vless:…») — прячем
     текст, остаётся полноширинная жёлтая «Скопировать» (кнопка
     копирует из props, не из DOM — прятать безопасно) */
  #root div[class*="grid-cols-[minmax(0,1fr)_auto]"] {
    grid-template-columns: 1fr !important;
  }

  #root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > [class*="font-mono"] {
    display: none !important;
  }

  #root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 0.9375rem !important;
  }

  /* Зеркало для payment-модалки: done-состояние «Оплата прошла успешно»
     рендерится ПОРТАЛОМ в body (вне #root) и содержит тот же грид
     «URI + Скопировать» — без зеркала юзер сразу после оплаты видел
     стену сырого vless-текста (находка адверсариального ревью) */
  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] {
    grid-template-columns: 1fr !important;
  }

  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] > [class*="font-mono"] {
    display: none !important;
  }

  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 0.9375rem !important;
  }

  /* Жёлтый primary (специфичность (0,5,3) — перебивает белую 9.1 (0,5,2));
     зелёное состояние «Скопировано» (bg-success-500) не матчится — остаётся */
  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button[class*="border-dark-"],
  body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button[class*="border-dark-"]:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
  }
}

/* ============================================================
   15. v3c: САЙДБАР / УСТРОЙСТВА / ТАРИФЫ (фидбек юзера 2026-06-11,
   вторая волна). Глобальные правила — действуют на всех ширинах.
   ============================================================ */

/* --- 15.1 Сайдбар ПК: один бренд вместо трёх строк
   (PAGER VPN + Pager VPN + Личный кабинет) --- */
#root aside > div[class*="mb-6"] > div[class*="uppercase"],
#root aside > div[class*="mb-6"] > div[class*="mt-1"] {
  display: none !important;
}

#root aside > div[class*="mb-6"] > div[class*="text-xl"] {
  margin-top: 0 !important;
  font-family: "Outfit", "Manrope", system-ui, sans-serif !important;
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
}

#root aside > div[class*="mb-6"] > div[class*="text-xl"]::after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--color-accent);
}

/* --- 15.2 Футер карточки ключа: «Очистить список устройств» скрывает
   JS-патч (по тексту), оставшаяся «Перевыпустить ключ» — на всю ширину --- */
#root article[class*="rounded-3xl"] div[class*="border-t"][class*="sm:grid-cols-2"] {
  grid-template-columns: 1fr !important;
}

/* --- 15.3 Копи-кнопка: иконка + галочка/зелёный при копировании.
   На Обзоре svg рисует React — там только перестали глушить success
   (см. 12.2). Текстовой кнопке Устройств иконку даёт ::before,
   состояние — класс .pv-copied от JS-патча --- */
#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button {
  --pv-copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3.75A2.25 2.25 0 0 1 10.25 1.5h8a2.25 2.25 0 0 1 2.25 2.25v8A2.25 2.25 0 0 1 18.25 14h-1.5v-2h1.25a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25V5H8V3.75Z'/%3E%3Cpath d='M3.5 9.75A2.25 2.25 0 0 1 5.75 7.5h8A2.25 2.25 0 0 1 16 9.75v8A2.25 2.25 0 0 1 13.75 20h-8a2.25 2.25 0 0 1-2.25-2.25v-8Zm2.25-.25a.25.25 0 0 0-.25.25v8c0 .138.112.25.25.25h8a.25.25 0 0 0 .25-.25v-8a.25.25 0 0 0-.25-.25h-8Z'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button.pv-copied {
  --pv-copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.55a1.2 1.2 0 0 1-.85-.35l-4.4-4.4a1.2 1.2 0 1 1 1.7-1.7l3.55 3.55 8.4-8.4a1.2 1.2 0 1 1 1.7 1.7l-9.25 9.25a1.2 1.2 0 0 1-.85.35Z'/%3E%3C/svg%3E");
}

#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button:not(:has(svg))::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--pv-copy-icon) center / contain no-repeat;
  mask: var(--pv-copy-icon) center / contain no-repeat;
}

/* «Скопировано» — спокойный зелёный в палитре темы (оба варианта кнопки) */
#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button.pv-copied,
#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button[class*="bg-success-"],
#root div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button[class*="bg-success-"]:hover {
  background: var(--color-success-light) !important;
  border: 1px solid var(--color-success-border) !important;
  color: var(--color-success-text) !important;
  font-weight: 600 !important;
}

body > .fixed.inset-0 :is(.max-w-lg, .max-w-md) div[class*="grid-cols-[minmax(0,1fr)_auto]"] > button[class*="bg-success-"] {
  background: var(--color-success-light) !important;
  border-color: var(--color-success-border) !important;
  color: var(--color-success-text) !important;
}

/* --- 15.4 Тарифы: одна кнопка покупки, выбор периода — в модалке --- */
#root div[class*="rounded-[28px]"] div[class*="mt-auto"] > div[class*="uppercase"] {
  display: none !important;
}

#root div[class*="rounded-[28px]"] div[class*="grid-cols-2"][class*="xl:grid-cols-4"] {
  grid-template-columns: 1fr !important;
  max-width: 460px;
}

#root div[class*="rounded-[28px]"] div[class*="grid-cols-2"][class*="xl:grid-cols-4"] > button.group {
  display: none !important;
}

#root button.pv-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--color-accent);
  border-radius: 14px;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

#root button.pv-buy-btn:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* PLUS первым на всех ширинах (контейнер — grid, order работает) */
#root div[class*="gap-6"][class*="2xl:grid-cols-2"] > .pv-tariff-popular {
  order: -1;
}

/* --- 15.5 Мобила: плашка «Устройства N / M» — обычная строка меты,
   как «Действует до …», а не отдельное «облачко» --- */
@media (max-width: 639.98px) {
  #root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"] {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  #root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"] > div[class*="text-xs"] {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-muted) !important;
  }

  #root div[class*="border-dark-700"][class*="bg-dark-950/80"][class*="text-right"] > [class*="mt-1"] {
    margin-top: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 650 !important;
    color: var(--color-text) !important;
  }
}

/* --- 15.6 ПК: бренд не дублируется — «Pager VPN» крупно в сайдбаре,
   в шапке остаётся email · раздел --- */
@media (min-width: 1024px) {
  #root header [class*="text-lg"] {
    display: none !important;
  }

  #root header [class*="text-dark-500"] {
    font-size: 0.9375rem !important;
    color: var(--color-text-soft) !important;
  }
}

/* ============================================================
   16. v4: дизайн-итерация 2026-06-13 (жалобы владельца + критика).
   Секция в конце файла — при равной специфичности выигрывает
   каскадом у прежних правил.
   ============================================================ */

/* --- 16.1 Бренд в мобильной/планшетной шапке = ПК-сайдбар:
   Outfit 800 + жёлтая полоска (зеркало 15.1). Скоуп
   :has(nav a[href^="/app"]) отрезает admin-шелл и /login --- */
@media (max-width: 1023.98px) {
  #root header:has(nav a[href^="/app"]) [class*="text-lg"] {
    font-family: "Outfit", "Manrope", system-ui, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    color: var(--color-text) !important;
  }

  #root header:has(nav a[href^="/app"]) [class*="text-lg"]::after {
    content: "";
    display: block;
    width: 28px;
    height: 4px;
    margin-top: 3px;
    border-radius: 999px;
    background: var(--color-accent);
  }
}

/* --- 16.2 Тарифы, мобила: «Во всех тарифах» — ещё компактнее
   (поверх 8.8: меньше кегль/паддинги, 5 рядов пилюль → 2-3) --- */
@media (max-width: 639.98px) {
  #root section[class*="bg-dark-900/50"] > div[class*="mt-4"][class*="grid"] {
    gap: 6px !important;
    margin-top: 10px !important;
  }

  #root section[class*="bg-dark-900/50"] > div[class*="mt-4"][class*="grid"] > div[class*="bg-dark-950/60"] {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    padding: 5px 8px !important;
  }
}

/* --- 16.3 Тарифы, мобила: фикс «съехавшего квадрата». Флэттенер 8.8
   занулял border/background/padding бокса «Что входит», но НЕ
   box-shadow из секции 7 — сиротская тень рендерилась серым
   прямоугольником за карточкой --- */
@media (max-width: 639.98px) {
  #root div[class*="rounded-[28px]"] > div[class*="mt-6"][class*="p-5"] {
    box-shadow: none !important;
  }

  /* 16.3b PLUS-карточка: белая + жёлтая рамка (была #F5F5F4 — сливалась
     с серым фоном #F3F3F1). Класс ставит патч; без патча — прежний вид */
  #root div[class*="rounded-[28px]"].pv-tariff-popular {
    background: var(--color-card) !important;
  }
}

/* --- 16.4 ПК: моно-ссылки подписок (vless://, tg://) — тихие,
   а не жирный тёмный текст, перебивающий CTA (на мобиле URI
   скрыт секцией 14 — правило безвредно) --- */
#root [class*="font-mono"][class*="bg-dark-"][class*="break-all"],
#root section:has(a[href^="tg://proxy"]) .font-mono {
  background: #FAFAF8 !important;
  border-color: #ECECEA !important;
  color: #6F6F6C !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
}

/* --- 16.5 Поддержка: история сообщений с воздухом, пустое
   состояние = приветственный «входящий» пузырь (текст ставит патч;
   правила работают и со старым текстом — просто пузырь) --- */
#root section:has(#support-message) [style*="overflow-y"],
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl {
  min-height: 280px;
}

/* Пустую историю (без inline overflow-y) центрируем по вертикали */
#root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl:not([style*="overflow-y"]) {
  justify-content: center;
}

/* Бокс пустого состояния → входящий пузырь (поверх 12.8) */
#root section:has(#support-message) [class*="rounded-2xl"][class*="text-center"] {
  text-align: left !important;
  background: var(--color-card) !important;
  border: 1px solid #ECECEA !important;
  border-radius: 16px 16px 16px 6px !important;
  padding: 13px 14px !important;
  max-width: 85%;
  margin-right: auto;
  box-shadow: none !important;
}

#root section:has(#support-message) [class*="rounded-2xl"][class*="text-center"] > div:first-child {
  font-weight: 500 !important;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* --- 16.6 Чип статуса «Новый запрос» — тихий бейдж, а не
   псевдо-кнопка (success-вариант «Диалог активен» не матчится —
   остаётся зелёным из 8.9) --- */
#root section:has(#support-message) span[class*="rounded-full"][class*="border-accent-"] {
  background: #F6F6F5 !important;
  border: 1px solid #ECECEA !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px !important;
}

/* --- 16.7 Композер. ПК: однострочный ряд textarea+кнопки
   (перебивает min-height 136px из 12.9), Фото — квадрат-иконка.
   Мобильную раскладку 8.11 (textarea сверху, [Фото|Отправить]
   в ряд) не трогаем — только цвета кнопки --- */
@media (min-width: 1024px) {
  #root section:has(#support-message) form > div.flex {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }

  #root #support-message {
    flex: 1 1 auto !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    background: #FAFAF8 !important;
  }

  /* Кнопка Фото: 44×44, только иконка (подпись прячет бандл с sm:) */
  #root #support-message + button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  /* «Отправить» на ПК — иконка-самолётик 44×44 (карточка чата ~476px:
     текстовая кнопка душила textarea до 150px); aria-label ставит патч */
  #root #support-message + button + button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  #root #support-message + button + button span {
    display: none !important;
  }

  #root #support-message + button + button svg {
    height: 18px !important;
    width: 18px !important;
  }
}

/* «Отправить» — жёлтый CTA на всех ширинах; disabled — та же жёлтая
   с прозрачностью (вместо «вечно серой» плиты из 12.8) */
#root #support-message + button + button:not(:disabled) {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

#root #support-message + button + button:not(:disabled):hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-text) !important;
}

#root #support-message + button + button:disabled {
  background: var(--color-accent) !important;
  border-color: transparent !important;
  color: var(--color-text) !important;
  opacity: 0.55 !important;
}

/* --- 16.8 MTProxy-аккордеон. ВСЕ правила обусловлены классами
   pv-mt-* / pv-bot-cta от патча — без патча секция выглядит
   как раньше (fail-safe) --- */

/* Свёрнуто: warning и степы скрыты */
#root section.pv-mt-collapsible:not(.pv-mt-open) div[class*="border-warning-500"],
#root section.pv-mt-collapsible:not(.pv-mt-open) div[class*="mt-4"][class*="space-y-3"] {
  display: none !important;
}

/* Жёлтый полноширинный CTA «Открыть бота» (специфичность = 8.10,
   позже в файле — выигрывает у «нейтральных кнопок») */
#root section.pv-mt-collapsible a.pv-bot-cta[href] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 20px;
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 14px;
  color: var(--color-text) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

#root section.pv-mt-collapsible a.pv-bot-cta[href]:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* Строка-аккордеон с шевроном */
#root section.pv-mt-collapsible button.pv-mt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 12px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-text-soft) !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  min-height: 0 !important;
}

#root section.pv-mt-collapsible button.pv-mt-toggle:hover {
  background: transparent !important;
  color: var(--color-text) !important;
}

#root section.pv-mt-collapsible button.pv-mt-toggle::after {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

#root section.pv-mt-collapsible.pv-mt-open button.pv-mt-toggle::after {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* Раскрыто: warning сжат до строки-примечания */
#root section.pv-mt-collapsible.pv-mt-open div[class*="border-warning-500"] {
  padding: 8px 12px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* «Скопировать ссылку» — текстовая ссылка вместо второй кнопки */
#root section.pv-mt-collapsible div[class*="mt-3"][class*="sm:flex-row"] > button {
  width: auto !important;
  min-height: 0 !important;
  padding: 6px 0 !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-brand) !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#root section.pv-mt-collapsible div[class*="mt-3"][class*="sm:flex-row"] > button:hover {
  background: transparent !important;
  color: var(--color-text) !important;
}

/* Оригинальная ссылка «Открыть бота» в степе 2 скрыта — её роль
   выполняет pv-bot-cta наверху секции */
#root section.pv-mt-collapsible a[href="https://t.me/pagervpn_bot"]:not(.pv-bot-cta) {
  display: none !important;
}

/* --- 16.9 Поддержка, мобила: история ниже, чем на ПК --- */
@media (max-width: 639.98px) {
  #root section:has(#support-message) [style*="overflow-y"],
  #root section:has(#support-message) .mt-4.flex.flex-col.gap-1.rounded-2xl {
    min-height: 200px;
  }
}

/* --- 16.10 Обзор, мобила: CTA-плитки «Тарифы»+«Устройства» —
   2 компактные колонки вместо двух полноширинных рядов 8.4
   (главный контент — ключи — поднимается к фолду) --- */
@media (max-width: 639.98px) {
  #root div[class*="grid"]:has(a[href="/app/purchase"]):has(a[href="/app/devices"]) {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) > div[class*="flex"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) > div[class*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: 100% !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) h2,
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) h2 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }

  #root section[class*="rounded-3xl"]:has(a[href="/app/purchase"]) a[href="/app/purchase"],
  #root section[class*="rounded-3xl"]:has(a[href="/app/devices"]) a[href="/app/devices"] {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
  }
}

/* --- 16.11 Мобила 360: шапка карточки ключа в одну строку —
   заголовок с эллипсисом, бейдж «Активен» не падает на 2-ю строку.
   Скоуп article — заголовок чата («Чат с поддержкой» в section)
   и «Быстрое продление» (div) не задеты --- */
@media (max-width: 639.98px) {
  #root article div[class*="flex-wrap"][class*="items-center"][class*="gap-2"] {
    flex-wrap: nowrap !important;
  }

  #root article div[class*="flex-wrap"][class*="items-center"][class*="gap-2"] > :first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #root article div[class*="flex-wrap"][class*="items-center"][class*="gap-2"] > span {
    flex-shrink: 0 !important;
    padding: 4px 9px !important;
    font-size: 0.75rem !important;
  }
}

/* Узкие экраны: заголовок ключа 16px — «Ключ доступа #1» + бейдж
   влезают в ряд 222px без эллипсиса */
@media (max-width: 374.98px) {
  #root article div[class*="flex-wrap"][class*="items-center"][class*="gap-2"] > :first-child {
    font-size: 1rem !important;
  }
}

/* --- 16.12 Один жёлтый на экран Обзора: «Выбрать тариф» — графит
   (зеркало a[href="/app/devices"] из 8.2); жёлтым остаётся
   «Скопировать». [class*="bg-accent-500"] отрезает инлайн-ссылку
   «Перейдите к тарифам» на Устройствах --- */
#root section a[href="/app/purchase"][class*="bg-accent-500"] {
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  color: var(--color-text-inverse) !important;
}

#root section a[href="/app/purchase"][class*="bg-accent-500"] * {
  color: inherit !important;
}

#root section a[href="/app/purchase"][class*="bg-accent-500"]:hover {
  background: var(--color-brand-dark) !important;
  border-color: var(--color-brand-dark) !important;
  color: var(--color-text-inverse) !important;
}

/* --- 16.13 ПК/планшет: карточка «Telegram подключён» — белая,
   как остальные (8.1 красила в серый = выглядела disabled);
   мобилу уже делает белой 13.8 --- */
@media (min-width: 640px) {
  #root section[class*="border-success-500"][class*="bg-success-500"] {
    background: var(--color-card) !important;
    border: 1px solid #E9E9E5 !important;
    box-shadow: var(--pv-shadow-card) !important;
  }
}

/* --- 16.14 Тихие «Удалить» у устройств: ghost-серый, красный только
   на hover. СТРОГО /20 — у «Перевыпустить ключ» бордер /25,
   он остаётся красным якорем опасности --- */
#root article button[class*="border-error-500/20"][class*="bg-error-500/5"] {
  background: transparent !important;
  border: 1px solid #E6E6E3 !important;
  color: #7A7A76 !important;
  font-weight: 500 !important;
}

#root article button[class*="border-error-500/20"][class*="bg-error-500/5"]:hover {
  background: var(--color-danger-bg) !important;
  border-color: rgb(230 57 70 / 0.45) !important;
  color: var(--color-danger-text) !important;
}

/* --- 16.15 Тарифы: строка цены «от N ₽/мес» (вставляет патч из цен
   скрытых кнопок периодов — источник тот же, что у модалки) --- */
#root div[class*="rounded-[28px]"] .pv-price {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--color-text-muted);
}

#root div[class*="rounded-[28px]"] .pv-price b {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-text);
}

/* --- 16.15b Шапки страниц Обзор/Устройства (вставляет патч —
   h1/сабтайтл несут родные классы бандла, тут только отступ) --- */
#root main .pv-page-head {
  margin-bottom: 24px;
}

@media (max-width: 639.98px) {
  #root main .pv-page-head {
    margin-bottom: 16px;
  }
}

/* --- 16.16 Логин: мобильный бренд-локап + жёлтые кружки шагов.
   Всё обусловлено классами от патча (pv-login-brand, pv-steps) --- */

/* Бренд вставлен ПОСЛЕДНИМ ребёнком грида (insert первым сломал бы
   :first-child-правила 12.1/12.9 интро-карточки) — наверх его
   поднимает order:-1; на ПК скрыт (там бренд в интро-карточке) */
#root div[class*="max-w-5xl"] > .pv-login-brand {
  display: none;
  order: -1;
  padding: 6px 4px 0;
}

@media (max-width: 1023.98px) {
  #root div[class*="max-w-5xl"] > .pv-login-brand {
    display: block;
  }
}

#root .pv-login-brand .pv-lb-title {
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--color-text);
}

#root .pv-login-brand .pv-lb-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--color-accent);
}

#root .pv-login-brand .pv-lb-sub {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Жёлтые кружки-бейджи шагов 1-2-3: CSS-counter, только при .pv-steps
   (патч срезает «N.» из текста — двойной нумерации нет) */
#root div[class*="max-w-5xl"] div[class*="mt-8"][class*="grid"].pv-steps {
  counter-reset: pvstep;
}

#root div[class*="max-w-5xl"] .pv-steps > div[class*="rounded-2xl"] {
  counter-increment: pvstep;
}

#root div[class*="max-w-5xl"] .pv-steps > div[class*="rounded-2xl"] > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

#root div[class*="max-w-5xl"] .pv-steps > div[class*="rounded-2xl"] > div:first-child::before {
  content: counter(pvstep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}

/* ПК: степы сразу после интро-текста (margin-top:auto из 12.9 оставлял
   «дыру» ~90px в середине карточки) */
@media (min-width: 1024px) {
  #root div[class*="max-w-5xl"] > div[class*="rounded-3xl"]:first-child > div[class*="mt-8"] {
    margin-top: 28px !important;
    padding-top: 0 !important;
  }
}