/*
 * =========================================================
 *  MOBILE APP LAYER — ЕТЛ Сайт
 *  Версия: v20260319j
 * =========================================================
 */

/* ============================================================
   0. УБРАТЬ ЛИШНИЙ PADDING НА HERO (72px от floating nav → 20px)
   ============================================================ */

@media (max-width: 1099px) {
  /* nav_dark_monolith.css добавляет 72px padding-top на hero для floating бургера.
     Наш бургер занимает только 64px (фиксированный хедер), поэтому 72px = лишние ~52px пустого места. */
  body#top.etl-monolith-nav-ready.index-page #hero > .container.hero-grid,
  body#top.etl-monolith-nav-ready.index-page #hero > .container {
    padding-top: 20px !important;
    padding-left: 16px !important;
  }

  body#top.etl-monolith-nav-ready.service-page .svc-hero > .container,
  body#top.etl-monolith-nav-ready.service-page .svc-hero .svc-hero-inner,
  body#top.etl-monolith-nav-ready.simple-service-page .page-head .container,
  body#top.etl-monolith-nav-ready.warehouse-service-page .page-head,
  body#top.etl-monolith-nav-ready .page-head .container {
    padding-top: 20px !important;
    padding-left: 16px !important;
  }
}

/* ============================================================
   1. МОБИЛЬНОЕ МЕНЮ — .sidebar.etl-sidebar, full-screen, анимация сверху вниз
   ============================================================ */

@media (max-width: 1099px) {

  /* Полноэкранное меню под хедером */
  body#top .sidebar.etl-sidebar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #d7dde4 !important;
    transform: translateY(0) !important;
    transition: transform 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 7004 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body#top .sidebar.etl-sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body#top .sidebar.etl-sidebar::before {
    content: none !important;
    display: none !important;
  }

  /* Закрытое состояние — уходит вверх */
  body#top .sidebar.etl-sidebar.close {
    transform: translateY(-110%) !important;
  }

  /* Шапка меню: логотип + кнопка закрыть */
  body#top .sidebar.etl-sidebar .etl-sidebar-topgap {
    display: none !important;
  }

  body#top .sidebar.etl-sidebar .etl-sidebar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px !important;
    border-bottom: 1px solid rgba(17, 20, 24, .12) !important;
    flex-shrink: 0 !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .etl-sidebar-brand {
    border-bottom-color: rgba(255,255,255,.08) !important;
  }

  body#top .sidebar.etl-sidebar .etl-sidebar-brand__link {
    display: flex !important;
    align-items: center !important;
  }

  /* Кнопка × закрыть — инжектится JS, класс .etl-mob-close */
  body#top .etl-mob-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.06) !important;
    border: none !important;
    cursor: pointer !important;
    color: rgba(16,18,20,.7) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body#top .etl-mob-close:active {
    background: rgba(229,38,41,.12) !important;
    color: #E52629 !important;
    transform: scale(0.92) !important;
  }

  html[data-theme="dark"] body#top .etl-mob-close {
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.7) !important;
  }

  /* Список ссылок — прокручиваемая зона */
  body#top .sidebar.etl-sidebar .nav-links {
    flex: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 8px 0 12px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body#top .sidebar.etl-sidebar .nav-links::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Пункт меню — правильный display block (НЕ flex, чтобы дропдаун работал) */
  body#top .sidebar.etl-sidebar .nav-links li {
    display: block !important;
    min-height: 0 !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-item {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li > a,
  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link {
    flex: 1 !important;
    min-height: 54px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 8px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    -webkit-tap-highlight-color: transparent !important;
    /* светлый режим: тёмный текст на светлом фоне #d7dde4 */
    color: rgba(18, 29, 46, 0.88) !important;
  }

  /* .link_name внутри ссылок — тот же цвет */
  body#top .sidebar.etl-sidebar .nav-links li a .link_name,
  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link .link_name {
    color: inherit !important;
  }

  /* Иконки в светлом режиме */
  body#top .sidebar.etl-sidebar .nav-links li a i:not(.arrow),
  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link i:not(.arrow) {
    color: rgba(18, 29, 46, 0.6) !important;
  }

  /* Sub-menu ссылки в светлом режиме */
  body#top .sidebar.etl-sidebar .nav-links li .sub-menu a {
    color: rgba(18, 29, 46, 0.72) !important;
  }

  /* Иконки в ссылках */
  body#top .sidebar.etl-sidebar .nav-links li a i:not(.arrow),
  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link i:not(.arrow) {
    font-size: 20px !important;
    width: 28px !important;
    min-width: 28px !important;
    text-align: center !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-toggle {
    min-width: 48px !important;
    width: 48px !important;
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(16,18,20,.5) !important;
    cursor: pointer !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li i.arrow {
    min-width: 48px !important;
    font-size: 18px !important;
    text-align: center !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.22s ease !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li.showMenu .etl-menu-toggle i.arrow {
    transform: rotate(180deg) !important;
    color: #E52629 !important;
  }

  /* Tap-feedback на ссылках */
  body#top .sidebar.etl-sidebar .nav-links li > a:active,
  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link:active {
    background: rgba(229,38,41,.07) !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li .etl-menu-toggle:active {
    background: rgba(229,38,41,.1) !important;
    color: #E52629 !important;
  }

  /* Подменю */
  body#top .sidebar.etl-sidebar .nav-links li .sub-menu {
    display: none !important;
    padding: 4px 0 8px 56px !important;
    background: rgba(28, 34, 42, .06) !important;
    margin: 0 !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu {
    background: rgba(255,255,255,.04) !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li.showMenu .sub-menu {
    display: block !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li .sub-menu a {
    min-height: 42px !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(16,18,20,.7) !important;
    white-space: normal !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body#top .sidebar.etl-sidebar .nav-links li .sub-menu a:active {
    color: #E52629 !important;
    background: rgba(229,38,41,.06) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu a {
    color: rgba(255,255,255,.65) !important;
  }

  /* Скрыть дублирующий .link_name внутри sub-menu */
  body#top .sidebar.etl-sidebar .nav-links li .sub-menu .link_name {
    display: none !important;
  }

  /* Нижняя панель: «Получить расчёт» + «Личный кабинет» */
  body#top .sidebar.etl-sidebar .etl-sidebar-bottom {
    flex-shrink: 0 !important;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
    background: linear-gradient(180deg, rgba(215,221,228,0), rgba(215,221,228,.74) 18%, rgba(215,221,228,.97)) !important;
    border-top: 1px solid rgba(17, 20, 24, .10) !important;
  }

  /* Кнопка-телефон (инжектится JS) */
  body#top .etl-mob-phone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    width: 100% !important;
    background: #E52629 !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    -webkit-tap-highlight-color: transparent !important;
    letter-spacing: 0.01em !important;
  }

  body#top .etl-mob-phone:active {
    background: #c81f22 !important;
    transform: scale(0.98) !important;
  }

  body#top .etl-sidebar-btn {
    min-height: 50px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }

  body#top .etl-sidebar-btn--primary {
    background: #E52629 !important;
    color: #fff !important;
    min-height: 52px !important;
  }

  body#top .etl-sidebar-btn--primary:active {
    background: #c81f22 !important;
    transform: scale(0.98) !important;
  }

  body#top .etl-sidebar-btn--ghost {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(17,20,24,.10) !important;
    color: rgba(18,29,46,.92) !important;
  }

  body#top .etl-sidebar-btn--ghost:active {
    background: rgba(0,0,0,.06) !important;
  }

  /* Overlay за меню */
  body#top .etl-sidebar-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(12,16,22,.08) !important;
    top: 0 !important;
    z-index: 7003 !important;
  }

  body#top.menu-open::before,
  body#top.etl-sidebar-open::before {
    content: none !important;
    display: none !important;
  }

  /* ── Верхняя стрелка меню ── */
  body#top .etl-sidebar-button {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100vw !important;
    width: 100vw !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: 7005 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transform: none !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box,
  body#top .etl-sidebar-button .etl-sidebar-button__label {
    display: inline-block !important;
    color: #14171c !important;
    line-height: 1 !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    animation: etl-menu-arrow-bounce 2.6s ease-in-out infinite !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    color: currentColor !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }

  body#top .etl-sidebar-button:hover .etl-sidebar-button__box {
    animation: etl-menu-arrow-bounce 2.4s infinite;
  }

  /* Открытое состояние — верхняя/нижняя span в X */
  body#top.etl-sidebar-open .etl-sidebar-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Логотип — чуть правее от бургера */
  body#top .etl-floating-logo {
    top: 14px !important;
    left: 62px !important;
  }

  body#top .etl-floating-logo img,
  body#top .etl-floating-logo svg {
    height: 36px !important;
  }
}

/* ============================================================
   2. ФУТЕР — минимальная мобильная версия
   ============================================================ */

@media (max-width: 768px) {

  /* Скрыть колонку «Разделы» (sitemap) — через уникальный класс .footer-links--sitemap */
  body#top footer .footer-links--sitemap,
  body#top footer .footer-col:has(.footer-links--sitemap) {
    display: none !important;
  }

  /* Скрыть описание «Единая Транспортная Логистика...» рядом с логотипом */
  body#top footer .footer-col:first-child > p.footer-text {
    display: none !important;
  }

  /* Социальные иконки — горизонтальный ряд круглых кнопок */
  body#top footer .footer-social {
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body#top footer .footer-social__link {
    flex-direction: column !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }

  /* Скрыть текстовые подписи (Telegram, ВКонтакте, WhatsApp) */
  body#top footer .footer-social__link > span:not(.footer-social__icon) {
    display: none !important;
  }

  /* Скрыть ОГРН/ИНН */
  body#top footer .footer-company-ids {
    display: none !important;
  }

  /* Скрыть «Ответ в рабочее время» */
  body#top footer .footer-note {
    display: none !important;
  }

  /* Скрыть города присутствия */
  body#top footer .footer-city-links {
    display: none !important;
  }

  /* Скрыть заголовки колонок */
  body#top footer .footer-h {
    display: none !important;
  }

  /* Скрыть адрес и часы работы в контактах */
  body#top footer .footer-main-city,
  body#top footer .footer-links--contacts > .footer-text {
    display: none !important;
  }

  /* Телефон — большая кнопка (нейтральная, без красного) */
  body#top footer .footer-links--contacts > a[href^="tel:"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    background: rgba(18, 29, 46, 0.88) !important;
    color: #fff !important;
    border-radius: 14px !important;
    font-family: var(--p-font, 'Instrument Sans', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 0 16px !important;
    margin: 0 0 8px !important;
    letter-spacing: .01em !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
    -webkit-tap-highlight-color: rgba(0,0,0,.15) !important;
  }

  /* Email — небольшая ссылка */
  body#top footer .footer-links--contacts > a[href^="mailto:"] {
    font-size: 14px !important;
    color: rgba(29,29,27,.65) !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  html[data-theme="dark"] body#top footer .footer-links--contacts > a[href^="mailto:"] {
    color: rgba(255,255,255,.5) !important;
  }

  /* Footer-bottom — одна строка, по центру */
  body#top footer .footer-bottom {
    margin-top: 14px !important;
    padding-top: 12px !important;
    font-size: 12px !important;
    gap: 5px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* «Все права защищены» — скрыть (остаётся © и ссылка на политику) */
  body#top footer .footer-bottom > span:nth-child(3) {
    display: none !important;
  }
  body#top footer .footer-dot {
    display: none !important;
  }

  /* Компактный layout */
  body#top footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body#top footer {
    padding-top: 20px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   3. HERO — убрать лишнее пространство, app-стиль
   ============================================================ */

@media (max-width: 768px) {

  /* Уменьшить padding в hero-grid на мобайл */
  .hero-premium .hero-grid {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
    gap: 20px !important;
  }

  /* Убрать огромный min-height который создаёт пустоту */
  .hero-premium {
    min-height: auto !important;
  }

  /* Ограничить высоту грузовика */
  .hero-visual {
    min-height: auto !important;
    max-height: 200px !important;
    overflow: hidden !important;
    margin-top: 0 !important;
  }

  .hero-visual .hero-truck {
    width: min(380px, 92%) !important;
    margin: 0 auto !important;
  }
}

/* На самых маленьких экранах — скрыть грузовик */
@media (max-width: 480px) {
  .hero-visual {
    display: none !important;
  }
}

/* ============================================================
   4. ОБЩИЕ МОБИЛЬНЫЕ УЛУЧШЕНИЯ
   ============================================================ */

@media (max-width: 768px) {

  /* Sticky CTA: убрать текст, только 2 кнопки в ряд */
  .etl-sticky-cta__text {
    display: none !important;
  }

  .etl-sticky-cta {
    flex-direction: row !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 18px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(calc(100% + 16px)) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  .etl-sticky-cta.is-visible {
    transform: translateY(0) !important;
  }

  .etl-sticky-cta__actions {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .etl-sticky-cta__btn,
  .etl-sticky-cta__phone {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Stats: 2×2 на мобайл */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 14px 10px !important;
  }

  .stat-number {
    font-size: 26px !important;
  }

  .stat-label {
    font-size: 12px !important;
  }

  /* Bento-карточки — одна колонка */
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .bento-card {
    padding: 16px 14px !important;
  }

  /* h1 заголовок hero — чуть меньше на мобайл */
  .hero-content h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin-bottom: 12px !important;
  }

  .hero-subtitle {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* hero-points теги — компактнее */
  .hero-point {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  .hero-actions {
    margin-top: 16px !important;
    margin-bottom: 14px !important;
  }
}

/* ============================================================
   5. SAFE-AREA INSETS (iPhone с «чёлкой» / Dynamic Island)
   ============================================================ */

@media (max-width: 1099px) {
  body#top .p-mobile-menu {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body#top .p-mobile-footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }
}

/* ============================================================
   6. СЕРВИСНЫЕ СТРАНИЦЫ (sea, avia, rail, auto, ftl, multi...)
      Переопределяем инлайн-стили через !important
   ============================================================ */

@media (max-width: 768px) {

  /* Hero — уменьшить padding, название компактнее */
  .svc-hero-inner {
    padding: 20px 16px !important;
  }

  .svc-title {
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
  }

  /* KPI-карточки: 2×2 на планшете */
  .svc-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Секции сервисной страницы — меньший padding */
  .svc-section {
    padding: 16px 0 !important;
  }

  /* Процессные шаги — уже 1-column от 980px, просто уменьшим padding */
  .svc-process > * {
    padding: 14px 12px !important;
  }

  /* Split-блоки без фиксированного минимума */
  .svc-split {
    grid-template-columns: 1fr !important;
  }

  /* Карточки сервисов */
  .svc-card {
    padding: 14px 12px !important;
  }

  /* Изображение hero не должно вылезать за экран */
  .svc-hero img,
  .svc-hero-img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {

  /* KPI: 1 колонка на очень маленьких экранах */
  .svc-kpis {
    grid-template-columns: 1fr !important;
  }

  .svc-hero-inner {
    padding: 14px 12px !important;
  }

  .svc-title {
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }
}

/* ============================================================
   7. ТАБЛИЦЫ — scroll UX + sticky header для pricing
   ============================================================ */

@media (max-width: 768px) {

  /* Обёртки для скролла — визуальный fade-индикатор */
  body#top .schedule-table-wrap,
  body#top .pricing-table-wrap,
  body#top .table-wrap,
  body#top .table-scroll,
  body#top .table-responsive,
  body#top div[style*="overflow:auto"],
  body#top div[style*="overflow: auto"] {
    position: relative !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Scroll shadow: указывает что есть содержимое справа */
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)) 0 0,
      linear-gradient(to left,  white 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0   50%, rgba(0,0,0,.10), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  html[data-theme="dark"] body#top .schedule-table-wrap,
  html[data-theme="dark"] body#top .pricing-table-wrap,
  html[data-theme="dark"] body#top .table-wrap,
  html[data-theme="dark"] body#top div[style*="overflow:auto"] {
    background:
      linear-gradient(to right, #101010 30%, rgba(16,16,16,0)) 0 0,
      linear-gradient(to left,  #101010 30%, rgba(16,16,16,0)) 100% 0,
      radial-gradient(farthest-side at 0   50%, rgba(255,255,255,.08), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.08), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Sticky заголовки у pricing-таблиц */
  body#top .price-table thead th,
  body#top .data-table thead th,
  body#top table.table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.08) !important;
  }

  html[data-theme="dark"] body#top .price-table thead th,
  html[data-theme="dark"] body#top .data-table thead th {
    background: #1a1a1a !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) !important;
  }

  /* Шрифт в таблицах чуть меньше для умещения в экран */
  body#top .price-table td,
  body#top .price-table th,
  body#top .data-table td,
  body#top .data-table th {
    font-size: 12px !important;
    padding: 8px 8px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   8. СТРАНИЦА ДОКУМЕНТОВ
   ============================================================ */

@media (max-width: 768px) {

  /* Быстрый доступ: 2 колонки вместо 4 (уже есть в src, здесь усиливаем) */
  .docs-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Hero документов — одна колонка */
  .docs-hero {
    grid-template-columns: 1fr !important;
  }

  /* Поиск по документам */
  .docs-search {
    height: 48px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {

  /* На совсем маленьких — 1 колонка */
  .docs-quick {
    grid-template-columns: 1fr !important;
  }

  /* Краткое описание категорий */
  .docs-scenarios,
  .docs-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   9. ФОРМЫ — метки и поля
   ============================================================ */

@media (max-width: 768px) {

  /* Метки форм: минимум 13px, без uppercase для читаемости */
  body#top .rq-label,
  body#top label {
    font-size: 13px !important;
    letter-spacing: .01em !important;
  }

  /* Инпуты: минимальный тач-таргет */
  body#top input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  body#top select,
  body#top textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* iOS Safari: предотвращает авто-зум */
  }

  /* Выпадающий список городов — ограничить высоту */
  body#top .calc-city-dd {
    max-height: 180px !important;
  }

  /* Прогресс-бар заявки */
  body#top .rq-progress {
    width: 100% !important;
    max-width: 140px !important;
  }
}

/* ============================================================
   10. СТРАНИЦА SCHEDULE.HTML — более читаемая таблица
   ============================================================ */

@media (max-width: 768px) {

  /* Заголовок расписания */
  .sc-wrap {
    padding: 20px 12px 40px !important;
  }

  /* Фильтры расписания — компактнее */
  .sc-filters {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .sc-filter-group {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
  }
}

/* ============================================================
   11. СТРАНИЦА FAQ
   ============================================================ */

@media (max-width: 768px) {

  /* Аккордеон — увеличить тач-таргет */
  .svc-faq-item summary,
  .faq-item summary,
  details summary {
    padding: 18px 16px !important;
    min-height: 54px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* FAQ поиск */
  .faq-search,
  .search-input {
    height: 50px !important;
    font-size: 16px !important;
  }
}

/* ============================================================
   12. СТРАНИЦА УСЛУГ (services.html) — маршруты и карточки
   ============================================================ */

@media (max-width: 768px) {

  /* Быстрая навигация */
  .svc-quicknav {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .svc-quicknav a {
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  /* Карточки сетки */
  .svc-grid,
  .svc-grid2,
  .svc-grid3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Высота изображения карточки */
  .svc-card-img,
  .svc-card-cover {
    height: 110px !important;
  }
}

/* ============================================================
   13. СТРАНИЦА КОНТАКТЫ
   ============================================================ */

@media (max-width: 768px) {

  /* Контактная сетка */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Карточки офисов */
  .contact-subcard h4 {
    font-size: 14px !important;
  }

  .contact-subcard ul,
  .contact-subcard p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Присутствие: 1 колонка */
  .presence-grid {
    grid-template-columns: 1fr !important;
  }

  /* Карта — фиксированная высота меньше */
  .contact-map,
  iframe[src*="maps"] {
    height: 220px !important;
  }
}

/* ============================================================
   РАЗДЕЛ 14: Touch / Active states (тач-фидбек)
   ============================================================ */
@media (max-width: 1099px) {
  /* Кнопки */
  body#top .p-btn-primary:active,
  body#top a.p-btn-primary:active,
  body#top button.p-btn-primary:active {
    transform: scale(0.97) !important;
    opacity: 0.88 !important;
    transition: transform 0.08s, opacity 0.08s !important;
  }

  body#top .p-mobile-phone:active {
    background: rgba(229,38,41,.28) !important;
    transform: scale(0.97) !important;
    transition: transform 0.08s, background 0.08s !important;
  }

  /* Ссылки меню */
  body#top .p-mobile-nav a:active {
    background: rgba(229,38,41,.12) !important;
    color: #ff6568 !important;
    transition: background 0.08s !important;
  }

  /* Карточки — любой кликабельный блок */
  body#top a.bento-card:active,
  body#top a.service-card:active,
  body#top a.svc-route-card:active,
  body#top a.etl-card:active {
    transform: scale(0.98) !important;
    opacity: 0.85 !important;
    transition: transform 0.1s, opacity 0.1s !important;
  }

  /* Footer links */
  body#top .footer-col a:active {
    opacity: 0.6 !important;
    transition: opacity 0.08s !important;
  }

  /* Sticky CTA */
  body#top .etl-sticky-cta a:active,
  body#top .etl-sticky-cta button:active {
    transform: scale(0.96) !important;
    transition: transform 0.08s !important;
  }
}

/* ============================================================
   РАЗДЕЛ 15: prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Убираем все CSS-анимации и переходы */
  body#top .p-mobile-menu {
    transition: none !important;
  }

  body#top #p-header.p-header {
    transition: none !important;
  }

  body#top .etl-sticky-cta {
    animation: none !important;
    transition: none !important;
  }

  /* Системные анимации сайта */
  body#top *,
  body#top *::before,
  body#top *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   РАЗДЕЛ 16: Scroll-hide header (скрытие хедера при скролле вниз)
   ============================================================ */
@media (max-width: 1099px) {
  body#top #p-header.p-header {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
  }

  body#top #p-header.p-header.is-hidden {
    transform: translateY(-100%) !important;
  }

  /* Когда меню открыто — хедер всегда виден */
  body#top.menu-open #p-header.p-header.is-hidden {
    transform: translateY(0) !important;
  }
}

/* ============================================================
   РАЗДЕЛ 17: Mobile conflict fixes for existing monolith nav
   ============================================================ */
@media (max-width: 1099px) {
  body#top {
    padding-top: 0 !important;
    overflow-x: clip !important;
  }

  html body#top > header#p-header.p-header .p-logo,
  html body#top > header#p-header.p-header.is-scrolled .p-logo,
  body#top #p-header.p-header .p-logo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body#top > header#p-header.p-header .p-logo img,
  html body#top > header#p-header.p-header.is-scrolled .p-logo img,
  body#top #p-header.p-header .p-logo img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body#top .etl-floating-logo,
  body#top .etl-mobile-corner-logo,
  body#top .etl-floating-search {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body#top .etl-mobile-corner-logo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body#top .etl-mobile-body-logo {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    left: 16px !important;
    right: auto !important;
    justify-content: flex-start !important;
    z-index: 7004 !important;
    transition: opacity 0.24s ease, transform 0.28s ease, visibility 0.24s ease !important;
  }

  body#top .etl-mobile-body-logo img,
  body#top .etl-mobile-body-logo svg {
    display: block !important;
    width: auto !important;
    height: 34px !important;
    max-width: min(42vw, 150px) !important;
  }

  body#top.etl-sidebar-open .etl-mobile-body-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
  }

  body#top .etl-sidebar-button,
  body#top.etl-mobile-burger-hidden:not(.etl-sidebar-open) .etl-sidebar-button {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    inset-inline: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: auto !important;
    display: grid !important;
    flex-direction: column !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 7005 !important;
    text-align: center !important;
    transition: opacity 0.24s ease, transform 0.28s ease, visibility 0.24s ease !important;
  }

  body#top .etl-mobile-topbar {
    min-height: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    background: rgba(244, 246, 249, 0.84) !important;
    backdrop-filter: blur(10px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
    border-bottom: 1px solid rgba(20, 23, 28, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
    transition: opacity 0.24s ease, transform 0.28s ease, visibility 0.24s ease !important;
  }

  body#top .etl-mobile-topbar .etl-mobile-corner-logo,
  body#top .etl-mobile-topbar .etl-mobile-body-logo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body#top.etl-sidebar-open .etl-mobile-topbar {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateY(-10px) !important;
  }

  body#top.etl-sidebar-open .etl-sidebar-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body#top .etl-sidebar-button span {
    all: unset !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    display: block !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box,
  body#top .etl-sidebar-button .etl-sidebar-button__label {
    display: block !important;
    color: #14171c !important;
    line-height: 1 !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    animation: etl-menu-arrow-bounce 2.6s ease-in-out infinite !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__box svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    color: currentColor !important;
  }

  body#top .etl-sidebar-button .etl-sidebar-button__label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }

  html[data-theme="dark"] body#top .etl-sidebar-button .etl-sidebar-button__box,
  html[data-theme="dark"] body#top .etl-sidebar-button .etl-sidebar-button__label,
  body#top.dark-mode .etl-sidebar-button .etl-sidebar-button__box,
  body#top.dark-mode .etl-sidebar-button .etl-sidebar-button__label {
    color: #ffffff !important;
  }

  body#top.etl-sidebar-open .sidebar.etl-sidebar,
  body#top.etl-sidebar-open .sidebar.etl-sidebar * {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body#top.index-page #how h2::after,
  body#top.index-page :is(#dispatch-regularity, #work-formats) h2::after {
    content: none !important;
    display: none !important;
  }

  body#top.index-page #how.etl-how-mobile {
    position: relative !important;
    padding: 28px 0 20px !important;
    overflow: hidden !important;
  }

  body#top.index-page #how.etl-how-mobile h2 {
    max-width: none !important;
    margin-bottom: 10px !important;
  }

  body#top.index-page #how.etl-how-mobile .process-track {
    display: none !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-intro {
    margin: 0 0 12px !important;
    max-width: 32ch !important;
    color: rgba(54, 60, 70, 0.84) !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-status {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-status__current,
  body#top.index-page #how.etl-how-mobile .process-mobile-status__total {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #14171c !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-status__bar {
    position: relative !important;
    display: block !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(20, 23, 28, 0.12) !important;
    overflow: hidden !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-status__fill {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ef2624 0%, #b81818 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-viewport {
    position: relative !important;
    overflow: hidden !important;
    padding: 6px 0 8px !important;
  }

  body#top.index-page #how.etl-how-mobile .process-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 18px 8px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    will-change: scroll-position !important;
    touch-action: pan-y !important;
    scroll-snap-type: x mandatory !important;
  }

  body#top.index-page #how.etl-how-mobile .process-grid::-webkit-scrollbar {
    display: none !important;
  }

  body#top.index-page #how.etl-how-mobile .process-grid > .process-step {
    flex: 0 0 var(--etl-how-card-width, calc(100vw - 44px)) !important;
    width: var(--etl-how-card-width, calc(100vw - 44px)) !important;
    min-width: var(--etl-how-card-width, calc(100vw - 44px)) !important;
    min-height: min(296px, 40vh) !important;
    min-height: min(296px, 40svh) !important;
    scroll-snap-align: start !important;
    opacity: var(--etl-how-card-opacity, 1) !important;
    transform: translateY(var(--etl-how-card-lift, 0)) scale(var(--etl-how-card-scale, 1)) !important;
    transition: transform 0.24s ease, opacity 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease !important;
  }

  body#top.index-page #how.etl-how-mobile .process-grid > .process-step.is-active {
    box-shadow: 0 28px 42px rgba(15, 23, 42, 0.14) !important;
  }

  body#top.index-page #how.etl-how-mobile .process-step__num {
    margin-bottom: 10px !important;
  }

  body#top.index-page #how.etl-how-mobile .process-step__title {
    margin-bottom: 8px !important;
    font-size: clamp(22px, 5.4vw, 28px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    max-width: 10ch !important;
  }

  body#top.index-page #how.etl-how-mobile .process-step__lead {
    margin: 0 0 8px !important;
    color: rgba(20, 23, 28, 0.92) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    max-width: 28ch !important;
  }

  body#top.index-page #how.etl-how-mobile .process-step__text {
    font-size: 14px !important;
    line-height: 1.48 !important;
    color: rgba(37, 44, 54, 0.84) !important;
    max-width: 28ch !important;
    margin-bottom: 0 !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-footer {
    display: grid !important;
    gap: 12px !important;
    align-content: end !important;
    padding-top: 8px !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-caption {
    min-height: 1.3em !important;
    color: rgba(54, 60, 70, 0.8) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  body#top.index-page #how.etl-how-mobile .process-mobile-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: #ef2624 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 18px 28px rgba(206, 28, 26, 0.24) !important;
  }

  @keyframes etl-menu-arrow-bounce {
    0%, 100% {
      transform: translateY(0);
      opacity: 1;
    }

    35% {
      transform: translateY(0.45rem);
      opacity: 0;
    }

    70% {
      transform: translateY(-0.45rem);
      opacity: 0;
    }
  }

  body#top.index-page #hero > .container.hero-grid,
  body#top.index-page #hero > .container {
    padding-top: calc(env(safe-area-inset-top, 0px) + 28px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body#top.index-page #calculator {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  body#top.index-page #calculator > .calc-head,
  body#top.index-page #calculator > .calc-grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body#top.index-page #calculator .calc-head {
    margin-bottom: 10px !important;
  }

  body#top.index-page #calculator .calc-head h2 {
    max-width: none !important;
    margin-bottom: 6px !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 0.98 !important;
    text-wrap: balance !important;
  }

  body#top.index-page #calculator .calc-head p {
    max-width: 34ch !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  body#top.index-page #calculator .calc-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: calc(100vh - env(safe-area-inset-top, 0px) - 176px) !important;
    min-height: calc(100svh - env(safe-area-inset-top, 0px) - 176px) !important;
  }

  body#top.index-page #calculator .calc-grid > aside.card {
    order: 2 !important;
    position: sticky !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 2 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 26px rgba(12, 18, 30, 0.10) !important;
    margin-top: auto !important;
  }

  body#top.index-page #calculator .calc-grid > section.card {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body#top.index-page #calculator .calc-grid > section.card::-webkit-scrollbar {
    display: none !important;
  }

  body#top.index-page #calculator .res-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  body#top.index-page #calculator #rTotal {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 0.95 !important;
  }

  body#top.index-page #calculator .calc-result-meta {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  body#top.index-page #calculator .calc-result-badge {
    min-height: 30px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }

  body#top.index-page #calculator .breakdown {
    display: none !important;
  }

  body#top.index-page #calculator .line {
    gap: 8px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(13, 24, 42, 0.08) !important;
  }

  body#top.index-page #calculator .line:last-child {
    border-bottom: 0 !important;
  }

  body#top.index-page #calculator .line-title {
    font-size: 14px !important;
  }

  body#top.index-page #calculator .line-meta {
    font-size: 11px !important;
  }

  body#top.index-page #calculator .line-value {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  body#top.index-page #calculator .route-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  body#top.index-page #calculator .field-swap {
    order: 2 !important;
    justify-content: stretch !important;
  }

  body#top.index-page #calculator .field-swap {
    display: none !important;
  }

  body#top.index-page #calculator .route-row > .field:first-child {
    order: 1 !important;
  }

  body#top.index-page #calculator .route-row > .field:last-child {
    order: 2 !important;
  }

  body#top.index-page #calculator .calc-route-swap {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  body#top.index-page #calculator .calc-spacer {
    height: 2px !important;
  }

  body#top.index-page #calculator .calc-section-title {
    margin-bottom: 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  body#top.index-page #calculator .field {
    gap: 6px !important;
  }

  body#top.index-page #calculator .field > label[for]:not(.calc-exped-inline):not(.calc-label-hidden) {
    font-size: 11px !important;
  }

  body#top.index-page #calculator .inp,
  body#top.index-page #calculator input.inp,
  body#top.index-page #calculator select.inp {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  body#top.index-page #calculator input,
  body#top.index-page #calculator select,
  body#top.index-page #calculator textarea {
    font-size: 16px !important;
  }

  body#top.index-page #calculator select.inp,
  body#top.index-page #calculator #cMode.inp {
    line-height: 1.2 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    height: auto !important;
  }

  body#top.index-page #calculator .calc-exped-inline,
  body#top.index-page #calculator .chk {
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
  }

  body#top.index-page #calculator .f-row3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body#top.index-page #calculator .f-row3 > .field:nth-child(3),
  body#top.index-page #calculator .f-row3 > .chk {
    grid-column: 1 / -1 !important;
  }

  body#top.index-page #calculator .calc-range {
    margin-top: 2px !important;
  }

  body#top.index-page #calculator .checks {
    display: grid !important;
    gap: 10px !important;
  }

  body#top.index-page #calculator .btn-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  body#top.index-page #calculator .btn-row > :is(a, button) {
    width: 100% !important;
    min-height: 42px !important;
  }

  body#top.index-page #calculator .hint {
    display: none !important;
  }

  body#top.index-page #calculator #rSpecNote {
    display: none !important;
  }

  body#top.index-page #calculator .calc-grid > aside.card .btn-row {
    margin-top: 8px !important;
  }

  body#top.index-page #calculator .calc-grid > aside.card .btn-row > .btn-outline {
    display: none !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid {
    min-height: auto !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > section.card {
    flex: initial !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > section.card::-webkit-scrollbar {
    display: none !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > aside.card {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 26px rgba(12, 18, 30, 0.12) !important;
    margin-top: 2px !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .res-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > aside.card .calc-result-meta {
    display: none !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > aside.card .btn-row {
    margin-top: 6px !important;
    grid-template-columns: 1fr !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .calc-grid > aside.card .btn-row > :is(a, button) {
    min-height: 40px !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__item {
    border-top: 1px solid rgba(13, 24, 42, 0.08) !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__item:first-of-type {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__trigger {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__title {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(40, 47, 57, 0.82) !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__summary {
    min-width: 0 !important;
    font-size: 11px !important;
    color: rgba(77, 86, 98, 0.74) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__icon {
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid rgba(20, 23, 28, 0.8) !important;
    border-bottom: 2px solid rgba(20, 23, 28, 0.8) !important;
    transform: rotate(45deg) translateY(-1px) !important;
    transition: transform 0.18s ease !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__trigger[aria-expanded="true"] .etl-calc-accordion__icon {
    transform: rotate(225deg) translateY(-1px) !important;
  }

  body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__panel {
    padding-top: 10px !important;
  }

  @media (max-width: 420px) {
    body#top.index-page #calculator .f-row3 {
      grid-template-columns: 1fr !important;
    }

    body#top.index-page #calculator .f-row3 > .field:nth-child(3),
    body#top.index-page #calculator .f-row3 > .chk {
      grid-column: auto !important;
    }
  }

  body#top.index-page #geo.section-light {
    padding-top: 20px !important;
    padding-bottom: 22px !important;
  }

  body#top.index-page #geo .geo-section-title {
    margin-bottom: 8px !important;
  }

  body#top.index-page #geo .geo-intro {
    max-width: 33ch !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  body#top.index-page #geo .bento-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:first-child {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:first-child > h3,
  body#top.index-page #geo .bento-grid > .bento-card:first-child > p,
  body#top.index-page #geo .bento-grid > .bento-card:first-child > .geo-note {
    display: none !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:first-child .geo-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 0 10px 4px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:first-child .geo-list::-webkit-scrollbar {
    display: none !important;
  }

  body#top.index-page #geo .geo-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(13, 24, 42, 0.10) !important;
    color: rgba(29, 29, 27, 0.88) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body#top.index-page #geo .geo-btn:hover,
  body#top.index-page #geo .geo-btn:active,
  body#top.index-page #geo .geo-btn:focus,
  body#top.index-page #geo .geo-btn:focus-visible {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body#top.index-page #geo .geo-btn[aria-pressed="true"],
  body#top.index-page #geo .geo-btn.is-active {
    background: rgba(229, 38, 41, 0.10) !important;
    border-color: rgba(229, 38, 41, 0.28) !important;
    color: #b61d1c !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:last-child {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body#top.index-page #geo #geoCityTitle {
    margin-bottom: 8px !important;
    font-size: 22px !important;
    line-height: 1.02 !important;
    transform: none !important;
    transition: none !important;
  }

  body#top.index-page #geo #geoAddress,
  body#top.index-page #geo #geoHours {
    font-weight: 700 !important;
  }

  body#top.index-page #geo .geo-city-meta {
    gap: 6px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  body#top.index-page #geo .geo-meta-item {
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }

  body#top.index-page #geo .geo-city-lead {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.46 !important;
    max-width: none !important;
    transition: none !important;
  }

  body#top.index-page #geo .geo-mini {
    display: none !important;
  }

  body#top.index-page #geo .geo-map-tooltip {
    display: none !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:last-child > div[style*="margin-top:16px"] {
    margin-top: 12px !important;
  }

  body#top.index-page #geo .bento-grid > .bento-card:last-child .btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }

  body#top.index-page .hero-grid,
  body#top.index-page .hero-content,
  body#top.index-page .hero-visual {
    min-width: 0 !important;
  }

  body#top.index-page .hero-points {
    display: none !important;
  }

  body#top.index-page .hero-point {
    display: none !important;
  }

  body#top.index-page .hero-truck,
  body#top.index-page .hero-visual img,
  body#top.index-page .hero-media img {
    max-width: 100% !important;
    height: auto !important;
  }

  html[data-theme="dark"] body#top .etl-mobile-topbar {
    background: rgba(10, 12, 16, 0.84) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(12px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.02) !important;
  }

  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-mobile-intro,
  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-step__text,
  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-mobile-caption {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-step__lead {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-mobile-status__current,
  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-mobile-status__total,
  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-step__title {
    color: rgba(248, 248, 248, 0.96) !important;
  }

  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-mobile-status__bar {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  html[data-theme="dark"] body#top.index-page #how.etl-how-mobile .process-grid > .process-step.is-active {
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.30) !important;
  }

  html[data-theme="dark"] body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__item {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
  }

  html[data-theme="dark"] body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__title {
    color: rgba(248, 248, 248, 0.84) !important;
  }

  html[data-theme="dark"] body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__summary {
    color: rgba(255, 255, 255, 0.56) !important;
  }

  html[data-theme="dark"] body#top.index-page #calculator.etl-calc-mobile .etl-calc-accordion__icon {
    border-right-color: rgba(255, 255, 255, 0.72) !important;
    border-bottom-color: rgba(255, 255, 255, 0.72) !important;
  }

  html[data-theme="dark"] body#top.index-page #calculator.etl-calc-mobile .calc-grid > aside.card {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo .bento-grid > .bento-card:first-child,
  html[data-theme="dark"] body#top.index-page #geo .bento-grid > .bento-card:last-child {
    background: var(--index-dark-surface) !important;
    border-color: var(--index-dark-border) !important;
    box-shadow: var(--index-dark-shadow) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo .geo-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(248, 248, 248, 0.88) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo .geo-btn[aria-pressed="true"],
  html[data-theme="dark"] body#top.index-page #geo .geo-btn.is-active {
    background: rgba(229, 38, 41, 0.18) !important;
    border-color: rgba(229, 38, 41, 0.42) !important;
    color: rgba(255, 255, 255, 0.96) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo #geoCityTitle,
  html[data-theme="dark"] body#top.index-page #geo #geoAddress,
  html[data-theme="dark"] body#top.index-page #geo #geoHours {
    color: rgba(248, 248, 248, 0.96) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo .geo-city-lead,
  html[data-theme="dark"] body#top.index-page #geo .geo-intro {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  html[data-theme="dark"] body#top.index-page #geo .geo-meta-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.72) !important;
  }
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ — СЕТКИ И ФОРМЫ (добавлено 2026-03-22)
   ============================================================ */

/* A4. Глобальные правила */
@media only screen and (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px !important; } /* предотвращает zoom на iOS */
}

/* A1. Сетки: cases, about, региональные и сервисные страницы */
@media only screen and (max-width: 768px) {
  /* cases.html */
  .cases-grid { grid-template-columns: 1fr !important; }

  /* about.html */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .about2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .about2-grid { grid-template-columns: 1fr !important; }
  .value-grid { grid-template-columns: 1fr !important; }

  /* Региональные + сервисные страницы */
  .svc-grid3 { grid-template-columns: 1fr !important; }
  .svc-proof { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .svc-compare-grid { grid-template-columns: 1fr !important; }
  .svc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media only screen and (max-width: 480px) {
  .svc-kpis { grid-template-columns: 1fr !important; }
  .svc-proof { grid-template-columns: 1fr !important; }
  .about2-stats { grid-template-columns: 1fr !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* A2. schedule.html — фильтры и таблица */
@media only screen and (max-width: 600px) {
  .filters-bar { flex-direction: column !important; gap: 8px !important; }
  .field { min-width: 0 !important; width: 100% !important; }
  table.data-table { min-width: 480px !important; }
}

/* UX: stepper кнопки в request.html (touch-targets ≥ 44px) */
@media only screen and (max-width: 768px) {
  .rq-step {
    min-height: 44px !important;
    padding: 8px 14px !important;
  }
  .rq-step .n {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}

/* UX: мелкий вспомогательный текст калькулятора */
@media only screen and (max-width: 768px) {
  .field .calc-exped-inline { font-size: 13px !important; }
}

/* UX: placeholder в тёмной теме — увеличить контраст */
html[data-theme="dark"] .inp::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(208, 220, 238, 0.65) !important;
}

/* UX: disabled кнопки форм */
button:disabled,
button[aria-busy="true"] {
  opacity: .6 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* sea.html — таблица направлений: разрешить горизонтальный скролл */
@media (max-width: 768px) {
  .sea-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* cabinet.html — скрытая панель-переключатель не должна торчать за экран */
@media (max-width: 768px) {
  .cab-auth-stage .is-hidden {
    display: none !important;
  }
}

/* index.html — сетка услуг в #services: принудительно 1 колонка на мобиле
   (inline CSS в index.html задаёт repeat(4,...) !important с ID-специфичностью) */
@media (max-width: 768px) {
  body#top.index-page #services .bento-grid {
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
  }
  body#top.index-page #services .bento-grid > .bento-card {
    min-height: auto !important;
    width: 100% !important;
  }
}

/* warehouse.html — .svc-kicker имеет width:max-content!important в inline CSS;
   переопределяем на мобиле с той же специфичностью но позже в каскаде */
@media (max-width: 480px) {
  body#top.warehouse-service-page .svc-kicker {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: calc(100% - 0px) !important;
  }
}

/* about.html — .about2-visuals 1 колонка + clip переполнения */
@media (max-width: 768px) {
  .about2-visuals {
    grid-template-columns: 1fr !important;
  }
  .about2-visual,
  figure.about2-visual {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* marquee не должен создавать горизонтальный скролл */
  .trust-marquee {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .marquee-group {
    overflow: visible !important;
  }
}

/* vladivostok-khabarovsk.html и другие региональные страницы —
   global_nav_footer_theme.css ставит body#top table{min-width:640px};
   для адаптивных таблиц (th/td→block) отменяем это ограничение */
@media (max-width: 768px) {
  body#top table.svc-spec-table,
  body#top table.svc-table {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Pills: длинный текст переносим, не обрезаем */
  .svc-pills {
    flex-wrap: wrap !important;
  }
  .svc-pill {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: calc(100vw - 32px) !important;
  }
  /* svc-table-wrap: overflow:hidden→auto чтобы пользователь мог скроллить если нужно */
  .svc-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── Hero и CTA не меняются при смене темы — тёмный стиль всегда ── */
html:not([data-theme="dark"]) body#top .svc-hero,
html:not([data-theme="dark"]) body#top .svc-cta {
  background: linear-gradient(180deg, rgba(15,15,15,.98), rgba(9,9,9,.98)) !important;
  border-color: rgba(255,255,255,.12) !important;
}
/* Текст: .svc-hero/.svc-cta в цепочке даёт специфичность (0,1,3,2)/(0,1,2,3)
   что выше чем body#top.service-page .svc-title (0,1,2,1) из services_premium_unify.css */
html:not([data-theme="dark"]) body#top .svc-hero .svc-title {
  color: #f4f4f4 !important;
}
html:not([data-theme="dark"]) body#top .svc-hero .svc-lead {
  color: rgba(224,224,224,.76) !important;
}
html:not([data-theme="dark"]) body#top .svc-cta h3 {
  color: #f4f4f4 !important;
}
html:not([data-theme="dark"]) body#top .svc-cta p {
  color: rgba(224,224,224,.76) !important;
}

/* ============================================================
   РАЗДЕЛ: SCROLL PERFORMANCE — GPU layer promotion
   ============================================================
   Создаём compositor layer для фиксированных элементов с
   backdrop-filter, чтобы их не перерисовывало при скролле.
   will-change: transform на position:fixed создаёт отдельный
   GPU слой — backdrop-filter не нужно перерисовывать каждый кадр.
   ============================================================ */

/* Навигация — всегда на GPU слое */
.p-header,
#p-header {
  will-change: transform;
  contain: layout style;
}

/* Мобильное меню оверлей */
.p-mobile-menu,
.etl-sidebar,
.etl-mobile-overlay {
  will-change: transform;
}

/* Фиксированные CTA и float-элементы */
.etl-sticky-cta,
.etl-quick-rail,
.etl-messenger-float {
  will-change: transform;
  contain: layout style;
}

/* Cookie banner */
.etl-cookie-wrap {
  will-change: transform;
  contain: layout style;
}

/* content-visibility для секций ниже fold — браузер не рендерит
   их пока они вне viewport, значительно снижает нагрузку на CPU */
@media (min-width: 769px) {
  .svc-proof,
  .svc-faq,
  .svc-compare,
  .svc-kpis,
  .svc-cta,
  .cases-section,
  .about2-section,
  footer {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
  }
}

/* Backdrop-filter: уменьшаем blur на слабых устройствах.
   GPU поддержка backdrop-filter слабая до 2019 года выпуска */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
  .p-header,
  #p-header,
  .p-mobile-menu,
  .etl-sidebar {
    -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
    backdrop-filter: blur(6px) saturate(120%) !important;
  }
}

/* На устройствах без GPU-ускорения замените blur твёрдым фоном */
@supports not (backdrop-filter: blur(1px)) {
  .p-header,
  #p-header {
    background: rgba(255,255,255,.96) !important;
  }
  html[data-theme="dark"] .p-header,
  html[data-theme="dark"] #p-header {
    background: rgba(14,14,14,.97) !important;
  }
}

/* ============================================================
   18. DARK MODE — мобильное меню (.sidebar.etl-sidebar)
   ============================================================ */
@media (max-width: 1099px) {
  html[data-theme="dark"] body#top .sidebar.etl-sidebar {
    background: #111111 !important;
    box-shadow: 0 24px 48px rgba(0,0,0,.55) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .etl-sidebar-bottom {
    background: linear-gradient(180deg, rgba(17,17,17,0), rgba(17,17,17,.88) 20%, #111111) !important;
    border-top-color: rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li > a,
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link {
    color: rgba(235,240,252,.88) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li a .link_name,
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link .link_name {
    color: inherit !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li a i:not(.arrow),
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link i:not(.arrow) {
    color: rgba(235,240,252,.55) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu a {
    color: rgba(220,228,248,.74) !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu {
    background: rgba(255,255,255,.03) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu a:hover,
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu a:focus-visible,
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .sub-menu a:active {
    color: rgba(255,255,255,.98) !important;
    background: rgba(229,38,41,.12) !important;
    border-color: rgba(229,38,41,.24) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .etl-menu-toggle {
    color: rgba(255,255,255,.38) !important;
  }

  html[data-theme="dark"] body#top .etl-sidebar-btn--ghost {
    color: rgba(248,250,255,.96) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  }

  html[data-theme="dark"] body#top .etl-sidebar-btn--ghost:hover,
  html[data-theme="dark"] body#top .etl-sidebar-btn--ghost:focus-visible,
  html[data-theme="dark"] body#top .etl-sidebar-btn--ghost:active {
    color: #ffffff !important;
    background: rgba(229,38,41,.14) !important;
    border-color: rgba(229,38,41,.28) !important;
  }

  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li > a:active,
  html[data-theme="dark"] body#top .sidebar.etl-sidebar .nav-links li .etl-menu-link:active {
    background: rgba(229,38,41,.12) !important;
  }

  html[data-theme="dark"] body#top .etl-mobile-topbar {
    background: rgba(14,16,20,0.88) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
  }
}