/* mobile-app.css - ИСПРАВЛЕНО
   App-like mobile layout (<=560px)
*/

/* ================= СКРЫВАЕМ НА DESKTOP ================= */
@media (min-width: 561px) {
  .mobile-bottom-nav,
  .overlay,
  #mnavOverlay {
    display: none !important;
  }
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ ================= */
@media (max-width: 560px){

  /* ================= ЧЁРНЫЙ ФОН ВМЕСТО КАРТИНКИ ================= */
  body {
    background: #000000 !important;
    background-image: none !important;
  }
  
  /* Убираем затемнение которое было для картинки */
  body::before {
    display: none !important;
  }

  /* keep page width like a phone card */
  .layout,
  .layout.agency-page{
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Content на всю ширину */
  .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* ВСЕ контейнеры на страницах - шире */
  .leads-container,
  .crm-container,
  .payments-container,
  .ads-container,
  .agency-container,
  .dev-container,
  .requests-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px 80px 12px !important;
  }

  /* hide side panels on app-mobile */
  .sidebar,
  .profile-panel{
    display: none !important;
  }
  
  /* НО показываем sidebar внутри CRM profile-sidebar-wrap! */
  .layout.profile-shell .profile-sidebar-wrap .sidebar {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    padding-bottom: 0 !important; /* Убираем лишний padding снизу */
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* header: centered, no cropping */
  .topbar{
    padding: 10px 10px !important; /* Уменьшили с 14px */
    justify-content: center !important;
    min-height: 50px !important; /* Меньше высота */
  }
  .logo-link{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .banner-image{
    width: min(520px, 94vw) !important;
    height: auto !important;
    max-height: 45px !important; /* Уменьшили с 56px */
    object-fit: contain !important;
    object-position: center !important;
  }
  
  /* Heartbeat line тоже меньше */
  .heartbeat-line {
    height: 35px !important;
  }

  /* home glass container */
  .agency-home{
    margin: 12px auto !important;
    padding: 22px 16px 20px !important;
    border-radius: 22px !important;
  }

  .agency-intro{
    margin: 0 auto 16px !important;
  }
  .agency-intro p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  /* flatten rows -> one grid like in mockup */
  .agency-services{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
    justify-content: initial !important;
    
    /* Добавляем разделитель СВЕРХУ */
    padding-top: 16px !important;
    border-top: 1px solid rgba(0, 220, 255, 0.25) !important;
    box-shadow: 0 -1px 8px rgba(0, 220, 255, 0.15) !important;
    
    /* Подстройка под 6 карточек (2 ряда по 3) */
    grid-auto-rows: 1fr !important;
  }
  .agency-row,
  .agency-row-bottom{
    display: contents !important; /* makes cards children of .agency-services */
    max-width: none !important;
  }

  .agency-card{
    width: auto !important;
    min-height: 160px !important; /* ОДИНАКОВАЯ ВЫСОТА */
    padding: 12px 10px 10px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Выравнивание по верху */
    gap: 8px !important;
  }
  
  /* Скрываем Development полностью (не занимает место) */
  .agency-card[href*="development"],
  a[href*="/modules/development/"].agency-card {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  .agency-card img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .agency-card span{
    font-size: 12px !important;
    opacity: 0.92 !important;
    line-height: 1.1 !important;
  }

  /* SEO accordion -> looks like pill-button with "Показать" */
  .seo-details{
    margin-top: 16px !important;
    border-radius: 18px !important;
  }

  .seo-details > summary{
    width: calc(100% - 24px) !important;
    margin: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 999px !important;
  }

  .seo-details > summary::after{
    content: "Показать";
    font-weight: 700;
    opacity: 0.9;
  }

  /* bottom nav placeholder (styles for the HTML snippet) */
  .mobile-bottom-nav{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    padding: 8px 10px;
    border-radius: 20px;

    background: rgba(8, 16, 28, 0.72);
    border: 1px solid rgba(0, 220, 255, 0.14);
    backdrop-filter: blur(16px);
    z-index: 9999;
  }

  /* bottom nav - все элементы одинаковые (ПРИНУДИТЕЛЬНО) */
  .mobile-bottom-nav .mbn-item,
  .mobile-bottom-nav button.mbn-item,
  .mobile-bottom-nav a.mbn-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    text-decoration: none !important;
    color: rgba(210, 230, 245, 0.86) !important;

    border: 1px solid transparent !important;
    border-radius: 16px !important;
    padding: 8px 6px !important;

    background: transparent !important;
    cursor: pointer !important;
    user-select: none !important;
    
    /* убираем стили кнопки */
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  
  /* Hover - легкая подсветка */
  .mobile-bottom-nav .mbn-item:hover,
  .mobile-bottom-nav button.mbn-item:hover {
    background: rgba(0, 220, 255, 0.05) !important;
  }

  .mobile-bottom-nav .mbn-ico{
    font-size: 18px;
    line-height: 1;
  }

  .mobile-bottom-nav .mbn-txt{
    font-size: 10px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mobile-bottom-nav .mbn-item.active{
    border-color: rgba(0, 220, 255, 0.22);
    background: rgba(0, 220, 255, 0.06);
    color: rgba(235, 250, 255, 0.95);
  }
}
@media (max-width: 560px){
  /* карточки должны уметь сжиматься */
  .agency-card{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;     /* КЛЮЧЕВО */
    padding: 10px 10px 12px !important;
    box-sizing: border-box !important;
  }

  /* картинка не должна раздувать карточку */
  .agency-card img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* сетка: 3 колонки и разрешаем сжиматься */
  .agency-services{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
/* =========================
   APP DRAWERS + DARKER BG + BOTTOM BAR LOWER
   (append to END of mobile-app.css)
========================= */
@media (max-width: 560px){

  /* Темнее общий фон (не мешает кликам) */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 0;
  }
  .layout, .topbar, .agency-home{ position: relative; z-index: 1; }

  /* Темнее “стекло” главного блока */
  .agency-home{
    background: rgba(8, 14, 24, 0.72) !important;
    border: 1px solid rgba(0, 220, 255, 0.12) !important;
  }

  /* Нижнюю панель — ближе к низу */
  .mobile-bottom-nav{
    left: 8px !important;
    right: 8px !important;
    bottom: env(safe-area-inset-bottom) !important; /* вместо 10px */
    height: 60px !important;
    border-radius: 18px !important;
    background: rgba(6, 12, 20, 0.78) !important; /* чуть темнее */
    z-index: 10030 !important;
  }

  /* Overlay (если в main.css его нет или скрыт) */
  .overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display: none;
    z-index: 10010;
  }
  .overlay.active{ display:block; }

  /* === Drawer: LEFT MENU (sidebar) === */
  .sidebar{
    display: block !important;          /* вместо display:none */
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding-top: 80px !important;
    z-index: 10020 !important;
    transition: left .28s ease !important;
    background: rgba(8, 14, 24, 0.98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 18px 0 50px rgba(0,0,0,0.75) !important;
  }
  .sidebar.active{ left: 0 !important; }

  /* === Drawer: RIGHT PROFILE (profile-panel) === */
  .profile-panel{
    display: block !important;          /* вместо display:none */
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: min(340px, 90vw) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding-top: 80px !important;
    z-index: 10020 !important;
    transition: right .28s ease !important;
    background: rgba(8, 14, 24, 0.98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: -18px 0 50px rgba(0,0,0,0.75) !important;
  }
  .profile-panel.active{ right: 0 !important; }

  /* Аккаунт: кружок-буква */
  .mbn-letter{
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    background: rgba(0, 220, 255, 0.12);
    border: 1px solid rgba(0, 220, 255, 0.22);
  }

  /* Попап “Выйти” */
  .mbn-account{ position: relative; }
  .mbn-pop{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70px;
    min-width: 140px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(6, 12, 20, 0.92);
    border: 1px solid rgba(0, 220, 255, 0.16);
    backdrop-filter: blur(16px);
    display: none;
    z-index: 10040;
  }
  .mbn-pop.active{ display: block; }

  .mbn-pop-item{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 38px;
    border-radius: 12px;
    text-decoration:none;
    color: rgba(235,250,255,0.95);
    background: rgba(255, 70, 70, 0.12);
    border: 1px solid rgba(255, 70, 70, 0.22);
  }

  /* Чуть поджать подписи, чтобы не налезали */
  .mobile-bottom-nav .mbn-ico{ font-size: 16px !important; }
  .mobile-bottom-nav .mbn-txt{ font-size: 9px !important; max-width: 54px !important; }
}

@media (max-width: 560px){

  /* 1) темнее общий фон */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.35);
    pointer-events:none;
    z-index:0;
  }
  .layout, .topbar, .agency-home{ position:relative; z-index:1; }

  .agency-home{
    background: rgba(8, 14, 24, 0.72) !important;
    border: 1px solid rgba(0, 220, 255, 0.12) !important;
  }

  /* 2) прижать нижнюю панель ниже */
  .mobile-bottom-nav{
    left: 8px !important;
    right: 8px !important;
    bottom: env(safe-area-inset-bottom) !important; /* вместо 10px */
    height: 60px !important;
    border-radius: 18px !important;
    background: rgba(6, 12, 20, 0.78) !important;
    z-index: 10030 !important;
  }

  /* чтобы контент не прятался под панелью */
  .layout{
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* 3) overlay */
  .overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display:none;
    z-index:10010;
  }
  .overlay.active{ display:block; }

  /* 4) drawer слева: sidebar (ПЕРЕОПРЕДЕЛЯЕМ твой display:none) */
  .sidebar{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:-100% !important;
    width:min(320px, 86vw) !important;
    height:100vh !important;
    overflow-y:auto !important;
    padding-top:80px !important;
    z-index:10020 !important;
    transition:left .28s ease !important;
    background: rgba(8,14,24,0.98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 18px 0 50px rgba(0,0,0,0.75) !important;
  }
  .sidebar.active{ left:0 !important; }

  /* 5) drawer справа: profile-panel */
  .profile-panel{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    right:-100% !important;
    left:auto !important;
    width:min(340px, 90vw) !important;
    height:100vh !important;
    overflow-y:auto !important;
    padding-top:80px !important;
    z-index:10020 !important;
    transition:right .28s ease !important;
    background: rgba(8,14,24,0.98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: -18px 0 50px rgba(0,0,0,0.75) !important;
  }
  .profile-panel.active{ right:0 !important; }

  /* 6) центр: контейнер аккаунта должен занимать “ячейку” как остальные */
  .mobile-bottom-nav .mbn-account{
    flex: 1 1 0;
    min-width: 0;
    display:flex;
    justify-content:center;
    position:relative;
  }
  .mobile-bottom-nav .mbn-account .mbn-item{
    width:100%;
  }

  /* буква */
  .mbn-letter{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:999px;
    font-weight:800;
    font-size:14px;
    background: rgba(0, 220, 255, 0.12);
    border: 1px solid rgba(0, 220, 255, 0.22);
  }

  /* попап выйти */
  .mbn-pop{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:70px;
    min-width:140px;
    padding:10px;
    border-radius:14px;
    background: rgba(6, 12, 20, 0.92);
    border: 1px solid rgba(0, 220, 255, 0.16);
    backdrop-filter: blur(16px);
    display:none;
    z-index:10040;
  }
  .mbn-pop.active{ display:block; }

  .mbn-pop-item{
    display:flex;
    align-items:center;
    justify-content:center;
    height:38px;
    border-radius:12px;
    text-decoration:none;
    color: rgba(235,250,255,0.95);
    background: rgba(255,70,70,0.12);
    border: 1px solid rgba(255,70,70,0.22);
  }
}
@media (max-width: 560px){

  /* 1) затемнение должно быть СЗАДИ, а не через z-index на layout */
  body::before{ z-index: -1 !important; }

  /* 2) снять stacking-context, который ломает клики по drawer'ам */
  .layout, .topbar, .agency-home{
    z-index: auto !important;
  }

  /* 3) порядок слоёв */
  .overlay{ z-index: 10010 !important; }
  .sidebar, .profile-panel{
    z-index: 10020 !important;
    pointer-events: auto !important;
  }
  .mobile-bottom-nav{ z-index: 10030 !important; }
  
  /* ================= СКРЫВАЕМ НА ГЛАВНОЙ СТРАНИЦЕ ================= */
  
  /* Скрываем блок "О платформе и направлениях" полностью */
  .seo-details {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
  
  /* Скрываем карточку Development полностью */
  .agency-card[href*="development"],
  a[href*="/modules/development/"].agency-card {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
  
  /* Убираем margin после agency-home чтобы не было пустоты */
  .agency-home {
    margin-bottom: 0 !important;
  }
  
  /* ================= СТРАНИЦА LEADS (ЛИДЫ) ================= */
  
  /* Контейнер на всю ширину с отступами */
  .leads-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px 80px !important; /* отступы по краям */
  }
  
  /* Hero блок шире */
  .leads-hero {
    margin-bottom: 20px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  
  /* Карточки лидов на всю ширину */
  .leads-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .lead-card {
    width: 100% !important;
    padding: 18px !important;
    border-radius: 16px !important;
  }
  
  /* Предупреждающий блок */
  .warning-box {
    padding: 14px !important;
    border-radius: 14px !important;
    margin: 16px 0 !important;
  }
  
  /* Кнопки на карточках */
  .lead-card .btn-primary {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* ================= СТРАНИЦА PAYMENTS (РЕКВИЗИТЫ) ================= */
  
  /* Контейнер страницы */
  .pay-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* Верхний блок с инфо */
  .pay-info {
    margin-bottom: 20px !important;
  }
  
  .pay-grid {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .pay-left h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  
  .pay-meta p {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  
  /* Карточка с правилами */
  .rules-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }
  
  .rules-card-text {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  
  .rules-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* СЕТКА СТРАН - 2 КОЛОНКИ */
  .country-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .country-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  
  .country-card span {
    font-size: 12px !important;
  }
  
  .country-percent {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #00ffd5 !important;
  }
  
  /* Модалка запроса */
  .modal-box {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  
  .modal-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  
  .modal-sub {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  
  .form-grid {
    gap: 12px !important;
  }
  
  .field label {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  
  .field input {
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  .modal-actions {
    gap: 10px !important;
    margin-top: 16px !important;
  }
  
  .modal-actions button {
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* Toggle FTD/RET */
  .toggle-wrap {
    gap: 8px !important;
    margin: 12px 0 16px !important;
  }
  
  .toggle-btn {
    padding: 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  
  /* Rules modal */
  .rules-box {
    width: calc(100vw - 28px) !important;
    max-width: 480px !important;
    padding: 24px 18px !important;
  }
  
  .rules-content {
    font-size: 13px !important;
    line-height: 1.6 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
  
  .rules-content p {
    margin-bottom: 12px !important;
  }
  
  /* ================= СТРАНИЦА CRM SYSTEMS ================= */
  
  /*
   * ВАЖНО! Для работы меню на CRM странице нужно добавить в footer.php:
   * 
   * Найти строку:
   *   menuBtn && menuBtn.addEventListener('click', () => {
   * 
   * И ЗАМЕНИТЬ НА:
   * 
   *   menuBtn && menuBtn.addEventListener('click', () => {
   *     // Поддержка CRM страницы (.profile-shell)
   *     const crmSidebar = document.querySelector('.profile-sidebar-wrap');
   *     if (crmSidebar) {
   *       document.body.classList.toggle('profile-sidebar-open');
   *       return;
   *     }
   *     // Обычное поведение
   *     profile && profile.classList.remove('active');
   *     sidebar && sidebar.classList.toggle('active');
   *     accPop && accPop.classList.remove('active');
   *     syncOverlay();
   *   });
   */
  
  /* Layout для CRM - flex колонка */
  .layout.profile-shell {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  
  /* SIDEBAR WRAPPER - делаем drawer вместо скрытия! */
  .layout.profile-shell .profile-sidebar-wrap {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding-top: 20px !important; /* Меньше отступ сверху - содержимое выше */
    padding-bottom: 120px !important;
    z-index: 10020 !important;
    transition: left .28s ease !important;
    background: rgba(8, 14, 24, 0.98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 18px 0 50px rgba(0,0,0,0.75) !important;
  }
  
  /* Открытие через класс body (используется в CRM JS) */
  body.profile-sidebar-open .layout.profile-shell .profile-sidebar-wrap {
    left: 0 !important;
  }
  
  /* Backdrop для CRM */
  .layout.profile-shell .profile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(6px) !important;
    display: none !important;
    z-index: 10010 !important;
  }
  
  body.profile-sidebar-open .layout.profile-shell .profile-backdrop {
    display: block !important;
  }
  
  /* Main content на всю ширину */
  .layout.profile-shell .main-content.profile-main.content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* Hero блок */
  .hero-card.crm-hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    margin-bottom: 20px !important;
    border-radius: 18px !important;
  }
  
  .crm-hero h1 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  
  .hero-description {
    gap: 8px !important;
  }
  
  .hero-description div {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  /* CRM Grid - одна колонка */
  .crm-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
  }
  
  /* CRM Cards */
  .crm-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  
  .crm-card h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  
  .crm-subtitle {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  
  .crm-features {
    margin-bottom: 16px !important;
    padding-left: 18px !important;
  }
  
  .crm-features li {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
  }
  
  .crm-meta {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .crm-price {
    font-size: 18px !important;
  }
  
  .crm-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  
  /* Buttons */
  .crm-card .btn-primary,
  .crm-card .crm-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* Badge */
  .crm-card .badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  
  /* Featured card */
  .crm-card.featured {
    border-width: 1.5px !important;
  }
  
  /* ================= СТРАНИЦА IP-ТЕЛЕФОНИИ ================= */
  
  /* Hero блок */
  .ip-offer {
    padding: 20px 16px !important;
    margin-bottom: 24px !important;
    position: relative !important; /* Для абсолютного позиционирования badge */
  }
  
  /* Badge - абсолютное позиционирование */
  .module-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    z-index: 2 !important;
  }
  
  /* Заголовок и описание - добавляем отступ сверху */
  .ip-top {
    margin-top: 40px !important; /* Отступ чтобы badge не налезал */
  }
  
  /* Заголовок и описание */
  .ip-top h1 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }
  
  .ip-top p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }
  
  /* КАРТОЧКИ ПРЕИМУЩЕСТВ - 2 КОЛОНКИ */
  .ip-benefits {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  
  .ip-benefit {
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }
  
  .ip-benefit:hover {
    transform: none !important; /* Убираем hover эффект на мобильных */
  }
  
  .ip-icon {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  
  .ip-benefit h3 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  .ip-benefit p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: 0.85 !important;
  }
  
  /* Кнопка */
  .ip-main-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  
  /* Модалка */
  .ip-modal-box {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  
  .ip-modal h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
  
  .ip-form {
    gap: 12px !important;
  }
  
  .ip-form input,
  .ip-form select,
  .ip-form textarea {
    font-size: 14px !important;
    padding: 12px !important;
  }
  
  .ip-form textarea {
    min-height: 100px !important;
  }
  
  /* ================= СТРАНИЦА ADS (РЕКЛАМА) ================= */
  
  /* Wrapper */
  .ads-line-wrapper {
    padding: 16px 0 24px !important;
  }
  
  /* Main card */
  .ads-line-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  
  /* Badge */
  .ads-badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 12px !important;
  }
  
  /* Заголовок */
  .ads-line-card h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  
  /* Подзаголовок */
  .ads-line-sub {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }
  
  /* КАРТОЧКИ В 2 КОЛОНКИ */
  .ads-line-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  
  .ads-line-item {
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }
  
  .ads-icon {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }
  
  .ads-line-item h3 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }
  
  .ads-line-item p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Pricing section */
  .ads-pricing-section {
    padding: 16px 0 !important;
  }
  
  .ads-pricing-section h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }
  
  .ads-pricing-grid {
    gap: 12px !important;
  }
  
  .ads-pricing-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  
  .ads-pricing-card h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  .ads-pricing-card .price {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  
  .ads-pricing-card ul li {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  
  /* CTA кнопка */
  .ads-cta-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  
  /* Модалка */
  .ads-modal-box {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
  
  .ads-modal-box h2 {
    font-size: 20px !important;
    margin-bottom: 16px !important;
  }
  
  /* ================= СТРАНИЦА SUPPORT (ПОДДЕРЖКА) ================= */
  
  /* Wrapper */
  .support-wrapper {
    padding: 20px 16px !important;
  }
  
  /* Header */
  .support-header {
    margin-bottom: 24px !important;
  }
  
  .support-header h1 {
    font-size: 24px !important;
    margin-bottom: 14px !important;
    line-height: 1.2 !important;
  }
  
  .support-header p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* КАРТОЧКИ В 2 КОЛОНКИ */
  .support-block {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
  }
  
  .support-item {
    width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  
  .support-item:hover {
    transform: none !important; /* Убираем hover эффект на мобильных */
  }
  
  .support-icon {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }
  
  .support-item h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  
  .support-item p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }
  
  .support-link {
    font-size: 13px !important;
    margin-top: 10px !important;
    word-break: break-all !important;
  }
  
  /* График работы */
  .support-time {
    padding-top: 20px !important;
    text-align: center !important;
  }
  
  .support-time h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
  
  .support-time p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  
  /* ================= СТРАНИЦА SERVICE RULES (ПРАВИЛА) ================= */
  
  /* Page content */
  .rules-page .content {
    padding: 16px 12px !important;
  }
  
  /* Wrapper */
  .rules-wrapper {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  
  /* Top section */
  .rules-top {
    margin-bottom: 20px !important;
    position: relative !important;
    padding-top: 32px !important; /* Отступ для badge */
  }
  
  .rules-top .module-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
  }
  
  .rules-top h1 {
    font-size: 24px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }
  
  .rules-top p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* Sections */
  .rules-section {
    margin-bottom: 24px !important;
  }
  
  .rules-section h2 {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
  }
  
  .rules-section h3 {
    font-size: 15px !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  
  .rules-section p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  
  /* Divider */
  .divider {
    margin: 20px 0 !important;
  }
  
  /* Warning block */
  .warning {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  
  /* Bottom */
  .rules-bottom {
    margin-top: 24px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  .rules-bottom p {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  
  /* ================= МОДАЛКИ ДОЛЖНЫ БЫТЬ ВЫШЕ DRAWER'ОВ ================= */
  
  /* Все модалки - z-index выше чем у drawer (10020) и bottom nav (10030) */
  .modal,
  .auth-modal,
  .request-modal,
  .ip-modal,
  .ads-modal,
  #depositModal,
  #withdrawModal,
  .profile-modal,
  [class*="modal"][class*="active"],
  [id*="modal"],
  [id*="Modal"] {
    z-index: 10050 !important; /* Выше всех drawer'ов и панелей */
  }
  
  /* Backdrop модалок тоже должен быть высоким */
  .modal-backdrop,
  .modal-overlay {
    z-index: 10045 !important;
  }
  
  /* Закрытие drawer'ов при открытии модалки */
  body.modal-open .sidebar,
  body.modal-open .profile-panel,
  body.modal-open .profile-sidebar-wrap {
    left: -100% !important;
    right: -100% !important;
  }
  
  body.modal-open .overlay,
  body.modal-open .profile-backdrop {
    display: none !important;
  }
  
  /* ================= СТРАНИЦА МОИ ЗАПРОСЫ ================= */
  
  /* Заголовок и кошелек */
  .profile-wallet-section {
    margin-bottom: 20px !important;
  }
  
  .profile-wallet-section h2 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  
  /* Блок кошелька */
  .wallet-display {
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  
  .wallet-label {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  
  .wallet-value {
    font-size: 14px !important;
    word-break: break-all !important;
  }
  
  /* Статистика - 2 колонки */
  .stats-block {
    margin-bottom: 20px !important;
  }
  
  .stats-block h2 {
    font-size: 18px !important;
    margin-bottom: 14px !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .stats-grid > div {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  
  .stats-grid span {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  
  .stats-grid strong {
    font-size: 20px !important;
  }
  
  /* Фильтры - горизонтальный скролл */
  .filters {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .filters a {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  .filters a:hover {
    transform: none !important;
  }
  
  /* Таблица - карточный вид */
  .requests-table {
    display: none !important; /* Скрываем таблицу на мобильных */
  }
  
  /* Мобильные карточки запросов */
  .request-mobile-card {
    padding: 16px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  
  .request-mobile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
  }
  
  .request-mobile-country {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  .request-mobile-status {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
  }
  
  .request-mobile-info {
    display: grid !important;
    gap: 8px !important;
    font-size: 13px !important;
  }
  
  .request-mobile-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  .request-mobile-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
  }
  
  .request-mobile-value {
    font-weight: 600 !important;
    font-size: 13px !important;
  }
  
  /* Empty state */
  .empty-requests {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  
  .empty-requests-icon {
    font-size: 48px !important;
    margin-bottom: 12px !important;
  }
  
  .empty-requests h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  
  .empty-requests p {
    font-size: 13px !important;
    opacity: 0.7 !important;
  }
  
  /* ================= СТРАНИЦА МОИ ЗАКАЗЫ ================= */
  
  /* Container - ВАЖНО: сильная специфичность */
  .layout.agency-page .orders-container,
  .agency-page .orders-container,
  body .agency-page .orders-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px 100px 12px !important; /* Большой отступ снизу */
    box-sizing: border-box !important;
  }
  
  /* Также добавим отступ для самого layout */
  body .layout.agency-page {
    padding-bottom: 100px !important;
  }
  
  /* Header */
  .orders-header {
    padding: 18px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .orders-header h2 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  
  /* Фильтры - горизонтальный скролл */
  .orders-filter {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .filter-btn {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  .filter-btn.active {
    background: rgba(0, 255, 200, 0.1) !important;
    border-color: rgba(0, 255, 200, 0.3) !important;
    color: #00ffc8 !important;
  }
  
  /* Orders grid - одна колонка */
  .orders-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Order card */
  .order-card {
    padding: 16px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  
  .order-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
  }
  
  .order-card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  
  .order-card-id {
    font-size: 11px !important;
    opacity: 0.6 !important;
  }
  
  .order-card-status {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
  }
  
  .order-card-body {
    display: grid !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .order-card-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  .order-card-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
  }
  
  .order-card-value {
    font-weight: 600 !important;
  }
  
  .order-card-footer {
    display: flex !important;
    gap: 8px !important;
  }
  
  .order-card-btn {
    flex: 1 !important;
    padding: 10px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  
  /* Modal */
  .order-modal {
    z-index: 10050 !important;
  }
  
  .order-modal-box {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  
  /* ================= МОДАЛКА СМЕНЫ ПАРОЛЯ ================= */
  
  /* Модалка смены пароля - стили когда открыта */
  .custom-modal.active,
  #passwordModal.active {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  /* Также добавляем стили для открытой модалки транзакций */
  .custom-modal[style*="display: flex"],
  .custom-modal[style*="display:flex"],
  #passwordModal[style*="display: flex"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .custom-modal-content,
  #passwordModal .custom-modal-content {
    width: calc(100vw - 40px) !important;
    max-width: 480px !important;
    padding: 24px 20px !important;
    border-radius: 18px !important;
    background: rgba(15, 25, 40, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    margin: 0 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* Заголовок модалки */
  .custom-modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
  }
  
  .custom-modal .modal-header h3 {
    font-size: 20px !important;
    margin: 0 !important;
    flex: 1 !important;
  }
  
  /* Крестик закрытия - СПРАВА */
  .custom-modal .modal-close {
    font-size: 32px !important;
    cursor: pointer !important;
    opacity: 0.7 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin-left: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .custom-modal .modal-close:hover {
    opacity: 1 !important;
    color: #00ffd5 !important;
  }
  
  /* Форма */
  .custom-modal form,
  #passwordForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  
  /* Инпуты */
  .custom-modal input[type="password"],
  #passwordForm input[type="password"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 255, 200, 0.25) !important;
    background: rgba(20, 30, 45, 0.8) !important;
    color: white !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
  }
  
  .custom-modal input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px !important;
  }
  
  .custom-modal input[type="password"]:focus {
    outline: none !important;
    border-color: #00ffd5 !important;
    box-shadow: 0 0 20px rgba(0, 255, 213, 0.3) !important;
  }
  
  /* Кнопка */
  .custom-modal .modal-submit,
  .custom-modal button[type="submit"] {
    width: 100% !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #00ffd5, #00e0ff) !important;
    border: none !important;
    color: #001a24 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: all 0.2s !important;
  }
  
  .custom-modal button[type="submit"]:active {
    transform: scale(0.98) !important;
  }
}