/* ============================================================
   Safe22 — LEGACY ADAPTER (бывш. neo-theme)
   Часть дизайн-системы: скинит ЛЕГАСИ/JS-классы (.app-*, .lk-*,
   .sp-*, .legal-*, .btn-primary, .accordion-* и т.п.) в нейоморфизм,
   питаясь из ЕДИНОГО источника токенов (system/tokens.css).
   Подключается ПОСЛЕ style.css/app-layout.css/store-page.css.
   Сжимается по мере переписывания страниц на components.css.
   ============================================================ */
@import url('system/tokens.css?v=20260703a');

/* ---------- Легаси-имена переменных → единые токены ---------- */
html.neo {
  --bg-color:        var(--color-surface);
  --card-bg:         var(--color-surface);
  --soft-section-bg: var(--color-sunken);
  --primary-text:    var(--color-text-strong);
  --secondary-text:  var(--color-text);
  --muted-text:      var(--color-text-muted);   /* a11y: было #97a3b4 (не проходил WCAG) */
  --accent:          var(--color-accent);
  --accent-dark:     var(--color-accent-press);
  --accent-soft:     var(--color-accent-soft);
  --border-color:    var(--color-border);
  /* ВАЖНО: НЕ переопределять --radius-sm/md/lg здесь — легаси-имена
     совпадают с именами системных токенов, поэтому `--radius-md: var(--radius-md)`
     был ЦИКЛИЧЕСКИМ (невалиден на этапе вычисления) и border-radius схлопывался
     в 0 → острые углы у карточек/полей на всех легаси-страницах. Значения
     уже приходят из system/tokens.css (@import выше). Пилюли работали лишь
     потому, что --radius-pill тут не переопределялся. */

  /* нейоморфные тени → единые токены */
  --neo-bg:        var(--color-surface);
  --neo-light:     var(--c-shadow-light);
  --neo-dark:      var(--c-shadow-dark);
  --neo-dark-2:    var(--c-shadow-dark);
  --neo-accent:    var(--color-accent);
  --neo-accent-l:  var(--color-accent-hover);
  --neo-accent-d:  var(--color-accent-press);

  --neo-raised:     var(--shadow-raised);
  --neo-raised-sm:  var(--shadow-raised-sm);
  --neo-raised-lg:  var(--shadow-raised-lg);
  --neo-hover:      var(--shadow-hover);
  --neo-pressed:    var(--shadow-pressed);
  --neo-pressed-sm: var(--shadow-pressed-sm);
}

/* ---------- База ---------- */
html.neo body,
html.neo {
  background: var(--neo-bg) !important;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--primary-text);
}
html.neo ::selection { background: var(--neo-accent); color: #fff; }

html.neo ::-webkit-scrollbar { width: 12px; height: 12px; }
html.neo ::-webkit-scrollbar-track { background: var(--neo-bg); }
html.neo ::-webkit-scrollbar-thumb {
  border-radius: 999px; background: var(--neo-bg);
  box-shadow: var(--neo-pressed-sm); border: 3px solid var(--neo-bg);
}

/* ============================================================
   КНОПКИ
   ============================================================ */
/* Все кнопки — скруглённые «пилюли» на всех страницах (как на эталоне) */
html.neo .btn, html.neo .btn-primary, html.neo .btn-secondary, html.neo .btn-sm { border-radius: var(--radius-pill) !important; }

html.neo .btn,
html.neo .btn-secondary,
html.neo .copy-btn,
html.neo .lk-copy-btn,
html.neo .sp-tab,
html.neo .sp-filter,
html.neo .sp-modal-alt-btn,
html.neo .sp-modal-btn-close {
  background: var(--neo-bg) !important;
  color: var(--primary-text) !important;
  border: none !important;
  box-shadow: var(--neo-raised-sm) !important;
  transition: box-shadow .22s ease, transform .22s ease, color .22s ease !important;
}
html.neo .btn:hover,
html.neo .btn-secondary:hover,
html.neo .copy-btn:hover,
html.neo .lk-copy-btn:hover,
html.neo .sp-tab:hover,
html.neo .sp-filter:hover,
html.neo .sp-modal-alt-btn:hover {
  box-shadow: var(--neo-hover) !important;
  transform: translateY(-2px) !important;
  color: var(--neo-accent) !important;
}
html.neo .btn:active,
html.neo .btn-secondary:active,
html.neo .copy-btn:active,
html.neo .sp-tab:active {
  box-shadow: var(--neo-pressed-sm) !important;
  transform: translateY(0) !important;
}

/* Акцентные / активные — красная заливка */
html.neo .btn-primary,
html.neo .sp-card-btn,
html.neo .sp-modal-btn-store,
html.neo .thanks-btn,
html.neo .sp-tab.active,
html.neo .sp-filter.active,
html.neo .lk-subnav-btn.active {
  background: linear-gradient(145deg, var(--neo-accent-l), var(--neo-accent-d)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: -5px -5px 12px var(--neo-light), 6px 6px 14px var(--neo-dark),
              0 8px 18px rgba(255, 65, 54, 0.26) !important;
}
html.neo .btn-primary:hover,
html.neo .sp-card-btn:hover,
html.neo .sp-modal-btn-store:hover,
html.neo .thanks-btn:hover {
  transform: translateY(-2px) !important; color: #fff !important;
  box-shadow: -6px -6px 14px var(--neo-light), 7px 7px 16px var(--neo-dark),
              0 12px 24px rgba(255, 65, 54, 0.36) !important;
  opacity: 1 !important;
}
html.neo .btn-primary:active,
html.neo .sp-card-btn:active {
  transform: translateY(0) !important;
  box-shadow: inset 4px 4px 9px var(--neo-accent-d), inset -4px -4px 9px var(--neo-accent-l) !important;
}
html.neo .btn-disabled,
html.neo .btn:disabled,
html.neo button:disabled {
  box-shadow: var(--neo-pressed-sm) !important;
  background: var(--neo-bg) !important; color: var(--muted-text) !important;
  transform: none !important;
}

/* ============================================================
   ФОРМЫ / ИНПУТЫ
   ============================================================ */
html.neo .app-input,
html.neo .pa-input,
html.neo .link-input,
html.neo input[type="text"],
html.neo input[type="email"],
html.neo input[type="tel"],
html.neo input[type="number"],
html.neo input[type="password"],
html.neo input[type="search"],
html.neo select,
html.neo textarea {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-pressed-sm) !important;
  color: var(--primary-text) !important;
  border-radius: var(--radius-sm) !important;
  transition: box-shadow .2s ease !important;
}
html.neo .app-input:focus,
html.neo .pa-input:focus,
html.neo .link-input:focus,
html.neo input:focus,
html.neo select:focus,
html.neo textarea:focus {
  outline: none !important;
  box-shadow: var(--neo-pressed) !important;
}
html.neo .app-input::placeholder,
html.neo .pa-input::placeholder,
html.neo input::placeholder,
html.neo textarea::placeholder { color: var(--muted-text) !important; }

/* Состояния валидации */
html.neo .pa-input.is-valid,
html.neo input.is-valid { box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light), 0 0 0 2px rgba(16,185,129,.35) !important; }
html.neo .pa-input.is-invalid,
html.neo input.is-invalid { box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light), 0 0 0 2px rgba(255,65,54,.4) !important; }
html.neo .pa-field-error,
html.neo .pa-error { color: var(--neo-accent-d) !important; }

/* Чекбоксы аккуратно акцентим */
html.neo input[type="checkbox"],
html.neo input[type="radio"] { accent-color: var(--neo-accent) !important; }

/* Выпадающие подсказки email */
html.neo .email-suggestions {
  background: var(--neo-bg) !important; border: none !important;
  box-shadow: var(--neo-raised) !important; border-radius: var(--radius-sm) !important;
}
html.neo .email-suggestion-item.active,
html.neo .email-suggestion-item:hover { background: var(--soft-section-bg) !important; color: var(--neo-accent) !important; }

/* ============================================================
   ШАПКА (как на главной)
   ============================================================ */
html.neo .header {
  background: rgba(236, 240, 243, 0.78) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: none !important; box-shadow: none !important;
}
html.neo .logo {
  color: var(--primary-text) !important; font-weight: 700;
  padding: 10px 18px; border-radius: 999px;
  background: var(--neo-bg); box-shadow: var(--neo-raised-sm);
}
html.neo .logo::first-letter { color: var(--neo-accent); }
html.neo .site-header-nav,
html.neo .store-header-nav {
  background: var(--neo-bg); box-shadow: var(--neo-pressed-sm);
  border-radius: 999px; padding: 6px;
}
html.neo .site-header-link,
html.neo .store-header-link { color: var(--muted-text) !important; border-radius: 999px; }
html.neo .site-header-link:hover,
html.neo .store-header-link:hover { color: var(--primary-text) !important; background: transparent !important; }
html.neo .site-header-link--active,
html.neo .store-header-link--active {
  color: var(--neo-accent) !important; background: var(--neo-bg) !important; box-shadow: var(--neo-raised-sm) !important;
}
html.neo .header-btn { box-shadow: -5px -5px 12px var(--neo-light), 6px 6px 14px var(--neo-dark), 0 8px 18px rgba(255,65,54,.26) !important; }
/* Бургер удалён (Э3 2026-07-03, не имел уникальных пунктов). Мобильная шапка
   на ≤760px: только лого; навигация и «Войти/Кабинет» - в нижнем таб-баре. */
@media (max-width: 760px) {
  html.neo .site-header-nav,
  html.neo .store-header-nav,
  html.neo .header-btn,
  html.neo #headerAccountBtn { display: none !important; }
}

/* Баг точного тапа на Android/Chromium (Яндекс): без touch-action браузер
   ждёт двойной тап для зума → промахи. На Safari такого нет. Снимаем задержку
   и расширяем хит-зоны для всех интерактивных элементов (вкл. кабинет /app). */
html.neo a, html.neo button, html.neo [role="button"], html.neo label,
html.neo .lk-nav-item, html.neo .lk-tab, html.neo .lk-subnav-btn,
html.neo .bottom-nav__item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Футер — единый компонент js/footer.js (один источник на весь сайт). */

/* ============================================================
   КАРТОЧКИ / ПАНЕЛИ (выпуклые)
   ============================================================ */
html.neo .app-card,
html.neo .lk-card,
html.neo .access-card,
html.neo .store-card,
html.neo .sp-card,
html.neo .thanks-card,
html.neo .rec-card,
html.neo .dashboard-metric-card,
html.neo .dashboard-service-card,
html.neo .dashboard-install-card,
html.neo .dashboard-instructions-card,
html.neo .dashboard-steps-card,
html.neo .safe22-modal,
html.neo .sp-modal,
html.neo .faq-container > *,
html.neo .legal-page .highlight {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-raised) !important;
  border-radius: var(--radius-lg) !important;
}
html.neo .sp-card:hover,
html.neo .store-card:hover,
html.neo .rec-card:hover { box-shadow: var(--neo-hover) !important; transform: translateY(-4px) !important; border: none !important; }

/* Вдавленные подложки (поля внутри карточек) */
html.neo .detail-row,
html.neo .lk-copy-row,
html.neo .lk-partner-stat,
html.neo .metric-tile,
html.neo .lk-subnav,
html.neo .pm-method-btn,
html.neo .dashboard-link-box,
html.neo .empty-state,
html.neo .sp-card-img,
html.neo .access-details .detail-row {
  background: var(--neo-bg) !important;
  border: none !important;
  box-shadow: var(--neo-pressed-sm) !important;
}
html.neo .metric-tile--accent { box-shadow: var(--neo-pressed-sm), inset 0 0 0 2px rgba(255,65,54,.18) !important; }
html.neo .pm-method-btn:hover { box-shadow: var(--neo-raised-sm) !important; }
html.neo .pm-method-icon { background: var(--neo-bg) !important; box-shadow: var(--neo-raised-sm) !important; }

/* Иконочные кружки (вдавленные колодцы) */
html.neo .accordion-icon,
html.neo .lk-sidebar-avatar,
html.neo .lk-more-sheet-icon,
html.neo .inst-step-num,
html.neo .rec-card-icon { background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important; color: var(--neo-accent) !important; }

/* ТЁМНЫЕ карточки → светлый нейоморфизм */
html.neo .dashboard-summary-card,
html.neo .inst-device-strip,
html.neo .app-card.dashboard-summary-card {
  background: var(--neo-bg) !important;
  color: var(--primary-text) !important;
  border: none !important;
  box-shadow: var(--neo-raised-lg) !important;
}
html.neo .dashboard-summary-card h1,
html.neo .dashboard-summary-card h2,
html.neo .dashboard-summary-card h3,
html.neo .dashboard-summary-card p,
html.neo .dashboard-summary-card span,
html.neo .dashboard-summary-card div,
html.neo .dashboard-summary-card .dashboard-main-title,
html.neo .inst-device-strip,
html.neo .inst-device-strip * {
  color: var(--primary-text) !important;
}
html.neo .dashboard-summary-card .pa-hero-label,
html.neo .dashboard-summary-card .dashboard-metric-value--ok { color: var(--neo-accent) !important; }

/* ============================================================
   АККОРДЕОН
   ============================================================ */
html.neo .accordion-item { background: var(--neo-bg) !important; border: none !important; box-shadow: var(--neo-raised-sm) !important; border-radius: var(--radius-md) !important; }
html.neo .accordion-item.active { box-shadow: var(--neo-pressed) !important; }
html.neo .accordion-header { color: var(--primary-text) !important; }
html.neo .accordion-item.active .accordion-icon { background: var(--neo-bg) !important; box-shadow: var(--neo-raised-sm) !important; color: var(--neo-accent) !important; transform: rotate(180deg); }

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
html.neo .data-table,
html.neo .camp-table { border: none !important; }
html.neo .data-table th { color: var(--muted-text) !important; border-bottom: 1px solid var(--border-color) !important; }
html.neo .data-table td { border-bottom: 1px solid var(--border-color) !important; color: var(--primary-text) !important; }
html.neo .client-card-mob,
html.neo .camp-card-mob { background: var(--neo-bg) !important; border: none !important; box-shadow: var(--neo-raised-sm) !important; border-radius: var(--radius-md) !important; }

/* ============================================================
   БЕЙДЖИ / ПИЛЮЛИ / СТАТУСЫ
   ============================================================ */
html.neo .section-badge,
html.neo .pa-hero-label,
html.neo .rec-section-title,
html.neo .sp-hero-label {
  display: inline-flex !important; width: auto !important; align-items: center;
  background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important;
  color: var(--neo-accent) !important; border: none !important; border-radius: 999px;
  padding: 7px 16px !important;
}
html.neo .lk-status-pill,
html.neo .pa-badge,
html.neo .partner-badge,
html.neo .status-active, html.neo .status-linked,
html.neo .status-pending, html.neo .status-unlinked,
html.neo .rec-badge-soon, html.neo .rec-badge-new,
html.neo .lk-sidebar-logo-tag {
  border: none !important; box-shadow: var(--neo-pressed-sm) !important;
  background: var(--neo-bg) !important;
}
html.neo .lk-status-pill--active, html.neo .status-active, html.neo .status-linked, html.neo .pa-badge--ok { color: var(--color-accent-press) !important; }
html.neo .lk-status-pill--warning, html.neo .status-pending, html.neo .pa-badge--pending { color: #d97706 !important; }
html.neo .lk-status-pill--inactive, html.neo .status-unlinked { color: var(--muted-text) !important; }
html.neo .pa-badge--rejected { color: var(--neo-accent-d) !important; }
html.neo .lk-sidebar-logo-tag { color: var(--neo-accent) !important; }

/* Прогресс-бар экспирации */
html.neo .expiry-bar-track { background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important; height: 10px !important; border-radius: 999px; overflow: hidden; }
html.neo .expiry-bar-fill--ok { background: linear-gradient(90deg, var(--neo-accent-l), var(--neo-accent)) !important; }

/* ============================================================
   КАБИНЕТ: сайдбар / навигация / таб-бар
   ============================================================ */
html.neo .lk-sidebar,
html.neo .lk-topbar { background: var(--neo-bg) !important; border: none !important; box-shadow: 4px 0 16px rgba(163,177,198,.25) !important; }
html.neo .lk-nav-item { color: var(--secondary-text) !important; border-radius: 12px; }
html.neo .lk-nav-item:hover { background: var(--neo-bg) !important; box-shadow: var(--neo-raised-sm) !important; color: var(--primary-text) !important; }
html.neo .lk-nav-item.active { background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important; color: var(--neo-accent) !important; }
html.neo .lk-nav-item.active .lk-nav-icon { color: var(--neo-accent) !important; }
html.neo .lk-nav-sub-item:active,
html.neo .lk-nav-sub-item.active { color: var(--neo-accent) !important; }
html.neo .lk-sidebar-logout:hover { color: var(--neo-accent) !important; }

html.neo .lk-tabbar { background: var(--neo-bg) !important; border-top: none !important; box-shadow: 0 -6px 16px rgba(163,177,198,.3) !important; }
html.neo .lk-tab { color: var(--muted-text) !important; }
html.neo .lk-tab.active { color: var(--neo-accent) !important; }
html.neo .lk-tab.active .lk-tab-dot { background: var(--neo-accent) !important; }
html.neo .lk-subnav { background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important; }
html.neo .lk-subnav-btn { color: var(--secondary-text) !important; }
html.neo .lk-more-sheet { background: var(--neo-bg) !important; box-shadow: var(--neo-raised-lg) !important; }
html.neo .lk-more-sheet-handle { background: var(--neo-dark) !important; }

/* ============================================================
   МОДАЛКИ / ОВЕРЛЕИ
   ============================================================ */
html.neo .safe22-modal,
html.neo .sp-modal { box-shadow: var(--neo-raised-lg) !important; }
html.neo .sp-modal-btn-close:hover { color: var(--primary-text) !important; box-shadow: var(--neo-hover) !important; }

/* ============================================================
   МАГАЗИН
   ============================================================ */
html.neo .sp-hero-title,
html.neo .sp-card-denom { color: var(--primary-text) !important; }
html.neo .sp-card-price { color: var(--neo-accent) !important; font-weight: 600 !important; }
html.neo .sp-card-img { box-shadow: var(--neo-pressed-sm) !important; border-radius: var(--radius-md) !important; }
html.neo .sp-card-body { padding: 16px 18px !important; }

/* ============================================================
   ЮРИДИЧЕСКИЕ / ПРОЗА
   ============================================================ */
html.neo .legal-title,
html.neo .legal-page h1, html.neo .legal-content h1,
html.neo .light-title { color: var(--primary-text) !important; }
html.neo .legal-page h2, html.neo .legal-text h2 { border-bottom: 1px solid var(--border-color) !important; color: var(--primary-text) !important; }
html.neo .legal-text, html.neo .legal-page p, html.neo .legal-text p, html.neo .light-desc { color: var(--secondary-text) !important; }
html.neo .legal-page .highlight { border-left: 4px solid var(--neo-accent) !important; box-shadow: var(--neo-pressed-sm) !important; }

/* support.html: перекрываем инлайновые карточки */
html.neo main.section > div[style],
html.neo .container.section > div[style] {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-raised) !important;
  border-radius: var(--radius-lg) !important;
}

/* thanks.html: хардкод-цвета */
html.neo .thanks-card { background: var(--neo-bg) !important; box-shadow: var(--neo-raised-lg) !important; }
html.neo .thanks-icon { background: var(--neo-bg) !important; box-shadow: var(--neo-pressed-sm) !important; color: var(--neo-accent) !important; }
html.neo .thanks-title { color: var(--primary-text) !important; }
html.neo .thanks-text, html.neo .thanks-note { color: var(--secondary-text) !important; }

/* recommendations.html */
html.neo .rec-cta { background: var(--neo-bg) !important; border-top: none !important; }
html.neo .rec-card:hover { border: none !important; }
html.neo .rec-badge-new { color: #15803d !important; }
html.neo .rec-badge-soon { color: var(--muted-text) !important; }

/* Ссылки общего вида */
html.neo a { color: inherit; }
html.neo .legal-text a,
html.neo a.text-link { color: var(--neo-accent) !important; }

/* ============================================================
   QA-фиксы (после adversarial-ревью)
   ============================================================ */
/* support.html — email/контактные ссылки были синие #0071e3 */
html.neo a[href^="mailto:"],
html.neo .container.section a:not(.btn) { color: var(--neo-accent) !important; }

/* recommendations.html — убрать жёсткий бордюр карточек во всех состояниях */
html.neo .rec-card,
html.neo .rec-card:hover,
html.neo .rec-card--soon { border: none !important; }

/* store — плашки/карточки/подложки строго без бордюров, на тенях */
html.neo .sp-tab, html.neo .sp-filter,
html.neo .sp-card, html.neo .sp-modal-alt-btn { border: none !important; }
html.neo .sp-card-img,
html.neo .sp-card-placeholder { background: var(--neo-bg) !important; }

/* email-подсказки на connect — ховер в красный, не teal */
html.neo .email-suggestion-item:hover,
html.neo .email-suggestion-item.active { background: rgba(255,65,54,.10) !important; color: var(--neo-accent-d) !important; }