/* 
   Общие стили для страниц модулей
   Четкое разделение между TWA и обычным сайтом
*/

/* ========== КРИТИЧЕСКИЙ ФИКС ДЛЯ LAYOUT ========== */

/* ПРИНУДИТЕЛЬНО исправляем проблему с колонками для обычного сайта */
body:not(.twa-mode) main#app-main-content {
    display: block !important; /* Отключаем любой flex/grid */
    flex-direction: column !important; /* На случай если flex не отключится */
}

/* Убеждаемся что контейнер страницы блочный */
body:not(.twa-mode) .admin-page.admin-generic-list-page {
    display: block !important;
    width: 100% !important;
}

/* КРИТИЧЕСКИ ВАЖНО: Переопределяем стили container для всех страниц в обычном режиме */
body:not(.twa-mode) .container.friends-page,
body:not(.twa-mode) .container.subscriptions-page,
body:not(.twa-mode) .container.profile-page,
body:not(.twa-mode) .container.news-feed-page {
    max-width: 600px !important; /* Принудительно ставим нашу ширину */
    width: 600px !important; /* Фиксированная ширина */ 
    margin: 0 auto !important; /* Центрируем */
    padding: 30px !important; /* Стандартные отступы container */
    box-sizing: border-box !important;
}

/* ========== СТИЛИ ДЛЯ ОБЫЧНОГО САЙТА (НЕ TWA) ========== */

/* Основные контейнеры страниц - адаптивная ширина */
body:not(.twa-mode) .admin-page,
body:not(.twa-mode) .module-page-container,
body:not(.twa-mode) .wallet-page,
body:not(.twa-mode) .news-feed-page,
body:not(.twa-mode) .friends-page,
body:not(.twa-mode) .user-midjourney-page {
    max-width: 600px; /* Возвращаем ширину */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Промежуточные админские контейнеры - не должны мешать центрированию */
body:not(.twa-mode) .admin-layout-container,
body:not(.twa-mode) .admin-main-content {
    width: 100%;
    display: block;
    /* Убираем любые margin/padding, которые могут мешать центрированию */
    margin: 0;
    padding: 0;
}

/* Убираем старые стили с :has() селекторами - они больше не нужны */

/* ИСПРАВЛЕНИЕ: Промежуточные контейнеры не должны использовать flexbox в обычном режиме */
body:not(.twa-mode) .admin-layout-container {
    display: block !important; /* Обычный блочный элемент */
    max-width: 600px !important; /* Ограничиваем ширину */
    margin: 0 auto !important; /* Центрируем */
    padding: 0 !important;
    width: 600px !important; /* Фиксированная ширина */
}

body:not(.twa-mode) .admin-main-content {
    display: block !important; /* Обычный блочный элемент */
    max-width: 600px !important; /* Ограничиваем ширину */
    margin: 0 auto !important; /* Центрируем */
    padding: 0 !important;
    width: 600px !important; /* Фиксированная ширина */
}

/* КРИТИЧЕСКИ ВАЖНО: Прилепляем creationBarContainer к header с максимальной специфичностью */
body:not(.twa-mode) .admin-page .mj-creation-bar-container,
body:not(.twa-mode) .admin-page #creationBarContainer,
body:not(.twa-mode) .admin-page div.mj-creation-bar-container {
    position: sticky !important; /* Прилепляем к header */
    top: 70px !important; /* Под header */
    z-index: 100 !important; /* Над контентом */
    background: #1e1e1e !important; /* Фон как у карточек */
    border: 1px solid #333 !important; /* Граница как у карточек */
    border-radius: 12px !important; /* Закругления как у карточек */
    margin: 20px auto 25px auto !important; /* Центрируем обычным способом */
    max-width: 600px !important; /* Ширина как у контента */
    padding: 20px 24px !important; /* Отступы как у карточек */
    box-sizing: border-box !important;
    width: 600px !important; /* Фиксированная ширина */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* Тень как у карточек */
    display: block !important; /* Убираем flex из admin_midjourney.css */
    flex-direction: initial !important; /* Убираем flex-direction из admin_midjourney.css */
    gap: initial !important; /* Убираем gap из admin_midjourney.css */
    left: auto !important; /* Убираем все позиционирующие свойства */
    right: auto !important; /* Убираем позиционирование */
    bottom: auto !important; /* Убираем позиционирование внизу */
    transform: none !important; /* Убираем трансформации */
}

/* Панели поиска в админке - работают везде, независимо от расположения в HTML */
body:not(.twa-mode) .search-bar-bottom-container,
body:not(.twa-mode) .admin-page .search-bar-bottom-container {
    position: static !important; /* Обычный блок вместо sticky для универсальности */
    top: auto !important; 
    z-index: auto !important; 
    background: #1e1e1e !important; /* Фон как у карточек */
    border: 1px solid #333 !important; /* Граница как у карточек */
    border-radius: 12px !important; /* Закругления как у карточек */
    margin: 20px auto 25px auto !important; /* Центрируем обычным способом */
    max-width: 600px !important; /* Ширина как у контента */
    padding: 20px 24px !important; /* Отступы как у карточек */
    box-sizing: border-box !important;
    width: 600px !important; /* Фиксированная ширина */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* Тень как у карточек */
    left: auto !important; /* Убираем все позиционирующие свойства */
    right: auto !important; /* Убираем позиционирование */
    bottom: auto !important; /* Убираем позиционирование внизу */
    transform: none !important; /* Убираем трансформации */
}

/* Поля ввода - для других контейнеров (остаются обычными блоками) */
body:not(.twa-mode) .search-bar-container,
body:not(.twa-mode) .prompt-input-container {
    position: static !important; /* Обычный блок, не sticky */
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    margin: 0 auto 25px auto;
    max-width: 600px;
    padding: 20px 24px;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body:not(.twa-mode) .mj-creation-bar,
body:not(.twa-mode) .search-bar,
body:not(.twa-mode) .prompt-input,
body:not(.twa-mode) .search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 600px; /* Ширина как у контейнера */
    margin: 0 auto;
}

body:not(.twa-mode) .mj-creation-bar textarea,
body:not(.twa-mode) .mj-creation-bar input[type="text"],
body:not(.twa-mode) .mj-creation-bar .adg-form-input,
body:not(.twa-mode) .search-bar input,
body:not(.twa-mode) .prompt-input input,
body:not(.twa-mode) .prompt-input textarea,
body:not(.twa-mode) .search-input-wrapper input[type="search"],
body:not(.twa-mode) .search-input-wrapper .adg-form-input {
    flex: 1;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, height 0.2s ease;
    resize: none;
    min-height: 44px;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body:not(.twa-mode) .mj-creation-bar textarea:focus,
body:not(.twa-mode) .mj-creation-bar input[type="text"]:focus,
body:not(.twa-mode) .mj-creation-bar .adg-form-input:focus,
body:not(.twa-mode) .search-bar input:focus,
body:not(.twa-mode) .prompt-input input:focus,
body:not(.twa-mode) .prompt-input textarea:focus,
body:not(.twa-mode) .search-input-wrapper input[type="search"]:focus,
body:not(.twa-mode) .search-input-wrapper .adg-form-input:focus {
    border-color: #64b5f6 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

/* Кнопки в панели создания */
body:not(.twa-mode) .mj-creation-bar .adg-button {
    min-width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

body:not(.twa-mode) .mj-creation-bar .adg-button--primary {
    background: linear-gradient(135deg, #64b5f6, #42a5f5) !important;
    border: none !important;
    color: #fff !important;
}

body:not(.twa-mode) .mj-creation-bar .adg-button--primary:hover {
    background: linear-gradient(135deg, #42a5f5, #2196f3) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
}

body:not(.twa-mode) .mj-creation-bar .adg-button--subtle {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
}

body:not(.twa-mode) .mj-creation-bar .adg-button--subtle:hover {
    background: #444 !important;
    border-color: #64b5f6 !important;
}

/* Стили для кнопок поиска */
body:not(.twa-mode) .search-clear-btn,
body:not(.twa-mode) .search-submit-btn {
    min-width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
    cursor: pointer;
}

body:not(.twa-mode) .search-clear-btn:hover,
body:not(.twa-mode) .search-submit-btn:hover {
    background: #444 !important;
    border-color: #64b5f6 !important;
}

/* Фильтры */
body:not(.twa-mode) .filter-controls-wrapper {
    margin-top: 12px !important;
}

body:not(.twa-mode) .adg-form-select {
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    min-height: 44px;
}

/* Контент страниц - адаптивная ширина */
body:not(.twa-mode) .admin-cards-list {
    max-width: 600px; /* Ширина как у контейнера */
    margin: 0 auto;
    padding: 0 20px;
    display: block !important; /* Принудительно блочный */
}

/* Специально для лент истории Midjourney - убираем верхний отступ */
body:not(.twa-mode) #midjourneyHistoryContainer.admin-cards-list {
    margin-top: 0; /* Убираем отступ сверху для корректного отображения после поля ввода */
}

/* Центрирование страницы управления модулями */
body:not(.twa-mode) .admin-page.admin-module-management-page.twa-page-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 40px;
    display: block !important; /* Принудительно блочный */
}

body:not(.twa-mode) .admin-page.admin-module-management-page .admin-cards-list.module-cards-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    display: block !important; /* Принудительно блочный */
}

/* Основные контейнеры всех админских страниц */
body:not(.twa-mode) .admin-page.admin-generic-list-page.twa-page-container {
    max-width: none !important; /* Убираем ограничение ширины для контейнера поля ввода */
    width: 100% !important; /* Контейнер на всю ширину */
    margin: 0 auto;
    padding: 0; /* Убираем padding для правильного центрирования */
    padding-bottom: 40px; /* Оставляем только нижний отступ */
    display: block !important; /* Принудительно блочный */
}

/* Также покрываем все остальные страницы с поиском */
body:not(.twa-mode) .admin-page.admin-generic-list-page {
    max-width: none !important; /* Убираем ограничение ширины для контейнера поля ввода */
    width: 100% !important; /* Контейнер на всю ширину */
    margin: 0 auto;
    padding: 0; /* Убираем padding для правильного центрирования */
    padding-bottom: 40px; /* Оставляем только нижний отступ */
    display: block !important; /* Принудительно блочный */
}

/* ========== УЛУЧШЕНИЯ ТЕКСТОВ И ОТСТУПОВ В КАРТОЧКАХ ========== */

/* Карточки занимают всю ширину контейнера в обычном сайте */
body:not(.twa-mode) .admin-card.mj-task-card.stat-card {
    width: 100%;
    margin: 0 0 25px 0; /* Увеличиваем отступ между карточками */
    padding: 20px 24px !important; /* Увеличиваем внутренние отступы */
    box-sizing: border-box;
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block !important; /* Принудительно блочный */
}

body:not(.twa-mode) .admin-card.mj-task-card.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: #444;
}

/* Улучшаем заголовки карточек */
body:not(.twa-mode) .mj-task-card .card-header {
    margin-bottom: 16px !important; /* Увеличиваем отступ от заголовка */
    padding-right: 50px !important; /* Больше места для меню */
}

body:not(.twa-mode) .mj-task-card .card-header small {
    font-size: 0.85em !important; /* Чуть больше размер */
    color: #a0a0a0 !important; /* Улучшаем читаемость */
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Улучшаем отображение пользовательской информации */
body:not(.twa-mode) .mj-task-user-info {
    margin-bottom: 12px !important;
}

body:not(.twa-mode) .mj-task-user-info .mj-task-user {
    color: #64b5f6 !important; /* Выделяем пользователя */
    font-weight: 500 !important;
}

/* Улучшаем отображение промпта */
body:not(.twa-mode) .mj-task-prompt-text {
    font-size: 0.95em !important; /* Чуть больше размер */
    line-height: 1.5 !important; /* Улучшаем читаемость */
    color: #c8c8c8 !important;
    margin-bottom: 16px !important; /* Больше отступ снизу */
    white-space: normal !important; /* Разрешаем перенос строк */
    overflow: visible !important; /* Показываем полный текст */
    text-overflow: initial !important;
    font-style: italic !important; /* Делаем курсив для TWA и Сайта */
}

/* Улучшаем контейнер изображений */
body:not(.twa-mode) .mj-task-image-container {
    margin-bottom: 16px !important; /* Больше отступ снизу */
    border-radius: 8px !important; /* Современные закругления */
}

/* Улучшаем панель действий */
body:not(.twa-mode) .mj-task-actions-panel {
    margin-top: 16px !important; /* Больше отступ сверху */
}

body:not(.twa-mode) .mj-task-actions-panel .adg-button {
    background-color: #2a2a2a !important; /* Темнее фон */
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    font-size: 13px !important;
    padding: 10px 14px !important; /* Чуть больше отступы */
}

body:not(.twa-mode) .mj-task-actions-panel .adg-button:hover {
    background-color: #3a3a3a !important;
    border-color: #64b5f6 !important;
}

/* Меню карточки - позиционирование переведено в admin_midjourney.css */
body:not(.twa-mode) .mj-card-menu {
    top: 18px !important; /* Выравнивание по высоте заголовка */
    right: 20px !important;
}

/* Share меню карточки - добавляем для консистентности */
body:not(.twa-mode) .mj-card-share {
    top: 18px !important; /* Выравнивание на том же уровне с actions menu */
    right: 72px !important; /* Больше отступ для компенсации увеличенного padding */
}

/* Главная страница - иконки модулей - стили перенесены в admin_specific.css */

/* Формы и админские страницы - чуть шире */
body:not(.twa-mode) .admin-form-page .form-container,
body:not(.twa-mode) .admin-news-form-page .form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

body:not(.twa-mode) .admin-generic-list-page .admin-items-container,
body:not(.twa-mode) .admin-users-page .admin-items-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Улучшения для error-контейнера */
body:not(.twa-mode) .media-upload-error {
    max-width: 600px;
    margin: 10px auto;
    padding: 12px 16px;
    background: #2d1f1f;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    color: #ff9999;
    text-align: center;
}

/* Область предпросмотра файлов */
body:not(.twa-mode) .mj-file-preview-area {
    max-width: 600px;
    margin: 0 auto 20px auto;
    padding: 0 20px;
}

/* ========== СТИЛИ ДЛЯ TWA РЕЖИМА ========== */

/* TWA - полная ширина, адаптивность */
body.twa-mode .admin-page,
body.twa-mode .module-page-container,
body.twa-mode .wallet-page,
body.twa-mode .news-feed-page,
body.twa-mode .friends-page,
body.twa-mode .user-midjourney-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0px;
    box-sizing: border-box;
}

/* TWA - поля ввода на всю ширину */
body.twa-mode .mj-creation-bar-container,
body.twa-mode .search-bar-container,
body.twa-mode .prompt-input-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 7px 5px;
    background: #212121;
    border-top: 1px solid #4a4a4a;
}

body.twa-mode .mj-creation-bar,
body.twa-mode .search-bar,
body.twa-mode .prompt-input {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

body.twa-mode .mj-creation-bar textarea,
body.twa-mode .mj-creation-bar input[type="text"],
body.twa-mode .mj-creation-bar .adg-form-input,
body.twa-mode .search-bar input,
body.twa-mode .prompt-input input,
body.twa-mode .prompt-input textarea {
    flex: 1;
    background-color: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 8px !important;
    transition: height 0.2s ease !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* TWA - контент на всю ширину с минимальными отступами */
body.twa-mode .admin-cards-list {
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 5px; /* Минимальные отступы контейнера */
}

/* TWA - карточки задач на всю ширину БЕЗ боковых отступов (исправление конфликта) */
body.twa-mode .admin-card.mj-task-card.stat-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 15px 0 !important; /* ИСПРАВЛЕНО: убраны боковые отступы для консистентности */
    box-sizing: border-box;
}

/* TWA - главная страница на всю ширину */
body.twa-mode .admin-dashboard-grid-container {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 20px;
}

/* TWA - убираем ограничения ширины для ключевых контейнеров */
body.twa-mode .admin-page,
body.twa-mode .twa-page-container,
body.twa-mode .admin-generic-list-page,
body.twa-mode .admin-page .admin-cards-list {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========== ОБЩИЕ СТИЛИ ========== */

/* Изображения адаптивные */
.image-container,
.mj-task-card .mj-image-container,
.news-media-container img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Спиннеры и индикаторы */
.loading-indicator,
.no-items-message {
    text-align: center;
    padding: 20px;
    color: #888;
    /* Добавляем flex для правильного центрирования */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

/* Когда индикатор показывается через style="display: none/block", устанавливаем flex */
.loading-indicator[style*="display: block"],
.loading-indicator[style*="display: flex"],
.loading-indicator:not([style*="display: none"]):not([style=""]) {
    display: flex !important;
}

.scroll-sentinel {
    height: 1px;
    visibility: hidden;
}

/* ========== РЕЗЮМЕ ЕДИНОЙ ШИРИНЫ ========== */

/*
ОБНОВЛЕНО: Все контейнеры приведены к единой ширине 600px для обычного сайта:

✅ Основные контейнеры страниц (.admin-page, .module-page-container, .wallet-page, .news-feed-page, .friends-page, .user-midjourney-page)
✅ Поле ввода (.mj-creation-bar-container) 
✅ Лента карточек (.admin-cards-list)
✅ Админ панель (.admin-dashboard-grid-container, .admin-icons-grid) 
✅ Формы (.admin-form-page .form-container, .admin-news-form-page .form-container)
✅ Админ списки (.admin-items-container)
✅ Контейнеры ошибок (.media-upload-error)
✅ Область предпросмотра (.mj-file-preview-area)
✅ Основные контейнеры main.css (.container)

Это обеспечивает единообразный дизайн всех страниц обычного сайта.
*/

/* Центрирование всех специфичных административных страниц */
body:not(.twa-mode) .admin-page.admin-dashboard-stats-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-referral-settings-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-user-form-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-form-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-users-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-mailing-form-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-plan-form-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-plans-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-payment-settings-page.twa-page-container,
body:not(.twa-mode) .admin-page.admin-news-form-page.twa-page-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 40px;
    display: block !important; /* Принудительно блочный */
}

/* Центрирование контейнеров списков для специфичных страниц */
body:not(.twa-mode) .admin-page.admin-users-page .admin-cards-list,
body:not(.twa-mode) .admin-page.admin-plans-page .admin-cards-list,
body:not(.twa-mode) .admin-page.admin-payment-settings-page .admin-cards-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    display: block !important; /* Принудительно блочный */
}

/* Центрирование пользовательских страниц */
body:not(.twa-mode) .user-notifications-page.twa-page-container,
body:not(.twa-mode) .user-settings-page.twa-page-container,
body:not(.twa-mode) .news-feed-page.twa-page-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 40px;
    display: block !important; /* Принудительно блочный */
}

/* ========== RESPONSIVE ИСПРАВЛЕНИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ========== */

/* Мобильные устройства (до 767px) - исправляем все фиксированные ширины */
@media (max-width: 767px) {
    /* КРИТИЧНО: Переопределяем все фиксированные ширины для мобильных */
    body:not(.twa-mode) .container.friends-page,
    body:not(.twa-mode) .container.subscriptions-page,
    body:not(.twa-mode) .container.profile-page,
    body:not(.twa-mode) .container.news-feed-page,
    body:not(.twa-mode) .admin-layout-container,
    body:not(.twa-mode) .admin-main-content {
        width: 100% !important; /* Полная ширина на мобильных */
        max-width: none !important; /* Убираем ограничения */
        margin: 0 !important; /* Убираем margin */
        padding: 15px 10px !important; /* Минимальные отступы */
    }
    
    /* Админские страницы - адаптивная ширина */
    body:not(.twa-mode) .admin-page,
    body:not(.twa-mode) .module-page-container,
    body:not(.twa-mode) .wallet-page,
    body:not(.twa-mode) .news-feed-page,
    body:not(.twa-mode) .friends-page,
    body:not(.twa-mode) .user-midjourney-page {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }
    
    /* Панель создания - адаптивная для мобильных */
    body:not(.twa-mode) .admin-page .mj-creation-bar-container,
    body:not(.twa-mode) .admin-page #creationBarContainer,
    body:not(.twa-mode) .admin-page div.mj-creation-bar-container {
        width: calc(100% - 20px) !important; /* Полная ширина с отступами */
        max-width: none !important;
        margin: 10px 10px 15px 10px !important; /* Меньшие отступы */
        padding: 15px !important; /* Компактные отступы */
        left: 0 !important;
        right: 0 !important;
        position: relative !important; /* Обычное позиционирование на мобильных */
        top: auto !important;
    }
    
    /* Пользовательские страницы - адаптивные */
    body:not(.twa-mode) .user-notifications-page.twa-page-container,
    body:not(.twa-mode) .user-settings-page.twa-page-container,
    body:not(.twa-mode) .news-feed-page.twa-page-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px 20px 10px !important;
    }
}

/* Планшеты (768px - 1023px) - умеренные ограничения ширины */
@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.twa-mode) .container.friends-page,
    body:not(.twa-mode) .container.subscriptions-page,
    body:not(.twa-mode) .container.profile-page,
    body:not(.twa-mode) .container.news-feed-page,
    body:not(.twa-mode) .admin-layout-container,
    body:not(.twa-mode) .admin-main-content,
    body:not(.twa-mode) .admin-page,
    body:not(.twa-mode) .module-page-container {
        width: 100% !important;
        max-width: 750px !important; /* Больше чем на мобильных, но меньше 600px фикса */
        margin: 0 auto !important;
        padding: 20px !important;
    }
    
    /* Панель создания для планшетов */
    body:not(.twa-mode) .admin-page .mj-creation-bar-container,
    body:not(.twa-mode) .admin-page #creationBarContainer,
    body:not(.twa-mode) .admin-page div.mj-creation-bar-container {
        width: 100% !important;
        max-width: 750px !important;
        margin: 15px auto 20px auto !important;
        padding: 18px !important;
    }
}

/* Очень маленькие экраны (до 480px) - минимальные отступы */
@media (max-width: 480px) {
    body:not(.twa-mode) .container.friends-page,
    body:not(.twa-mode) .container.subscriptions-page,
    body:not(.twa-mode) .container.profile-page,
    body:not(.twa-mode) .container.news-feed-page,
    body:not(.twa-mode) .admin-layout-container,
    body:not(.twa-mode) .admin-main-content,
    body:not(.twa-mode) .admin-page,
    body:not(.twa-mode) .module-page-container {
        padding: 10px 5px !important; /* Минимальные отступы */
    }
    
    /* Панель создания - минимальные отступы */
    body:not(.twa-mode) .admin-page .mj-creation-bar-container,
    body:not(.twa-mode) .admin-page #creationBarContainer,
    body:not(.twa-mode) .admin-page div.mj-creation-bar-container {
        margin: 5px 5px 10px 5px !important;
        padding: 10px !important;
        width: calc(100% - 10px) !important;
    }
}