/* ===========================================================================
 * mobile.css — оптимизация под телефоны.
 *
 * Применяется на экранах ≤ 768px. Цели:
 *   1. Sidebar превращается в off-canvas drawer + backdrop.
 *   2. Header компактный, без поиска (он не помещается), кнопка-меню слева.
 *   3. Таблицы скроллятся горизонтально внутри .card.
 *   4. Все grid'ы становятся 1-колоночными.
 *   5. Touch targets ≥ 44px (Apple HIG).
 *   6. Модалки full-screen.
 *   7. Floating action bar (bulk) — снизу без отступов.
 * =========================================================================== */

/* ====== 0. Универсальные правила ====== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }

  /* Touch-friendly интерактивы */
  .btn-primary, .btn-ghost, .btn-danger,
  button, .nav-link, .icon-btn, .tgl, .menu-item,
  .modal-close, .err-close, [data-modal-open], [data-modal-close],
  .pagination a, .pagination button { min-height: 44px; }
  a.rounded-lg, a.rounded, a.rounded-md { min-height: 44px; }
  .dash-range-btn { min-height: unset !important; }
  #dash-chart-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  #dash-chart-head > div:last-child { width: 100% !important; justify-content: center !important; margin-top: 4px !important; }
  #dash-legend { flex-wrap: nowrap !important; white-space: nowrap; gap: 10px !important; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .icon-btn { min-width: 44px; }

  /* Тапаемые ссылки в карточках чуть крупнее */
  .card a, .card button { line-height: 1.4; }

  /* Системные шрифты — input должен быть ≥16px, иначе iOS зумит при focus */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], textarea, select { font-size: 16px !important; }
}

/* ====== 1. App-shell layout ====== */
@media (max-width: 767px) {
  .app-shell { display: block; }
  .flex-1.min-w-0 { width: 100%; }
}

/* ====== 2. Sidebar → off-canvas drawer ====== */
@media (max-width: 767px) {
  /* Сайдбар становится фиксированным выезжающим из-за левого края. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 84%; max-width: 320px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .25s ease;
    background: #0a0f0e;
    box-shadow: 8px 0 32px -8px rgba(0,0,0,.6);
    overflow-y: auto;
  }
  .sidebar.is-open { transform: translateX(0); }

  /* nav внутри сайдбара на мобилке всегда показан как flex (без md:flex). */
  #mnav { display: flex !important; flex-direction: column; flex: 1; }
  #mnav.hidden { display: flex !important; }

  /* Backdrop за сайдбаром */
  .app-shell.drawer-open::before {
    content: ''; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,.55);
  }

  /* Лочим скролл body когда drawer открыт */
  body.drawer-open { overflow: hidden; }

  /* Punch nav-link до 48px для пальцев */
  .nav-link { padding: 12px 14px; font-size: 15px; }
  .nav-link svg { width: 20px; height: 20px; }
  .sidebar-logout { padding: 12px 14px; font-size: 15px; }
  .profile-pill { padding: 12px; }
}

/* ====== 3. App-header ====== */
@media (max-width: 767px) {
  .app-header { position: sticky; top: 0; z-index: 50; background: rgba(8,14,12,.85);
                -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .app-header-inner { padding: 10px 14px; gap: 10px; }
  /* Поиск убираем — занимает место. Юзер заходит в страницу аккаунтов отдельно. */
  .app-header-search { display: none !important; }
  /* Сжимаем header-stat */
  .header-stat { font-size: 12px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .header-stat .v { font-size: 13px; }
  .app-header-meta { gap: 6px; min-width: 0; overflow: hidden; }
  .app-header-meta .icon-btn { width: 38px; height: 38px; min-height: 38px; min-width: 38px; flex-shrink: 0; }

  /* Шапка сайдбара: явный flex — логотип и крестик в одну строку */
  .sidebar-head { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  #mobile-menu-close { margin-right: 4px; }

  /* Бургер слева перед meta */
  .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center;
                     width: 40px; height: 40px; border-radius: 10px;
                     border: none; background: none;
                     color: #cbd5e1; flex-shrink: 0; margin-left: -6px; }
  .mobile-menu-btn svg { width: 22px; height: 22px; }
  #sidebar-toggle { display: none !important; }
}
@media (min-width: 768px) {
  .mobile-menu-btn { display: none !important; }
}
/* ====== 4. Page content ====== */
@media (max-width: 767px) {
  main.px-5 { padding-left: 14px; padding-right: 14px; }
  main.md\:px-7 { padding-left: 14px; padding-right: 14px; }
  .page-heading-wrap { padding-left: 14px; padding-right: 14px; padding-top: 14px; }
  .page-h1 { font-size: 22px; }
}

/* ====== 5. Карточки/grid — single column ====== */
@media (max-width: 767px) {
  /* 2-col grids: collapse to 1 col (these wrap wide cards) */
  .grid.md\:grid-cols-2,
  .grid.lg\:grid-cols-2 { grid-template-columns: minmax(0, 1fr) !important; }

  /* 3+ col grids: collapse to 2 cols, not 1 (much better UX than single column) */
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.md\:grid-cols-5,
  .grid.md\:grid-cols-6,
  .grid.md\:grid-cols-12,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4,
  .grid.lg\:grid-cols-12 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .card { padding: 16px !important; border-radius: 14px; }
  .card.p-3 { padding: 12px !important; }
  .card.p-4 { padding: 14px !important; }
  .card.p-5, .card.p-6, .card.p-7 { padding: 16px !important; }

  /* Принудительно одна колонка для tgl-row, two-col-grid (wizard) */
  .tgl-row { grid-template-columns: 1fr !important; }
  .two-col-grid { grid-template-columns: 1fr !important; }
  .srv-row.cols-2, .srv-row.cols-3 { grid-template-columns: 1fr !important; }
}

/* ====== 6. Таблицы → горизонтальный скролл ====== */
@media (max-width: 767px) {
  .card .overflow-x-auto,
  .card > table { display: block; }
  /* Таблицы без обёртки оборачиваем вручную */
  .card > table {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* overflow-hidden на card блокирует горизонтальный скролл таблиц — разрешаем только по X */
  .card.overflow-hidden { overflow-x: auto; }
  /* .data-table используется вне .card (например accounts.html) — добавляем скролл */
  .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table table { white-space: nowrap; }
  .card table th, .card table td { font-size: 12.5px; padding: 8px 10px !important; }

  /* Подсказка-индикатор о скролле — убрана: создавала визуальную "чёрную полосу" поверх последней колонки таблицы */
  .card .overflow-x-auto { position: relative; }
}

/* ====== 6a. Таблицы — запрет переноса строк в специфичных таблицах ====== */
@media (max-width: 767px) {
  #orders-table { white-space: nowrap; }
  #lots-table   { white-space: nowrap; }
}

/* ====== 7. Формы / поля ====== */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea, select { width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
  textarea { min-height: 44px; }
  .label { font-size: 13px; margin-bottom: 6px; }

  /* Edit-field (account_config): кнопка карандаша рядом с input — не ужимаем */
  .edit-field { flex-wrap: nowrap; }
  .edit-field > button.edit-btn { padding: 0 14px; min-height: 44px; font-size: 13px; }

  /* Submit row в формах — кнопки на всю ширину */
  .form-actions, .srv-actions { flex-direction: column; gap: 10px; }
  .form-actions > *, .srv-actions > * { width: 100%; text-align: center; }
}

/* ====== 8. Модальное окно — адаптив на мобиле ====== */
@media (max-width: 767px) {
  .modal-shell, .modal-shell-wide {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 2rem) !important;
    margin: 0 !important;
    border-radius: 0.75rem !important;
    overflow-y: auto;
    padding: 16px !important;
  }
  .modal-overlay { padding: 1rem !important; align-items: center !important; }
  .modal-close { top: 12px !important; right: 12px !important; width: 40px; height: 40px; }
  .modal-body { padding: 0 !important; }

  /* Wizard внутри модалки */
  .wizard-shell { padding: 0 !important; gap: 16px !important; }
  .wizard-map { display: none !important; }
  .wizard-pane { padding: 18px 16px !important; }
  .wizard-title { font-size: 20px !important; }
  .wizard-desc { font-size: 13.5px !important; }
  /* Шаги-степпер (кружки 1-2-3-4-5): компакт */
  .step-progress { gap: 8px !important; padding: 8px 0 !important; }
  .step-dot { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .step-line { min-width: 14px !important; flex: 1; }

  /* Navigation row снизу wizard'а */
  .wizard-shell > form > .flex.items-center.justify-between { gap: 8px; padding-top: 12px !important; }
  #step-counter { display: none !important; }

  /* Кнопки «Наш сервер» / «Свой сервер» — 1 колонка, полная ширина, весь текст */
  .two-col-grid:has(.choose-card) { grid-template-columns: 1fr !important; gap: 8px !important; }
  .two-col-grid .choose-card { padding: 12px 12px 12px 38px !important; }
  .two-col-grid .choose-card::before { left: 12px !important; top: 16px !important; transform: none !important; }
  .two-col-grid .choose-card .text-xs { font-size: 12px !important; line-height: 1.45 !important; margin-top: 2px !important; }
}

/* ====== 9. Plan-grid (4 тарифа) — 2 колонки на мобиле ====== */
@media (max-width: 767px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .plan-card { padding: 14px 10px 12px !important; }
  .plan-card .pc-new { font-size: 18px !important; margin-left: 0 !important; }
  .plan-card .pc-new .rub { font-size: 12px !important; }
  /* Badge: pull out of absolute flow, span full card width */
  .plan-card .pc-badge { position: static !important; display: block !important; text-align: center !important;
                         transform: none !important; left: auto !important; width: calc(100% + 20px) !important;
                         margin: -14px -10px 10px !important;
                         border-radius: 0 0 4px 4px !important; padding: 3px 7px !important; }
}

/* ====== 9a. Plan-grid — 1 колонка на очень маленьких экранах ====== */
@media (max-width: 360px) {
  .plan-grid { grid-template-columns: 1fr !important; }
}

/* ====== 10. Чаты (account_chats) — мобильный слайд-панель ====== */
@media (max-width: 767px) {
  /* Контейнер: растягивается на всю высоту ниже шапки+вкладок */
  .account-chats-wrap {
    position: relative !important;
    display: block !important;
    height: calc(100dvh - 9rem) !important;
    min-height: 360px;
    overflow: hidden !important;
    margin: -1.25rem -14px -14px !important;
    border-top: 1px solid var(--border);
  }
  /* Список чатов: на весь экран по умолчанию */
  .chats-sidebar {
    position: absolute !important; inset: 0 !important;
    width: 100% !important;
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 2;
    border-right: none !important;
  }
  /* Чат-панель: скрыта вправо до выбора */
  .chats-main {
    position: absolute !important; inset: 0 !important;
    width: 100% !important;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1;
  }
  /* Когда чат открыт (.chats-main-chat.open): список → влево, чат → центр */
  .account-chats-wrap:has(#chat-active.open) .chats-sidebar { transform: translateX(-100%); }
  .account-chats-wrap:has(#chat-active.open) .chats-main  { transform: translateX(0); z-index: 3; }
  /* Кнопка «Назад» только на мобиле */
  #chats-back-btn { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; }
  /* Форма отправки: textarea растягивается */
  .chats-send-form textarea { flex: 1 1 auto; min-width: 0; }
  .chats-send-form .btn-primary { flex-shrink: 0; }
}
@media (min-width: 768px) {
  #chats-back-btn { display: none !important; }
}

/* ====== 11. Bulk-bar (плавающая) ====== */
@media (max-width: 767px) {
  #bulk-bar {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
  }
  #bulk-bar > div { border-radius: 0; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 12px !important; }
  #bulk-bar button { font-size: 12px; padding: 8px 10px !important; }
}

/* ====== 12. Лендинг ====== */
@media (max-width: 767px) {
  .lp-h1 { font-size: 30px !important; }
  .lp-sub { font-size: 14.5px !important; }
  .lp-section-h2 { font-size: 24px !important; }
  .lp-card { padding: 14px 12px !important; border-radius: 12px; }
  .lp-card h3 { font-size: 14px !important; margin-bottom: 6px; }
  .lp-card p { font-size: 12.5px !important; }
  .lp-card .lp-icon { width: 36px; height: 36px; margin-bottom: 12px; }
  .lp-card .lp-icon svg { width: 18px; height: 18px; }
  .lp-tier { padding: 18px 14px !important; border-radius: 14px; }
  .lp-tier .tier-price { font-size: 26px !important; }
  .lp-tier .tier-price .tier-rub { font-size: 14px !important; }
  .lp-tier li { font-size: 12.5px !important; gap: 6px; }
  .lp-cta-band { padding: 32px 18px !important; }
  .lp-trust { gap: 6px 10px; }
  .lp-trust .pill { font-size: 11.5px; padding: 5px 10px; }
  .lp-stat .num { font-size: 22px; }
  .lp-stat .num .unit { font-size: 14px; }
  /* Header лендинга: лого + меню */
  header nav.hidden.md\:flex { display: none; }

  /* Floating badges cover KPI stats and dash-card header on single-column layout. */
  .lp-float { display: none !important; }

  /* Hero-right: top gap when stacked below text */
  .lp-hero-right { margin-top: 28px; }

  /* CTA support card: long email must not overflow button */
  .lp-final-card a.btn-ghost,
  .lp-final-card a.btn-primary {
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Final cards: compact on small screens */
  .lp-final-card { padding: 24px 20px; min-height: auto; }

  /* Terminal mock: prevent font overflow */
  .lp-terminal .term-body { font-size: 11.5px; padding: 16px; word-break: break-all; }
}

/* ====== 13. Code-snippets, маски — не дают переполнения ====== */
@media (max-width: 767px) {
  code, pre, .font-mono { word-break: break-all; }
}

/* ====== 14. Sticky bottom action bar в account_config ====== */
@media (max-width: 767px) {
  .sticky.bottom-4 {
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    border-radius: 0 !important; margin: 0 -14px !important;
    padding: 10px 14px !important;
  }
}

/* ====== 15. Dashboard heat-карточки в одну линию (если есть) ====== */
@media (max-width: 480px) {
  .grid.grid-cols-2.md\:grid-cols-4,
  .grid.grid-cols-2.md\:grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.grid-cols-3.md\:grid-cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ====== 16. Dashboard — stat-cards и quick-actions 2×2 на телефоне ====== */
@media (max-width: 599px) {
  .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-card { padding: 0.9rem; min-height: auto; }
  .stat-card .stat-value { font-size: 1.5rem; }
  .chart-wrap { height: 200px !important; }
}

/* ====== 16a. Dashboard sales summary — stack vertically on mobile ====== */
@media (max-width: 639px) {
  .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ====== 17. Accounts — карточки вместо таблицы ====== */
@media (max-width: 767px) {
  .data-table { overflow: visible !important; background: transparent !important; border: none !important; border-radius: 0 !important; }

  #accounts-table { display: block !important; width: 100% !important; white-space: normal !important; }
  #accounts-table thead { display: none !important; }
  #accounts-table tbody { display: flex !important; flex-direction: column; gap: 0.45rem; }

  /* tr → карточка */
  #accounts-table tbody tr {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 0.75rem !important;
    padding: 0.55rem 2rem 0.55rem 0.7rem !important;
    transition: background 0.15s !important;
  }
  #accounts-table tbody tr:hover { background: rgba(255,255,255,.06) !important; }

  /* Все td — без padding и border (они заданы на tr) */
  #accounts-table td {
    padding: 0 !important;
    border: none !important;
    font-size: 0.84rem;
  }

  /* Скрываем: checkbox, ID, отзывы, баланс, плагины */
  #accounts-table td:nth-child(1),
  #accounts-table td:nth-child(2),
  #accounts-table td:nth-child(4),
  #accounts-table td:nth-child(5),
  #accounts-table td:nth-child(6) { display: none !important; }

  /* col 3: Аккаунт — занимает всё свободное место */
  #accounts-table td:nth-child(3) { display: flex !important; flex: 1 1 0% !important; min-width: 0; overflow: hidden; }
  #accounts-table td:nth-child(3) .row-avatar { gap: 0.5rem; min-width: 0; flex: 1; overflow: hidden; }
  #accounts-table td:nth-child(3) .av {
    width: 1.75rem; height: 1.75rem; min-width: 1.75rem;
    font-size: 0.72rem; border-radius: 0.45rem;
  }
  #accounts-table td:nth-child(3) .av-name { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #accounts-table td:nth-child(3) .av-sub  { font-size: 0.68rem; margin-top: 0.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* col 7: Статус */
  #accounts-table td:nth-child(7) { display: flex !important; align-items: center; flex-shrink: 0; }
  #accounts-table td:nth-child(7) .status-badge { font-size: 0.6rem; padding: 0.18rem 0.45rem; letter-spacing: 0.04em; white-space: nowrap; }

  /* col 8: Три точки */
  #accounts-table td:nth-child(8) { display: flex !important; align-items: center; flex-shrink: 0; }
  #accounts-table td:nth-child(8) .menu-wrap { display: flex !important; position: relative !important; }
  #accounts-table td:nth-child(8) .menu-trigger { width: 1.25rem !important; height: 1.75rem !important; padding: 0 !important; }
  #accounts-table td:nth-child(8) .menu-trigger:hover { background: transparent !important; border-color: transparent !important; color: #fff !important; }
  #accounts-table td:nth-child(8) .menu-popover { position: absolute !important; right: 0 !important; left: auto !important; width: 13rem !important; min-width: 0 !important; }
}

/* ====== 18. Accounts — toolbar: стек ====== */
@media (max-width: 767px) {
  .toolbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  /* Поиск — вся ширина, перенос остального на следующую строку */
  .toolbar-left { width: 100%; flex-wrap: wrap; gap: 0.5rem; }
  .toolbar-left .search-input { width: 100%; max-width: none !important; flex: none; }
  .toolbar-left .search-input input { padding-left: 2.25rem !important; }
  /* Статус и кнопка добавить — рядом в одну строку, одинаковый размер */
  .toolbar-left .menu-wrap { flex: 1; min-width: 0; }
  .toolbar-left .menu-wrap .chip { width: 100%; justify-content: center; box-sizing: border-box; }
  /* Попоувер — открывается вправо, на всю ширину родителя */
  .toolbar-left .menu-wrap .menu-popover { left: 0; right: 0; min-width: 0; width: 100%; box-sizing: border-box; }
  .acc-add-btn { flex: 1; justify-content: center; box-sizing: border-box; }
  .acc-add-label { display: inline; }
  /* Запустить все — полная ширина */
  .toolbar-right { width: 100%; }
  .toolbar-right form { width: 100%; }
  .toolbar-right form .btn-primary { width: 100%; justify-content: center; }
  /* Empty state — меньше отступ сверху */
  .empty { padding: 1.5rem 1rem; margin-top: 0.25rem; }
}

/* ====== 19. Billing — min-width fix ====== */
@media (max-width: 767px) {
  .bill-stat-card { min-width: 0 !important; }
  .bill-stat-card--wide { min-width: 0 !important; width: 100%; }
  .bill-stat-value { font-size: 1.5rem; }
  .bill-history-td-date { white-space: nowrap; }
}

/* ====== 20. Wizard — модалка создания аккаунта ====== */
@media (max-width: 767px) {
  /* Убрать двойной card-wrapper внутри модалки */
  .modal-body .card.wizard-layout {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Nav: step-counter скрываем, кнопки растягиваем */
  #step-counter { display: none !important; }
  #prev-btn, #next-btn, #submit-btn {
    flex: 1 !important;
    justify-content: center !important;
    min-height: 44px;
  }
  #wiz-nav { gap: 8px !important; }

  /* SSH two-col-grid → 1 колонка */
  .ssh-box .two-col-grid { grid-template-columns: 1fr !important; }

  /* SSH/TG box: достаточная max-height для раскрытия */
  .ssh-box.show, .tg-box.show { max-height: 1600px; }
}

/* ====== 21. Billing — payment tiles + stat truncate ====== */
@media (max-width: 767px) {
  /* Payment method tiles: wrap & shrink on mobile */
  #pay-methods { flex-wrap: wrap !important; gap: 10px !important; }
  .bill-pay-tile { width: 100px !important; height: 100px !important; font-size: 12px; }
  /* Topup submit button: match input height, skip 44px tap-target rule */
  .bill-submit-btn { min-height: unset !important; height: 2.25rem !important; }

  /* Stat card values: prevent overflow */
  .bill-stat-card { overflow: hidden; }
  .bill-stat-value { font-size: 1.25rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bill-stat-sub { font-size: 10px !important; }

  /* Balance row: stack label + refresh on mobile */
  .bill-balance-row { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ====== 22. Account detail — action button rows ====== */
@media (max-width: 599px) {
  /* Action bar below account detail header: stack on tiny screens */
  .account-actions-row { flex-wrap: wrap !important; gap: 8px !important; }
  .account-actions-row .btn-primary,
  .account-actions-row .btn-ghost,
  .account-actions-row .btn-danger { flex: 1 1 auto; justify-content: center; }

  /* stat mini-cards in account detail: ensure 44px tap targets */
  .stat-card { min-height: 44px; }
}

/* ====== 23. Wizard — summary grid sm:grid-cols-3 → 1 col ====== */
@media (max-width: 599px) {
  .grid.sm\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ====== 24. Account config — sidebar nav already hidden md:block;
              make sure form takes full width ====== */
@media (max-width: 767px) {
  .group-nav { display: none !important; }
  .group-nav + form,
  .group-nav ~ form { width: 100%; }
}

/* ====== 25. Instance detail — status card: stack on mobile ====== */
@media (max-width: 767px) {
  .inst-status-card { flex-direction: column !important; }
  .inst-status-card > div:last-child { justify-content: flex-start !important; }
}

/* ====== 26. Lots — hide Количество column (col 3) on mobile ====== */
@media (max-width: 767px) {
  #lots-table th:nth-child(3), #lots-table td:nth-child(3) { display: none !important; }
}

/* ====== 27. Servers table — hide Хост/Пользователь/Инстансов; fix inline form-row ====== */
@media (max-width: 767px) {
  #servers-table th:nth-child(2), #servers-table td:nth-child(2),
  #servers-table th:nth-child(3), #servers-table td:nth-child(3),
  #servers-table th:nth-child(5), #servers-table td:nth-child(5) { display: none !important; }
  /* Override inline style="grid-template-columns: 2fr 1fr" in servers.html modal */
  .form-grid > .form-row { grid-template-columns: 1fr !important; }
}

/* ====== 28. Admin proxies table — hide #/Логин/Инстанс/Срок/Проверен ====== */
@media (max-width: 767px) {
  #proxies-table th:nth-child(1), #proxies-table td:nth-child(1),
  #proxies-table th:nth-child(4), #proxies-table td:nth-child(4),
  #proxies-table th:nth-child(6), #proxies-table td:nth-child(6),
  #proxies-table th:nth-child(7), #proxies-table td:nth-child(7),
  #proxies-table th:nth-child(8), #proxies-table td:nth-child(8) { display: none !important; }
}

/* ====== 29. Account detail — hide Покупатель column (col 3) in orders table ====== */
@media (max-width: 767px) {
  #orders-table th:nth-child(3), #orders-table td:nth-child(3) { display: none !important; }
}

/* ====== 30. Instances — hide Сервер(3) Версия(5) Посл.действие(6) columns ====== */
@media (max-width: 767px) {
  #instances-table th:nth-child(3), #instances-table td:nth-child(3),
  #instances-table th:nth-child(5), #instances-table td:nth-child(5),
  #instances-table th:nth-child(6), #instances-table td:nth-child(6) { display: none !important; }
}

/* ====== 31. Instance detail — reduce log heights on mobile ====== */
@media (max-width: 767px) {
  #deploy_log, #cardinal_log { max-height: 200px !important; }
}

/* ====== 32. Admin users — hide Роль(3) Аккаунтов(4) Всего(6) Создан(7) columns ====== */
@media (max-width: 767px) {
  #admin-users-table th:nth-child(3), #admin-users-table td:nth-child(3),
  #admin-users-table th:nth-child(4), #admin-users-table td:nth-child(4),
  #admin-users-table th:nth-child(6), #admin-users-table td:nth-child(6),
  #admin-users-table th:nth-child(7), #admin-users-table td:nth-child(7) { display: none !important; }
}

/* ====== 33. Account tabs — strip card styling, show as flat scroll row ====== */
@media (max-width: 767px) {
  .acc-tabs-bar {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .acc-tabs-bar::-webkit-scrollbar { display: none; }
}

/* ====== 34. Account head — pyramid layout on mobile ====== */
@media (max-width: 767px) {
  .acc-head-wrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .acc-head-left {
    position: relative !important;
    flex: 1 !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }
  /* Back button: absolute left, vertically centered */
  .acc-head-left > a:first-child {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    flex-shrink: 0 !important;
  }
  .acc-head-left > a:first-child svg { width: 16px !important; height: 16px !important; }
  /* Name: full width, perfectly centered */
  .acc-head-left > div { width: 100% !important; text-align: center !important; }
  .acc-head-left .text-lg {
    font-size: 22px !important;
    text-align: center !important;
  }
  /* Status+IP row: centered */
  .acc-head-left .text-xs.text-slate-500 {
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }
  /* Action buttons: own centered row */
  .acc-head-actions {
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .acc-head-actions button {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }
}

/* ====== 34b. Chats all-accounts — sub-header + слайд-панель ====== */
@media (max-width: 767px) {
  .chats-sub-left {
    width: 100% !important;
    border-right: none !important;
  }
  .chats-sub-right {
    display: none !important;
    width: 100% !important;
    border-left: none !important;
  }
}
@media (max-width: 767px) {
  .chats-wrap {
    position: relative !important;
    display: block !important;
    height: calc(100dvh - 8rem) !important;
    min-height: 360px;
    overflow: hidden !important;
    margin: -1.25rem -14px -14px !important;
    border-top: 1px solid var(--border);
  }
  .chats-wrap .chats-sidebar {
    position: absolute !important; inset: 0 !important;
    width: 100% !important;
    transform: translateX(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 2;
    border-right: none !important;
  }
  .chats-wrap .chats-main {
    position: absolute !important; inset: 0 !important;
    width: 100% !important;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1;
  }
  .chats-wrap.chat-open .chats-sidebar { transform: translateX(-100%); }
  .chats-wrap.chat-open .chats-main  { transform: translateX(0); z-index: 3; }
  #chats-back-btn { display: none; }
}
@media (min-width: 768px) {
  #chats-back-btn { display: none !important; }
}

/* ====== 35. Chats refresh button — borderless, smaller on mobile ====== */
@media (max-width: 767px) {
  #chats-refresh {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-height: unset !important;
    min-width: unset !important;
    border: none !important;
    background: transparent !important;
  }
  #chats-refresh svg { width: 0.9rem !important; height: 0.9rem !important; }
  #chats-refresh:hover { background: var(--surface-2) !important; }
}

/* ====== 36. Chat header buttons — borderless, smaller on mobile ====== */
@media (max-width: 767px) {
  #chats-back-btn, #chat-refresh {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-height: unset !important;
    min-width: unset !important;
    border: none !important;
    background: transparent !important;
  }
  #chats-back-btn svg, #chat-refresh svg { width: 0.95rem !important; height: 0.95rem !important; }
  #chats-back-btn:hover, #chat-refresh:hover { background: var(--surface-2) !important; }
}

/* ====== 37. Active orders bar — compact on mobile ====== */
@media (max-width: 767px) {
  .chats-orders-bar { padding: 4px 10px !important; gap: 6px !important; }
  .chats-orders-label { font-size: 9px !important; }
  .chats-orders-bar a { font-size: 10px !important; padding: 2px 6px !important; }
}

/* ====== 38. Stat window buttons (24ч / 7д / 30д) — mobile ====== */
@media (max-width: 767px) {
  .stat-win-btn { padding: 6px 12px !important; font-size: 11px !important; }
  /* Active: strip full bg, draw smaller inner pill via ::before */
  .stat-win-btn[class*="bg-emerald"] {
    background-color: transparent !important;
    position: relative !important;
  }
  .stat-win-btn[class*="bg-emerald"]::before {
    content: '';
    position: absolute;
    inset: 6px 6px;
    background: rgba(34,197,94,0.2);
    border-radius: 6px;
    pointer-events: none;
  }
}

/* ====== 39. placeholder ====== */
@media (max-width: 767px) {
  ._unused {
    display: none;
  }
}

/* ====== 40. dashboard chart legend — center on mobile ====== */
@media (max-width: 767px) {
  #dash-chart-head { flex-direction: column; align-items: stretch; gap: 6px; }
  #dash-legend { justify-content: center; width: 100%; gap: 12px !important; font-size: 11px !important; }
  #dash-legend span.w-2\.5 { width: 8px !important; height: 8px !important; }
}

/* ====== 40b. disable backdrop-filter on mobile (causes artifacts) ====== */
@media (max-width: 767px) {
  .card, .glass-panel, .stat-card {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  /* Modal backdrop: blur only here (shell has no blur — avoids stacking artifacts) */
  .modal-backdrop {
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
            backdrop-filter: blur(14px) saturate(130%) !important;
    background: rgba(2, 5, 4, 0.82) !important;
  }
}

/* ====== 41. plugins marketplace — price/owned layout ====== */
@media (max-width: 767px) {
  .plg-price-tag { display: none !important; }
  .plg-btn-price { display: inline !important; }
  .plg-price-bought { display: none !important; }
  .plg-owned-footer { display: inline-flex !important; }
}