/**
 * Mobile стили приложения Kareta
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * ДЛЯ AI-АССИСТЕНТА: RESPONSIVE-ФАЙЛ ДЛЯ РАЗМЕРОВ
 * ═══════════════════════════════════════════════════════════════════════════
 * В main.css НЕТ свойств размеров. Все размеры (padding, font-size, margin,
 * gap, width, height и т.д.) задаются ТОЛЬКО в responsive-файлах.
 *
 * Этот файл — для экранов до 576px. При добавлении размеров для мобильных
 * вставлять правила в @media (max-width: 576px).
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Подключается с media="(max-width: 576px)".
 * Содержит ТОЛЬКО правила внутри @media для мобильных экранов.
 */

/* ============================================
   Медиа-запрос для экранов до 576px
   ============================================ */

@media (max-width: 576px) {
    .copy-test-icon {
        font-size: 0.8rem;
    }
    .public-header-spare-parts-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    body:has(.public-fab-stack--top) .public-header__bar > .public-header-spare-parts-link {
        margin-top: 4.25rem;
    }
    .modern-login-card .input-group .form-control {
        padding-left: 0.75rem;
    }
    .comparison-table th,
    .comparison-table td {
        width: 1%;
        min-width: 80px;
    }
    .comparison-photo-cell {
        padding: 0.5rem !important;
    }
    .comparison-photo-cell .comparison-car-no-photo {
        min-height: 80px;
    }
    .custom-select-dropdown .dropdown-item {
        padding: 0.5rem 1rem;
    }
    .user-status-dot {
        width: 8px;
        height: 8px;
    }
    #contactSellerModal .contact-seller-avatar-circle {
        width: 5rem;
        height: 5rem;
        font-size: 1.75rem;
        border: 2px solid rgba(255, 255, 255, 0.95);
    }
    #contactSellerModal .contact-seller-presence-dot {
        width: 0.875rem;
        height: 0.875rem;
        bottom: 0.125rem;
        right: 0.125rem;
    }
    #contactSellerModal .contact-seller-presence-inner-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #f59e0b;
    }
    #contactSellerModal .contact-seller-presence-inner-square {
        width: 5px;
        height: 5px;
        border-radius: 2px;
        background: #fff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    }
    .milestone-year {
        font-size: 0.8em;
        line-height: 1.6;
        padding: 0 0.4em;
    }
    #notificationsModal .modal-header .btn i,
    #notificationsModal .modal-header .btn i.fa,
    #notificationsModal .modal-header .btn i.fas,
    #notificationsModal .modal-header .btn i.fa-sync-alt,
    #notificationsModal .modal-header .btn i.fa-check-double {
        font-size: 1rem;
    }
    .markalar-page-title {
        line-height: 1.15;
    }
    .model-spec-value {
        line-height: 1.4;
    }
    .markalar-brand-prefix {
        margin-bottom: 0.2rem;
    }
    .markalar-comparison-table th:first-child,
    .markalar-comparison-table td:first-child,
    .markalar-vs-table th:first-child,
    .markalar-vs-table td:first-child {
        min-width: 6rem;
    }
    .markalar-model-specs-table th:first-child,
    .markalar-model-specs-table td:first-child {
        min-width: 6rem;
    }
    .markalar-error-table th:first-child,
    .markalar-error-table td:first-child {
        min-width: 5rem;
    }
    /* Сообщения: лента диалога в модалке — скролл */
    .conversation-thread-scroll {
        max-height: 400px;
        overflow-y: auto;
    }

    /* Чат (Card Style) — переменные и размеры */
    :root {
        --chat-message-radius: 16px;
        --chat-input-radius: 16px;
        --chat-animation-duration: 0.35s;
        --chat-slide-offset: 12px;
        --chat-modal-max-width: calc(100vw - 12px);
        --chat-modal-max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        --chat-modal-min-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .chat-container {
        width: 100%;
        max-width: var(--chat-modal-max-width);
        margin: 0 auto;
        border-radius: 20px;
        min-height: var(--chat-modal-min-height);
        max-height: var(--chat-modal-max-height);
    }
    .chat-header {
        padding: 16px 20px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-right: 48px;
    }
    .chat-header__title {
        font-size: 18px;
        margin: 0 0 2px 0;
    }
    .chat-header__status {
        font-size: 13px;
        margin: 0;
    }
    .chat-header__close {
        top: 16px;
        right: 20px;
        padding: 0.25rem;
        font-size: 1.25rem;
    }
    .chat-body {
        padding: 12px 14px;
        padding-bottom: 12px;
    }
    .chat-skeleton {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 8px 4px;
        box-sizing: border-box;
    }
    .chat-skeleton-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-width: 70%;
        animation: chatPulse 1.5s infinite ease-in-out;
    }
    .chat-skeleton-item--left {
        align-self: flex-start;
    }
    .chat-skeleton-item--right {
        align-self: flex-end;
    }
    .chat-skeleton-bubble {
        height: 44px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.08);
    }
    .chat-skeleton-item--left .chat-skeleton-bubble {
        border-bottom-left-radius: 4px;
        width: 180px;
    }
    .chat-skeleton-item--right .chat-skeleton-bubble {
        border-bottom-right-radius: 4px;
        width: 220px;
        background: rgba(99, 102, 241, 0.15);
    }
    .chat-skeleton-time {
        height: 10px;
        width: 40px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.05);
    }
    .chat-skeleton-item--left .chat-skeleton-time {
        align-self: flex-start;
    }
    .chat-skeleton-item--right .chat-skeleton-time {
        align-self: flex-end;
    }
    @keyframes chatPulse {
        0% { opacity: 0.6; }
        50% { opacity: 0.3; }
        100% { opacity: 0.6; }
    }
    .chat-body::-webkit-scrollbar {
        width: 6px;
    }
    .chat-body::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
    .message-group {
        margin-bottom: 12px;
    }
    .message {
        max-width: 75%;
        padding: 14px 18px;
        font-size: 15px;
        line-height: 1.5;
    }
    .message-time {
        font-size: 11px;
        letter-spacing: 0.3px;
        margin-top: 6px;
    }
    .chat-input {
        padding: 12px 16px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }
    .chat-input__field {
        min-height: 48px;
        border-radius: var(--chat-input-radius);
        border: 2px solid var(--chat-input-border);
        padding: 12px 16px;
        font-size: 16px;
    }
    .chat-input__location {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
    .chat-input__send {
        width: 50px;
        height: 50px;
        border-radius: var(--chat-input-radius);
    }
    /* .message padding applies; do not override — keeps proposal bubbles aligned with plain text */
    .message-proposal-icon { font-size: 1.25rem; margin-bottom: 4px; }
    .message-proposal-car { font-size: 0.95rem; margin-bottom: 2px; }
    .message-proposal-price { font-size: 1.1rem; margin-bottom: 6px; }
    .message-proposal-content .message-text { margin-top: 4px; }
    .proposal-actions { gap: 6px; }
    .proposal-action-btn { font-size: 0.8rem; }
    .proposal-counter-form .proposal-counter-input { max-width: 140px; font-size: 16px; }
    .proposal-counter-form .form-control-sm { font-size: 16px; }
    #conversationModal .modal-dialog {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
        height: 100dvh;
        max-height: 100dvh;
    }
    #conversationModal .modal-content {
        border-radius: 0 !important;
        height: 100%;
        border: none;
    }
    #conversationModal .chat-container {
        min-height: 100dvh;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0 !important;
    }
    #conversationReplyAlert.alert {
        font-size: 0.875rem;
    }

    /* Логотипы */
    .navbar-logo {
        height: 32px;
        max-width: 150px;
    }
    
    .login-logo {
        height: 60px;
    }
    
    .navbar-brand span {
        font-size: 0.9rem;
    }
    
    .navbar-welcome-inline {
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 45%;
        min-width: 0;
    }
    
    /* Кнопка меню (3 полоски) — без фона */
    .navbar-toggler,
    .navbar-toggler:focus,
    .navbar-toggler:hover,
    .navbar-toggler:not(.collapsed) {
        background-color: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }
    
    /* Навигация */
    .navbar-nav .nav-link .btn-text {
        color: #ffffff;
    }
    
    .navbar-nav-flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navbar-nav-flex .nav-item {
        width: 100%;
        margin: 0;
    }
    
    .navbar-nav-flex .nav-link {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    /* Свёрнутый навбар (<lg): прокрутка до последнего пункта + safe area */
    #navbarNav.navbar-collapse {
        max-height: min(92dvh, calc(100dvh - 3rem - env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* Разделители секций в коллапсе вместо символа «|» */
    .navbar-nav-flex .navbar-divider-item {
        width: 100%;
        margin: 0.4rem 0 0;
        padding: 0.5rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        min-height: 0;
        list-style: none;
    }

    .navbar-nav-flex .navbar-divider-item .navbar-text {
        display: none;
    }

    /* Подменю на ширину коллапса, без Popper-сдвига за край */
    #navbarNav.navbar-collapse .dropdown-menu {
        position: static;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        margin-top: 0.25rem;
    }

    /* Бейджи уведомлений/сообщений: в потоке справа, не обрезаются overflow-x коллапса */
    #navbarNav.navbar-collapse #notificationsNavLink,
    #navbarNav.navbar-collapse #messagesNavLink {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.35rem;
    }

    #navbarNav.navbar-collapse #notificationsNavLink .btn-text,
    #navbarNav.navbar-collapse #messagesNavLink .btn-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    #navbarNav.navbar-collapse #navNotificationsBadge,
    #navbarNav.navbar-collapse #navUnreadCount {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: auto;
        flex-shrink: 0;
        top: auto;
    }
    
    /* Блок переключения компании (админ) — touch-friendly на мобильных */
    .admin-company-context-bar {
        min-height: 52px;
    }
    .admin-company-switcher-block {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .admin-company-switcher-btn {
        min-width: 100%;
        min-height: 44px;
        padding: 0.6rem 1rem;
        white-space: normal;
        text-align: center;
    }
    .admin-company-switcher-block .dropdown-menu {
        max-height: 70vh;
    }
    
    /* Кнопки действий: каждая в одну линию на мобильной, название кнопки всегда видно */
    .actions-buttons-row {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
        gap: 0.5rem;
    }
    .actions-buttons-row .btn {
        width: 100%;
    }
    .actions-buttons-row .btn .btn-text {
        display: inline !important;
    }

    /* Универсально: шапка карточки с кнопкой — перенос на мобильном */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-header.d-flex .btn {
        width: 100%;
    }
    /* Блок кнопок в ряд (например диагностика) — перенос */
    .card-body > .mb-4:not(.car-details-gallery-wrapper) {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-body > .mb-4:not(.car-details-gallery-wrapper) .btn {
        min-width: 0;
    }

    /* Страница истории: шапка с кнопками — заголовок первая строка, кнопки с новой строки */
    .history-page .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start;
    }
    .history-page .history-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .history-page .history-header-actions .btn {
        margin-right: 0 !important;
    }
    .history-page .container-fluid {
        max-width: 100%;
    }
    .history-page .card,
    .history-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }

    /* companies-page */
    .companies-page .container-fluid,
    .companies-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }

    /* diagnostics-page: кнопки в .mb-4 уже через универсальное .card-body > .mb-4 */
    .diagnostics-page .card,
    .diagnostics-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }

    /* notes-page: шапка карточки через универсальное .card-header.d-flex */
    .notes-page .card,
    .notes-page .container-fluid {
        max-width: 100%;
        min-width: 0;
    }

    /* Превью заметки — максимум 3 строки */
    .notes-page .card-text-min-height {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Просмотр заметки — по центру экрана */
    #viewNoteModal .modal-dialog {
        align-items: center;
        margin: 1rem auto;
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
    }

    #viewNoteModal .modal-content {
        border-radius: 1rem;
    }

    #viewNoteModal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* profile-page */
    .profile-page .alert.d-flex {
        flex-wrap: wrap;
    }
    .profile-page .alert .btn {
        margin-top: 0.5rem;
    }
    .profile-page .container-fluid,
    .profile-page .card {
        max-width: 100%;
        min-width: 0;
    }

    /* updates-page */
    .updates-page .nav-tabs {
        flex-wrap: wrap;
    }
    .updates-page .nav-tabs .nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    .updates-page .card-header.d-flex .btn {
        width: 100%;
    }
    .updates-page .container-fluid,
    .updates-page .card {
        max-width: 100%;
        min-width: 0;
    }

    /* logs-page */
    .logs-page .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .logs-page .d-flex.justify-content-between .btn {
        width: 100%;
    }
    .logs-page .container-fluid,
    .logs-page .card,
    .logs-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }
    .logs-page .container-fluid {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .logs-page #filterForm .form-control,
    .logs-page #filterForm .form-select {
        min-height: var(--btn-min-height-touch);
        font-size: 16px;
    }
    .logs-page #toggleFiltersBtn,
    .logs-page #resetFiltersBtn,
    .logs-page #copyAllErrorsBtn {
        min-height: var(--btn-min-height-touch);
    }
    .logs-page .quick-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 0.25rem;
    }
    .logs-page .quick-filters .quick-filter-btn {
        flex: 0 0 auto;
        min-height: var(--btn-min-height-touch);
        font-size: 0.85rem;
        white-space: nowrap;
    }
    .logs-page #logsMobileList .card {
        border-radius: 0.875rem;
    }
    .logs-page #logsMobileList .fw-semibold {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .logs-page #pagination .page-link {
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .logs-page #logDetailsModal .modal-dialog {
        max-width: min(600px, calc(100% - 1rem));
        width: 100%;
        margin: 0 auto;
        min-height: calc(100dvh - 1rem);
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
    .logs-page #logDetailsModal .modal-content {
        border-radius: 1rem;
    }

    /* archived-listings-page */
    .archived-listings-page .container-fluid,
    .archived-listings-page .card,
    .archived-listings-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }

    /* archived-listings-page: карточный вид таблицы #archivedListingsTable */
    .archived-listings-page #archivedListingsTable thead {
        display: none;
    }
    .archived-listings-page #archivedListingsTable tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .archived-listings-page #archivedListingsTable tbody td {
        display: block;
        padding: 0.5rem 0;
        text-align: left;
        border: none;
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .archived-listings-page #archivedListingsTable tbody td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 40%;
        color: #495057;
    }
    .archived-listings-page #archivedListingsTable tbody td:last-child:before {
        display: none;
    }
    .archived-listings-page #archivedListingsTable tbody td:last-child {
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }
    .archived-listings-page #archivedListingsTable tbody td:last-child .btn {
        width: 100%;
        justify-content: center;
        min-height: var(--btn-min-height-touch);
    }
    .archived-listings-page #archivedListingsTable tbody td[colspan]:before {
        display: none;
    }

    /* Баланс кассы */
    .cash-balance-badge {
        padding: 0.375rem 0.75rem;
        width: 100%;
        text-align: center;
    }
    
    .cash-balance {
        font-size: 1.1rem;
    }
    
    .cash-balance-badge .text-muted {
        display: block;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    
    /* Модальные окна — по центру экрана (вертикаль и горизонталь), safe area */
    .modal-dialog {
        max-width: min(600px, calc(100% - 1rem));
        width: 100%;
        margin: 0 auto;
        min-height: calc(100dvh - 1rem);
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
    .modal-dialog.modal-lg {
        max-width: min(800px, calc(100% - 1rem));
    }
    .modal-dialog.modal-xl {
        max-width: min(1140px, calc(100% - 1rem));
    }
    
    .modal-content {
        border-radius: 1rem;
        margin: 0;
        width: 100%;
        max-height: calc(100dvh - 2rem);
        display: flex;
        flex-direction: column;
    }
    
    /* «Связаться» и цепочка (авто/запчасти): карточка по центру, отступы сверху/снизу, не bottom-sheet */
    #contactSellerModal .modal-dialog,
    #proposePriceModal .modal-dialog,
    #sendMessageModal .modal-dialog,
    #contactPartSellerModal .modal-dialog,
    #proposePartPriceModal .modal-dialog,
    #sendPartMessageModal .modal-dialog {
        max-width: min(600px, calc(100% - 1rem));
        width: 100%;
        height: auto;
        min-height: calc(100vh - 1.5rem);
        min-height: calc(100dvh - 1.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: max(0.5rem, env(safe-area-inset-top, 0px));
        margin-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }
    #contactSellerModal .modal-content,
    #proposePriceModal .modal-content,
    #sendMessageModal .modal-content,
    #contactPartSellerModal .modal-content,
    #proposePartPriceModal .modal-content,
    #sendPartMessageModal .modal-content {
        border-radius: 1rem;
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
    }
    
    .modal-header {
        padding: 1rem;
        flex-shrink: 0;
    }
    
    .modal-header .btn-close {
        width: 2rem;
        height: 2rem;
    }
    
    .modal-header .btn-close::before {
        font-size: 1.4rem;
    }
    
    .modal-title {
        font-size: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
        overflow-y: auto;
        flex: 1;
        max-height: none;
    }
    
    .modal-body .form-control,
    .modal-body .form-select {
        padding: 0.75rem;
        font-size: 16px; /* Предотвращает зум на iOS */
    }
    
    .modal-footer {
        padding: 1rem;
        flex-shrink: 0;
        border-top: 2px solid #e9ecef;
    }
    
    .modal-footer .btn {
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-size-md);
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
    }

    /* Карта «адрес компании» в настройках: не bottom-sheet, полный экран под карту */
    #saleLocationMapModal .modal-dialog {
        align-items: stretch;
        max-width: 100%;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }
    #saleLocationMapModal .modal-dialog.modal-lg {
        max-width: 100%;
    }
    #saleLocationMapModal .modal-content {
        border-radius: 0;
        max-height: none;
        height: 100%;
        min-height: 100%;
    }
    #saleLocationMapModal .modal-header {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    }
    #saleLocationMapModal .modal-body {
        overflow: hidden;
    }
    #saleLocationMapModal .modal-footer {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
    
    /* Шапка и футер — full-width на мобильных */
    .public-header .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
    }
    .modern-footer .container-fluid {
        max-width: 100vw !important;
        width: 100% !important;
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
        box-sizing: border-box;
    }
    .modern-footer .footer-content,
    .modern-footer .footer-bottom .row {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .modern-footer .footer-content > [class*="col-"],
    .modern-footer .footer-bottom [class*="col-"] {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    /* Футер */
    .modern-footer {
        padding: 1.5rem 0 1rem;
    }
    
    .footer-section-title {
        font-size: 0.9rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-links li,
    .footer-contact li {
        margin-bottom: 0.5rem;
    }
    
    /* Таблица машин - кнопки */
    #carsTable .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    #carsTable .btn-group .btn {
        width: 100%;
        justify-content: flex-start;
        padding: var(--btn-padding-md);
        text-align: left;
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
    }
    
    #carsTable .btn-group .btn i {
        margin-right: 0.5rem;
        width: 1.25rem;
        text-align: center;
        display: inline-block;
    }
    
    /* Таблица машин на index.php — карточный вид на всём мобильном диапазоне (≤576px) */
    #carsTable thead {
        display: none;
    }
    #carsTable tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    #carsTable tbody td {
        display: block;
        padding: 0.5rem 0;
        text-align: left;
        border: none;
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    #carsTable tbody td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        display: inline-block;
        width: 40%;
        color: #495057;
    }
    #carsTable tbody td.actions-cell:before {
        display: none;
    }
    #carsTable tbody td.actions-cell {
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }
    #carsTable tbody td[colspan]:before {
        display: none;
    }
    
    /* Кнопки в формах */
    .row.mb-3 .col-12 .btn {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    .row.mb-3 .col-12 .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Страница логина и регистрации — мобильные размеры */
    body.login-page .container {
        padding: 0.75rem max(0.75rem, var(--safe-area-left));
        padding-right: max(0.75rem, var(--safe-area-right));
        padding-bottom: 1rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Исключаем .public-header .container из стилей body.login-page .container */
    body.login-page .public-header .container {
        flex: none;
        display: block;
        align-items: normal;
        justify-content: normal;
        padding-left: 0 !important; /* Убираем padding, используем margin логотипа */
        padding-right: max(0.75rem, var(--safe-area-right)) !important;
    }
    
    body.login-page .public-header .logo-container {
        margin-left: 15px; /* Отступ 15px от левого края (0 + 15 = 15px) */
        padding-left: 0;
        margin-right: 0;
    }
    
    body.login-page .row.justify-content-center {
        margin-left: 0;
        margin-right: 0;
    }
    
    body.login-page .row .col-md-5 {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .login-card {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .modern-login-card {
        border-radius: 1rem;
        margin-bottom: 0;
    }
    
    .modern-login-card .card-body {
        padding: 1.25rem 1rem !important;
    }
    
    .modern-login-card h2 {
        font-size: 1.35rem;
        margin-bottom: 0.35rem !important;
    }
    
    .modern-login-card .text-muted.mb-0 {
        font-size: 0.9rem;
    }
    
    .modern-login-card .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }
    
    .modern-login-card .input-group-text {
        padding: 0.75rem 1rem;
    }
    .modern-login-card .input-group-text i {
        font-size: 1.1rem;
    }
    .modern-login-card .btn-primary {
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-size-lg);
    }
    .modern-login-card #forgotPasswordLink {
        font-size: 0.9rem;
    }
    body.login-page .modern-footer {
        padding-bottom: 1.5rem;
    }
    
    .modern-login-card .input-group-lg .form-control,
    .modern-login-card .input-group-lg .input-group-text {
        padding: 0.6rem 0.75rem;
        font-size: 16px; /* 16px минимум — избегаем авто-зума на iOS при фокусе */
        min-height: 44px;
    }
    
    .modern-login-card .input-group-lg .input-group-text {
        padding-left: 0.75rem;
        padding-right: 0.6rem;
    }
    
    .modern-login-card .input-group-lg .input-group-text i {
        font-size: 1rem;
    }
    
    /* Кнопки показа/скрытия пароля — компактно на мобильных */
    .modern-login-card #togglePassword,
    .modern-login-card #toggleConfirmPassword {
        min-width: 44px;
        padding: 0.5rem;
    }
    
    .modern-login-card .btn-primary.btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
        min-height: 44px;
    }
    
    .modern-login-card .alert {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .modern-login-card .alert .btn-sm {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }
    
    .modern-login-card .form-text.text-muted {
        font-size: 0.8rem;
    }
    
    .modern-login-card .mb-3 {
        margin-bottom: 0.85rem !important;
    }
    
    .modern-login-card .text-center.mt-3 p {
        font-size: 0.9rem;
    }
    
    /* Страница деталей машины — ширина блоков на мобильных, без горизонтальных отступов */
    .container-fluid.car-details-page {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .car-details-page {
        padding: 0.5rem 0;
        padding-bottom: 2rem;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .car-details-page .row {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .car-details-page .row > [class*="col-"] {
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .car-details-page .btn-secondary {
        padding: 0.75rem 1.5rem;
    }
    .car-details-page .card {
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .car-details-page .card-header {
        padding: 0.875rem 0;
        border-radius: 0.75rem 0.75rem 0 0;
    }
    
    .car-details-page .card-header h5 {
        font-size: 1rem;
    }
    .car-details-page .card-header h5 i {
        margin-right: 0.5rem;
        font-size: 1.3rem;
    }
    .car-details-page .card-body .badge {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    /* Шапки карточек с кнопкой — перенос на мобильных, без overflow */
    .car-details-page .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .car-details-page .card-header .btn {
        width: 100%;
        margin-top: 0.25rem;
    }
    
    .car-details-page .card-body {
        padding: 0.875rem 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* На маленьких экранах убираем колонки, все в одну строку */
    .car-details-page .card-body .row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .car-details-page .card-body .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding: 0;
    }
    
    /* На маленьких экранах все данные в одну строку */
    .car-details-page .card-body p {
        font-size: 0.85rem;
        line-height: 1.6;
        padding: 0.4rem 0;
        display: inline-block; /* Элементы в одну строку на маленьких экранах */
        margin-right: 0.75rem; /* Отступ справа между элементами */
        margin-bottom: 0; /* Убираем нижний отступ */
        vertical-align: top; /* Выравнивание по верху */
    }
    
    .car-details-page .card-body p strong {
        min-width: auto; /* Убираем min-width: 100% */
        display: inline; /* Убираем display: block */
        margin-bottom: 0; /* Убираем нижний отступ */
        margin-right: 0.25rem; /* Небольшой отступ после метки */
        font-size: 0.9rem;
    }
    
    /* Разделитель между элементами */
    .car-details-page .card-body p:not(:last-child)::after {
        content: '|';
        margin-left: 0.5rem;
        color: #6c757d;
        opacity: 0.5;
    }
    
    .car-details-page .table-responsive {
        border-radius: 0.5rem;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Убеждаемся, что таблица занимает всю ширину */
    .car-details-page .table-responsive .table {
        width: 100% !important; /* Таблица должна занимать всю ширину table-responsive */
        margin: 0; /* Убираем маргины таблицы */
        border-collapse: separate; /* Раздельные границы для корректного отображения карточек */
        border-spacing: 0; /* Убираем промежутки между ячейками */
    }
    
    /* Математический расчет ширины карточки в пикселях для разных экранов: */
    /* Формула: Ширина карточки (px) = Ширина экрана (px) - (8px + 14px) * 2 = Ширина экрана - 44px */
    /* 320px экран: 320 - 44 = 276px (86.25% от экрана) */
    /* 375px экран: 375 - 44 = 331px (88.27% от экрана) */
    /* 414px экран: 414 - 44 = 370px (89.37% от экрана) */
    /* 430px экран: 430 - 44 = 386px (89.77% от экрана) */
    /* 576px экран: 576 - 44 = 532px (92.36% от экрана) */
    
    .car-details-page .table thead {
        display: none !important;
    }
    
    .car-details-page .table thead th,
    .car-details-page .table thead tr {
        display: none !important;
    }
    
    /* Убеждаемся, что tbody занимает всю ширину таблицы */
    .car-details-page .table tbody {
        display: block !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
    }
    
    .car-details-page .table tbody tr {
        display: block !important; /* 1 карточка в строке на мобильных */
        margin-bottom: 0.75rem; /* 12px - оптимизировано для компактности */
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 0.625rem; /* 10px - оптимизировано (было 12px) */
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        width: 100%; /* 1 карточка в строке - занимает всю доступную ширину */
        max-width: 100%; /* Ограничение максимальной ширины */
        box-sizing: border-box; /* Padding учитывается в ширине (10px * 2 = 20px) */
    }
    
    /* Ширина карточки с учетом padding: */
    /* Внутренняя ширина контента = Ширина карточки - padding (10px * 2 = 20px) */
    /* Например, для 320px экрана: 276px - 20px = 256px внутренняя ширина */
    
    .car-details-page .table tbody tr.table-info {
        background: linear-gradient(135deg, #e7f3ff 0%, #d1ecf1 100%);
        border: 2px solid #bee5eb;
    }
    
    .car-details-page .table tbody td {
        display: block !important;
        padding: 0;
        text-align: left;
        border: none !important;
        position: relative;
        padding-left: 0;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .car-details-page .table tbody td:first-child {
        padding-top: 0;
    }
    
    .car-details-page .table tbody td:before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #495057;
        font-size: 0.75rem;
        margin-bottom: 0.25rem; /* 4px - оптимизировано (было 6px) */
        padding-bottom: 0.2rem; /* 3.2px ≈ 3px - оптимизировано (было 4px) */
        border-bottom: 1px solid #e9ecef;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .car-details-page .table tbody td:last-child {
        padding-left: 0;
        margin-top: 0.5rem; /* 8px - оптимизировано (было 12px) */
        padding-top: 0.5rem; /* 8px - оптимизировано (было 12px) */
        border-top: 2px solid #dee2e6;
    }
    
    .car-details-page .table tbody td:last-child:before {
        display: block;
        margin-bottom: 0.375rem; /* 6px - оптимизировано (было 8px) */
        border-bottom: 1px solid #e9ecef;
    }
    
    /* Улучшение отображения значений в ячейках */
    .car-details-page .table tbody td > *:not(:first-child) {
        display: inline-block;
    }
    
    /* Строка с colspan для пустого состояния */
    .car-details-page .table tbody td[colspan] {
        text-align: center;
        padding: 1.5rem 0.5rem;
        width: 100%;
        display: block;
    }
    
    .car-details-page .table tbody td[colspan]:before {
        display: none;
    }
    
    /* Улучшение отображения содержимого ячеек */
    .car-details-page .table tbody td strong {
        font-weight: 600;
        color: #212529;
    }
    
    .car-details-page .table tbody td .text-muted {
        color: #6c757d;
        font-style: italic;
    }
    
    /* Кнопки действий в таблице */
    .car-details-page .table tbody td .btn {
        width: 100%;
        padding: 0.5rem;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .car-details-page .table tbody td .btn i {
        font-size: 1rem;
    }
    /* Названия кнопок на странице деталей машины всегда видно на мобильных */
    .car-details-page .btn .btn-text {
        display: inline !important;
    }
    
    .car-details-page .table tfoot {
        display: block !important;
        width: 100% !important; /* tfoot должен занимать всю ширину таблицы */
        margin-top: 0.75rem; /* 12px - оптимизировано (было 16px) */
        padding: 0.75rem; /* 12px - оптимизировано (было 16px) */
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 0.5rem;
        border: 2px solid #dee2e6;
        box-sizing: border-box; /* Padding учитывается в ширине */
    }
    
    .car-details-page .table tfoot tr {
        display: block;
        width: 100% !important; /* tr внутри tfoot должен занимать всю ширину */
        margin: 0;
        padding: 0;
    }
    
    .car-details-page .table tfoot th {
        display: block;
        padding: 0.5rem 0;
        font-size: 1.1rem;
        text-align: left;
    }
    
    /* Скрываем пустые th в tfoot */
    .car-details-page .table tfoot th:empty {
        display: none;
    }
    
    /* Скрываем th с colspan="2" которые не первая ячейка (последние два пустых th) */
    .car-details-page .table tfoot th[colspan="2"]:not(:first-child) {
        display: none;
    }
    
    /* Первая ячейка tfoot (colspan="2" с текстом "Итого") */
    .car-details-page .table tfoot th:first-child {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
    
    /* Третья ячейка tfoot (сумма) */
    .car-details-page .table tfoot th:nth-child(3) {
        font-weight: 700;
        font-size: 1.2rem;
        color: #212529;
        padding-top: 0.5rem;
        border-top: 2px solid #dee2e6;
        margin-top: 0.5rem;
    }
    
    /* Стили для строки с классом table-info (покупка) */
    .car-details-page .table tbody tr.table-info td {
        font-weight: 500;
    }
    
    .car-details-page .table tbody tr.table-info td strong {
        font-weight: 700;
        color: #0c5460;
    }
    
    /* Ячейки с текстом "-" */
    .car-details-page .table tbody td:only-child:not([data-label]) {
        color: #6c757d;
    }
    
    /* Блок истории изменений — только мобильные */
    .car-details-page .timeline {
        padding-left: 0;
        max-width: 100%;
        width: 100%;
    }
    .car-details-page .timeline::before {
        display: none;
    }
    .car-details-page .timeline-item {
        padding: 1rem;
        margin-bottom: 1rem;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0.75rem;
        border: 1px solid #e9ecef;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .car-details-page .timeline-item::before {
        display: none;
    }
    .timeline {
        padding-left: 2rem;
    }
    .timeline::before {
        left: 0.5rem;
        width: 2px;
    }
    .timeline-item .badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    .changes-list {
        padding: 1rem;
    }
    .changes-list ul li {
        padding: 0.5rem 0;
    }
    /* Элементы записи истории столбиком на мобильных */
    .car-details-page .history-item-parts {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        max-width: 100%;
    }
    .car-details-page .history-part {
        display: block;
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
    }
    .car-details-page .history-part.history-action {
        font-size: 1rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid #eee;
        margin-bottom: 0.25rem;
    }
    .car-details-page .history-part.history-date {
        font-size: 0.875rem;
    }
    .car-details-page .history-part.history-user {
        font-size: 0.8rem;
    }
    .car-details-page .history-part.history-changes {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid #f0f0f0;
    }
    .car-details-page .history-part.history-desc {
        font-size: 0.9rem;
        color: #495057;
    }
    .car-details-page #carHistoryList {
        max-width: 100%;
        width: 100%;
    }
    .car-details-page #carHistoryList .text-center.text-muted {
        padding: 1rem;
    }
    
    .expense-item {
        padding: 1rem;
    }
    .expense-item .row {
        margin: 0;
    }
    
    .expense-item .row > div {
        padding: 0;
        margin-bottom: 0.75rem;
    }
    
    .expense-item .row > div:last-child {
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }
    /* Форма расхода: колонки в столбик на мобильных */
    .car-details-page .expense-item .row {
        flex-direction: column;
    }
    .car-details-page .expense-item .row > [class*="col-"] {
        max-width: 100%;
        width: 100%;
    }
    
    .add-expense-btn,
    .remove-expense-btn {
        min-width: 44px;
        height: 44px;
    }
    .car-details-page .btn {
        padding: 0.625rem 1.25rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .car-details-page .btn:last-child {
        margin-bottom: 0;
    }
    
    .car-details-page .d-flex.gap-2 {
        flex-direction: column;
    }
    
    .car-details-page .d-flex.gap-2 .btn {
        width: 100%;
    }
    /* Блок формы добавления расходов */
    .car-details-page #addExpenseFormSection,
    .car-details-page #addExpenseFormSection .card,
    .car-details-page #addExpenseFormSection .card-body {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .car-details-page #addExpenseFormSection .expense-item,
    .car-details-page #addExpenseFormSection .expense-item .row,
    .car-details-page #addExpenseFormSection .expense-item [class*="col-"] {
        max-width: 100%;
        box-sizing: border-box;
    }
    .car-details-page #addExpenseFormSection .form-control {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Галерея фотографий */
    .car-details-page #carPhotosGallery {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    .car-details-page #carPhotosGallery .photo-item {
        max-width: 100%;
        box-sizing: border-box;
    }
    .car-details-page #carPhotosGallery .img-thumbnail {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    /* Галерея: на мобильных 2 колонки (col-6), без горизонтальных отступов */
    .car-details-page #carPhotosGallery .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0.25rem 0;
        box-sizing: border-box;
    }
    /* Страница сообщений — ширина блоков на мобильных */
    .container-fluid.messages-page {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .messages-page {
        padding: 0 0.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .messages-page .row {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .messages-page .row > [class*="col-"] {
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .messages-page .card {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .messages-page .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .messages-page .card-header .d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .messages-page .card-header .badge {
        max-width: 100%;
    }
    .messages-page .card-body {
        max-width: 100%;
        box-sizing: border-box;
    }
    .messages-page .btn-group {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }
    .messages-page .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    .messages-page .btn-group .btn:last-child {
        margin-bottom: 0;
    }
    .messages-page .card-header .d-flex.gap-2 .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .messages-page .card-header .d-flex.gap-2 .btn:last-child {
        margin-bottom: 0;
    }
    .messages-page #messagesList {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .messages-page #messagesList .list-group-item,
    .messages-page #messagesList .card,
    .messages-page #messagesList .border {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Страница архива (проданные машины) — ширина блоков на мобильных */
    .container-fluid.archive-page {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .archive-page {
        padding: 0 0.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .archive-page .row {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .archive-page .row > [class*="col-"] {
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .archive-page .card {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .archive-page .card-body {
        max-width: 100%;
        box-sizing: border-box;
    }
    .archive-page .d-flex.justify-content-between {
        max-width: 100%;
    }
    .archive-page .text-muted {
        max-width: 100%;
    }
    .archive-page .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    .archive-page #archiveTable {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .archive-page .alert {
        max-width: 100%;
        box-sizing: border-box;
    }
    .archive-page .row .col-12 .btn,
    .archive-page .card .card-body .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .archive-page .card .card-body .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Страница настроек — мобильный UX */
    .container-fluid.settings-page,
    .container.settings-page {
        max-width: 100vw;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
    .settings-page {
        padding: 0 0.125rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    .settings-page .row {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .settings-page .row > [class*="col-"] {
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .settings-page .settings-topbar {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 0.25rem);
        z-index: 50;
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
        border-radius: 0.75rem;
        padding: 0.6rem 0.7rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
    .settings-page .settings-title {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .settings-page .settings-edit-state {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.45rem 0.7rem;
        line-height: 1.2;
        white-space: normal;
    }
    .settings-page .card {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        border-radius: 0.9rem;
        overflow: hidden;
    }
    .settings-page .card-header h5 {
        font-size: 1rem;
        line-height: 1.3;
    }
    .settings-page .card-body {
        max-width: 100%;
        box-sizing: border-box;
        padding: 0.9rem 0.8rem;
    }
    .settings-page .form-label {
        font-size: 0.88rem;
        margin-bottom: 0.35rem;
    }
    .settings-page .form-control,
    .settings-page .form-select,
    .settings-page input[type="text"],
    .settings-page input[type="email"],
    .settings-page input[type="password"],
    .settings-page input[type="number"],
    .settings-page select.form-control,
    .settings-page textarea.form-control {
        max-width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        font-size: 16px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    .settings-page textarea.form-control {
        min-height: 96px;
    }
    .settings-page .form-check-input {
        width: 2.4rem;
        height: 1.35rem;
        margin-top: 0.2rem;
    }
    .settings-page .form-check-label {
        font-size: 0.95rem;
    }
    .settings-page .btn {
        min-height: 44px;
    }
    .settings-page .btn.btn-sm {
        min-height: 40px;
    }
    .settings-page .contact-item {
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0.75rem;
        padding: 0.75rem 0.7rem !important;
    }
    .settings-page .contact-item .row {
        margin-left: 0;
        margin-right: 0;
    }
    .settings-page .contact-item .row > [class*="col-"] {
        max-width: 100%;
        min-width: 0;
        margin-bottom: 0.7rem;
    }
    .settings-page .contact-item .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
    .settings-page .settings-actions,
    .settings-page .settings-location-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 100%;
    }
    .settings-page .settings-actions .btn,
    .settings-page .settings-location-actions .btn {
        width: 100%;
        margin: 0;
    }
    .settings-page .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    .settings-page .card-header.d-flex .btn {
        flex-shrink: 0;
    }
    #otpVerificationModal .modal-dialog {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
    }
    .settings-page .alert {
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0.75rem;
        padding: 0.75rem 0.8rem;
    }
    .settings-page .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .settings-page .table {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 0.86rem;
    }
    .settings-page .users-table-mobile {
        min-width: 100%;
    }
    .settings-page .users-table-mobile thead {
        display: none;
    }
    .settings-page .users-table-mobile tbody,
    .settings-page .users-table-mobile tr,
    .settings-page .users-table-mobile td {
        display: block;
        width: 100%;
    }
    .settings-page .users-table-mobile tr {
        border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
        border-radius: 0.75rem;
        padding: 0.5rem 0.7rem;
        margin-bottom: 0.6rem;
        background: var(--bs-body-bg, #fff);
    }
    .settings-page .users-table-mobile tr:last-child {
        margin-bottom: 0;
    }
    .settings-page .users-table-mobile td {
        border: 0;
        padding: 0.3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.6rem;
        text-align: right;
        word-break: break-word;
    }
    .settings-page .users-table-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color, #6c757d);
        text-align: left;
        flex: 0 0 46%;
    }
    .settings-page .users-table-mobile td[colspan] {
        display: block;
        text-align: center;
    }
    .settings-page .users-table-mobile td[colspan]::before {
        content: none;
    }
    .settings-page .settings-list-cards {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    .settings-page .settings-item-card {
        border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
        border-radius: 0.8rem;
        background: var(--bs-body-bg, #fff);
        padding: 0.65rem 0.75rem;
    }
    .settings-page .settings-item-card__title {
        margin-bottom: 0.45rem;
        word-break: break-word;
    }
    .settings-page .settings-item-card__meta {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.84rem;
        line-height: 1.35;
        margin-bottom: 0.25rem;
    }
    .settings-page .settings-item-card__label {
        color: var(--bs-secondary-color, #6c757d);
        font-weight: 600;
    }
    .settings-page .settings-item-card__actions {
        margin-top: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    .settings-page .settings-item-card__actions .btn {
        width: 100%;
        margin: 0;
    }
    .settings-page .badge {
        max-width: 100%;
        white-space: normal;
    }
    
    /* Модальное окно уведомлений */
    #notificationsModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        transform: none;
        display: flex;
        align-items: flex-start;
    }
    
    #notificationsModal .modal-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    
    #notificationsModal .modal-header {
        flex-shrink: 0;
        border-radius: 0;
    }
    
    #notificationsModal .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: none;
        padding: 0;
    }
    
    #notificationsModalList .list-group-item {
        padding: 0.5rem;
    }
    
    #notificationsModalList .list-group-item h6 {
        font-size: 0.85rem;
    }
    
    #notificationsModalList .list-group-item p {
        font-size: 0.8rem;
    }
    
    .notification-item h6 { font-size: 0.95rem; }
    .notification-item p { font-size: 0.875rem; line-height: 1.4; }
    .notification-item small { font-size: 0.75rem; }
    .notification-item .btn-group-vertical { min-width: 40px; }
    .notification-item .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
    
    /* Публичная страница — карточки машин */
    .public-page-wrapper .row > .col-lg-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #carsContainer {
        width: 100%;
        max-width: 100%;
    }
    .cars-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0 1rem;
    }
    .public-pagination-wrapper {
        padding: 0 1rem;
    }
    .car-card-body {
        padding: 1rem 1.25rem;
    }
    
    .car-card-title {
        font-size: 1.2rem;
        min-height: 1.3em;
        line-height: 1.3;
    }
    
    .car-card-price {
        font-size: 1.35rem;
        margin: 0.75rem 0;
    }
    
    .car-card-info {
        font-size: 0.875rem;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .car-card-seller {
        padding-top: 0.75rem;
        margin-top: 0.75rem;
        font-size: 0.875rem;
    }
    .car-card-seller small {
        margin-bottom: 0.4rem;
    }
    .car-card-buttons-wrap {
        gap: 0.25rem;
    }
    .car-card-favorite-wrap {
        top: 6px;
        left: 6px;
        gap: 0.25rem;
    }
    .car-card-compare-wrap-left {
        top: 6px;
        left: 6px;
    }
    .car-card-views-overlay {
        bottom: 0.5rem;
        right: 0.5rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    .dealer-badge-premium {
        padding: 0.3em 0.55em;
    }
    .car-card-specifications {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    .car-spec-item {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
    .car-spec-item i {
        font-size: 0.8rem;
    }
    .color-indicator-small {
        width: 10px;
        height: 10px;
        margin-right: 4px;
    }
    .color-indicator {
        width: 16px;
        height: 16px;
    }
    .custom-select-dropdown .dropdown-item .color-indicator {
        margin-right: 0.6rem;
    }
    
    .car-card-link {
        padding: 1rem 1.25rem;
    }
    .car-card-image-wrapper {
        height: 220px;
    }
    .car-card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom center;
    }
    .car-card-no-photo {
        height: 220px;
    }
    .car-card-no-photo-icon {
        font-size: 3rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-body {
        padding: 0.6rem 0.65rem 0.75rem;
    }
    .spare-parts-results-grid .sp-part-result-card h5.car-card-title {
        font-size: 0.875rem;
        line-height: 1.3;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-title.mb-1 {
        margin-bottom: 0.4rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-info {
        margin-bottom: 0.4rem;
        gap: 0.2rem;
        font-size: 0.72rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-info.mb-2 {
        margin-bottom: 0.4rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-price {
        font-size: 1rem;
        margin: 0.25rem 0 0.4rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-seller {
        margin-top: auto;
        padding-top: 0.4rem;
    }
    .spare-parts-results-grid .sp-part-result-card .car-card-seller small {
        margin-bottom: 0.25rem;
    }
    .car-card-favorite-wrap .car-card-favorite-btn,
    .car-card-favorite-wrap .car-card-compare-btn,
    .car-card-compare-wrap .car-card-compare-btn {
        padding: 0.3rem 0.45rem;
        min-width: 2rem;
        min-height: 2rem;
    }
    .modern-carousel {
        height: 220px;
    }
    .modern-carousel .carousel-inner {
        height: 100%;
    }
    .modern-carousel .carousel-item {
        height: 100%;
    }
    .modern-carousel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom center;
    }
    .modern-carousel .carousel-control-prev,
    .modern-carousel .carousel-control-next {
        width: 40px;
        height: 40px;
        top: 50%;
    }
    .modern-carousel .carousel-control-prev {
        left: 0.5rem;
    }
    .modern-carousel .carousel-control-next {
        right: 0.5rem;
    }
    .modern-carousel .carousel-indicators {
        bottom: 0.5rem;
        margin: 0;
    }
    .modern-carousel .carousel-indicators button {
        width: 8px;
        height: 8px;
        margin: 0 2px;
    }
    .car-photo-count {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .public-header {
        padding: 1rem 0;
        margin-bottom: 1.5rem;
    }

    /* Публичные страницы — ширина на максимум на мобильных */
    .public-page-wrapper .container-fluid,
    .public-page-wrapper #main-content {
        max-width: 100vw !important;
        width: 100% !important;
        padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
        box-sizing: border-box;
    }
    /* B.3: Safari/Chrome — отступ снизу под стек FAB; Android WebView: см. .public-page-wrapper--android-app в android.css */
    .public-page-wrapper:not(.public-page-wrapper--android-app) .container-fluid,
    .public-page-wrapper:not(.public-page-wrapper--android-app) #main-content {
        padding-bottom: var(--kareta-public-main-padding-bottom, calc(9.5rem + env(safe-area-inset-bottom, 0px))) !important;
    }

    /* public_car_details — карточка на всю ширину экрана, без пустого места справа */
    .public-page-wrapper .container-fluid.public-car-details-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Кнопка «Назад» — отступ слева */
    .public-page-wrapper .public-car-details-page .public-car-details-back {
        margin-left: max(5px, env(safe-area-inset-left));
    }

    /* Убираем отрицательные margin и padding у row/col — карточка на всю ширину */
    .public-page-wrapper .public-car-details-page .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .public-page-wrapper .public-car-details-page .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .public-page-wrapper .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .public-page-wrapper .row,
    .public-page-wrapper .card,
    .public-page-wrapper .public-car-details-card,
    .public-page-wrapper .car-details-gallery-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Карточка — iOS-ритм: горизонталь ~1rem (Spacing.lg) + safe area */
    .public-page-wrapper .public-car-details-card {
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    .public-page-wrapper .public-car-details-card .card-body {
        padding: 1.25rem 0 !important;
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .public-car-details-page .public-car-details-back {
        padding: 0.5rem 0.875rem;
        min-height: 2.75rem;
        box-sizing: border-box;
    }
    .public-car-details-meta {
        gap: 0.5rem;
    }
    .public-car-details-price-wrap {
        gap: 0.35rem;
    }
    .public-car-details-specs .row {
        row-gap: 0.5rem;
    }
    /* public_car_details: список kareta — внешняя «карточка» секции, внутренняя сетка без второго фона */
    .public-page-wrapper .public-car-details-specs .kareta-spec-list--public-details,
    .public-page-wrapper .public-car-details-options .kareta-spec-list--public-details {
        background: transparent;
        border: none;
        padding: 0;
        gap: 0.4rem;
    }
    .public-page-wrapper .public-car-details-specs .kareta-spec-section-title,
    .public-page-wrapper .public-car-details-specs h2.kareta-spec-section-title,
    .public-page-wrapper .public-car-details-options .kareta-spec-section-title,
    .public-page-wrapper .public-car-details-options h2.kareta-spec-section-title {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    }
    .public-page-wrapper .public-car-details-specs .kareta-spec-row,
    .public-page-wrapper .public-car-details-options .kareta-spec-row {
        min-height: 2.75rem;
        padding: 0.5rem 0.6rem;
    }
    .public-page-wrapper .public-car-details-specs .kareta-spec-icon-wrap,
    .public-page-wrapper .public-car-details-options .kareta-spec-icon-wrap {
        flex: 0 0 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        font-size: 1.2rem;
    }
    .public-car-details-seller {
        padding: 1.125rem 1rem;
        background: var(--kareta-bg-page, #f8f9fb);
        border: 1px solid var(--kareta-border-hairline, #e2e8f0);
    }
    .public-car-details-seller-name-row {
        gap: 0.35rem;
    }
    /* Кнопки в блоке продавца — min touch 44pt (iOS) */
    .public-car-details-seller .public-car-details-action-btn,
    .public-car-details-seller .public-car-details-favorite-btn,
    .public-car-details-seller .public-car-details-compare-btn,
    .public-car-details-seller .public-car-details-share-btn,
    .public-car-details-seller .contact-seller-link,
    .public-car-details-seller .public-car-details-propose-price-btn {
        min-height: 2.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }
    .public-car-details-cta {
        min-height: 2.75rem;
        padding: 0.75rem 1.125rem;
    }

    /* public_car_details — info / specs (типографика как iOS: model = Display, section = sectionTitle) */
    .public-car-details-info > [class*="col-"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .public-car-details-info > [class*="col-"] + [class*="col-"] {
        margin-top: 0.75rem;
    }
    .public-car-details-title {
        font-family: var(--kareta-font-display, "Playfair Display", Georgia, serif);
        font-size: clamp(1.75rem, 6.5vw, 2.625rem);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: 0.01em;
        margin-bottom: 0.625rem;
        color: var(--kareta-text-dark, #1a1a2e);
    }
    .public-car-details-meta-item {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--kareta-text-secondary, #64748b);
        background: var(--kareta-bg-surface, #fff);
        border: 1px solid var(--kareta-border-hairline, #e2e8f0);
        border-radius: 0.5rem;
        padding: 0.35rem 0.65rem;
    }
    .public-car-details-price-label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
    }
    .public-car-details-price.catalog-sale-price-chip {
        font-size: 1rem;
        font-weight: 600;
    }
    .public-car-details-price:not(.catalog-sale-price-chip) {
        font-size: clamp(1.375rem, 5vw, 1.75rem);
        font-weight: 700;
        word-break: break-word;
    }
    .public-car-details-specs,
    .public-car-details-options {
        background: var(--kareta-bg-page, #f8f9fb);
        border: 1px solid var(--kareta-details-spec-border, rgba(44, 74, 124, 0.14));
        border-radius: var(--kareta-details-gallery-radius, 1.375rem);
        padding: 1.125rem 0.75rem;
    }
    .public-car-details-section-title,
    .public-car-details-location .public-car-details-section-title {
        font-family: var(--kareta-font-display, "Playfair Display", Georgia, serif);
        font-size: 1.625rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.02em;
        margin-bottom: 0.875rem;
        color: var(--kareta-text-dark, #1a1a2e);
    }
    .public-car-details-specs .col-md-6 {
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--kareta-text-dark, #1a1a2e);
        padding: 0.625rem 1rem;
        margin-bottom: 0 !important;
        background: var(--kareta-bg-surface, #fff);
        border: 1px solid var(--kareta-details-spec-border, rgba(44, 74, 124, 0.14));
        border-radius: var(--kareta-details-spec-row-radius, 1.125rem);
    }
    .public-car-details-specs .col-md-6 strong {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--kareta-text-secondary, #64748b);
    }
    .public-car-details-hr {
        margin: 1.5rem 0;
        opacity: 1;
        border: none;
        border-top: 1px solid var(--kareta-border-hairline, #e2e8f0);
    }
    .public-car-details-location p.text-muted {
        font-size: 0.9375rem;
        line-height: 1.45;
        color: var(--kareta-text-secondary, #64748b) !important;
    }

    /* Детали: иконки в заголовках/мета/спеках — как iOS (акцент primary, читаемый размер) */
    .public-car-details-page .public-car-details-section-title > i.bi,
    .public-car-details-page .public-car-details-location .public-car-details-section-title > i.bi {
        color: var(--kareta-primary-blue, #2c4a7c);
        font-size: 1.12em;
        line-height: 1;
        vertical-align: -0.14em;
    }
    .public-car-details-page .public-car-details-meta-item > i.bi {
        flex-shrink: 0;
        font-size: 1.1em;
    }
    .public-car-details-specs .col-md-6 i.bi {
        color: var(--kareta-primary-blue, #2c4a7c);
        font-size: 1.08em;
        vertical-align: -0.1em;
    }

    /* Галерея public_car_details — mobile ≤576px: 100% ширины, cover, обрезка сверху */
    .public-car-details-photo-panel {
        padding: 0.75rem 0;
        border-radius: var(--kareta-details-gallery-radius, 1.375rem);
    }
    .public-car-details-no-photo {
        min-height: 200px;
    }
    .public-car-details-no-photo i.bi {
        font-size: 3.5rem;
    }
    .public-car-details-description {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    .public-car-details-description > strong {
        display: block;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--kareta-text-secondary, #64748b);
        margin-bottom: 0.35rem;
    }
    .public-car-details-description p.text-muted {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--kareta-text-dark, #1a1a2e) !important;
        opacity: 0.9;
    }
    .public-car-details-description-block .public-car-details-description-body,
    .public-spare-part-details-description-block .public-car-details-description-body {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--kareta-text-dark, #1a1a2e) !important;
        opacity: 0.9;
    }
    .public-car-details-seller-name {
        font-size: 1rem;
        font-weight: 600;
        color: var(--kareta-text-dark, #1a1a2e);
    }
    .car-details-gallery-wrapper {
        max-width: 100%;
        width: 100%;
    }
    .car-details-gallery {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "main main" "prev next";
        gap: 0.75rem;
        min-height: 280px;
        min-width: 0;
    }
    .car-details-gallery-row {
        gap: 0.75rem;
        grid-area: main;
        flex-direction: column;
        min-height: 0;
    }
    .car-details-gallery-prev-thumb,
    .car-details-gallery-next-thumb {
        display: none !important;
    }
    .car-details-gallery-main {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        height: 280px;
        min-height: 200px;
        max-height: 280px;
        aspect-ratio: 4 / 3;
        cursor: pointer;
        border-radius: var(--kareta-details-gallery-radius, 1.375rem);
    }
    .car-details-gallery-main .gallery-main-img {
        width: 100%;
        height: 100%;
        max-height: 280px;
        object-fit: cover;
        object-position: bottom center;
        pointer-events: none;
    }
    .car-details-gallery-btn {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }
    .car-details-gallery-counter {
        bottom: 0.5rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .car-details-gallery-prev {
        grid-area: prev;
        position: static;
        transform: none;
        justify-self: start;
    }
    .car-details-gallery-next {
        grid-area: next;
        position: static;
        transform: none;
        justify-self: end;
    }
    
    /* Выравнивание логотипа слева с отступом 15px (единый подход на всех экранах) — переопределено в блоке «Шапка и футер» выше */
    
    /* Логотип и текст в одну строку, как на больших экранах */
    .public-header .logo-container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        padding-left: 0;
        margin-left: 15px; /* Отступ 15px от левого края (0 + 15 = 15px) */
        margin-right: 0;
    }
    
    .public-header .logo-container img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 0.5rem;
    }
    
    .public-header h1 {
        font-size: 1.35rem;
        text-align: left;
        margin-bottom: 0.15rem;
    }
    
    .public-header .subtitle {
        font-size: 0.75rem;
        text-align: left;
        line-height: 1.2;
    }
    .public-header-notifications-badge.visible {
        font-size: 0.65rem;
    }
    
    .public-fab-stack--top {
        top: 1rem;
        right: 1rem;
        gap: 0.4rem;
    }

    .public-fab-stack--top .login-btn-fixed {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .spare-parts-cart-btn-fixed {
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .public-fab-bar.public-fab-stack--bottom {
        bottom: max(1rem, var(--safe-area-bottom, 0px));
        right: max(1rem, var(--safe-area-right, 0px));
        gap: 0.4rem;
    }

    .public-fab-stack .support-btn-fixed,
    .public-fab-stack .sell-car-btn-fixed,
    .public-fab-stack .comparison-btn-fixed {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .public-fab-stack .support-btn-fixed i,
    .public-fab-stack .sell-car-btn-fixed i,
    .public-fab-stack .comparison-btn-fixed i {
        font-size: 1.25rem;
        line-height: 1;
        display: inline-block;
    }

    .public-fab-stack--bottom .btn-text {
        display: none !important;
    }

    .public-fab-stack .comparison-btn-fixed__count {
        margin-left: 0;
    }

    .public-fab-stack .ai-assistant-btn-fixed {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }
    
    /* Загрузка и пустое состояние на мобильных */
    .loading-spinner {
        padding: 2rem 1rem;
    }
    
    .loading-spinner .spinner-border {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .no-cars-message {
        padding: 2.5rem 1.25rem;
        margin: 0 0.5rem;
    }
    
    .no-cars-message i {
        font-size: 3rem;
        margin-bottom: 0.75rem;
    }
    
    .no-cars-message h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .no-cars-message p {
        margin: 0;
    }
    .sell-car-vin-input {
        max-width: 100%;
    }
    
    /* Mobile filters — Premium размеры и отступы */
    .mobile-filters-button-container {
        padding: 0.875rem 1rem;
        background: linear-gradient(180deg, #f5f7fb 0%, rgba(245, 247, 251, 0) 100%);
    }
    .mobile-filters-toggle {
        gap: 0.5rem;
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
    .mobile-filters-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        font-size: 0.72rem;
        line-height: 20px;
    }
    .mobile-filters-offcanvas .offcanvas-header {
        padding: 0;
    }
    .filters-offcanvas-header::before {
        top: 10px;
        width: 36px;
        height: 4px;
    }
    .filters-offcanvas-title i {
        font-size: 1.1rem;
    }
    .filters-offcanvas-header .panel-filters-count {
        font-size: 0.75rem;
        padding: 2px 10px;
        min-width: 24px;
        margin-left: 8px;
    }
    .mobile-filters-close-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }
    .mobile-filters-close-btn i {
        font-size: 1.2rem;
    }
    .mobile-filters-toggle i {
        font-size: 1.1rem;
    }
    .mobile-filters-offcanvas {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        background: linear-gradient(180deg, #f9fbff 0%, #eef3fb 100%);
    }
    .filters-offcanvas-header {
        padding: 1.2rem 1.15rem 1rem;
        padding-top: max(1.25rem, calc(1rem + var(--safe-area-top)));
        border-radius: 0;
    }
    .filters-offcanvas-title {
        font-size: 0.98rem;
        letter-spacing: 0.02em;
    }
    .mobile-filters-offcanvas .offcanvas-body {
        padding: 14px 12px 2px;
    }
    .mobile-filters-offcanvas .offcanvas-body::-webkit-scrollbar {
        width: 6px;
    }
    .mobile-filters-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
        background: rgba(30, 60, 114, 0.25);
        border-radius: 100px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-section {
        margin-bottom: 10px;
        border-radius: 16px;
        padding: 14px 14px !important;
        box-shadow: 0 8px 20px rgba(19, 34, 70, 0.07), 0 0 0 1px rgba(19, 34, 70, 0.06);
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-label {
        font-size: 0.7rem !important;
        letter-spacing: 0.11em;
        margin-bottom: 9px !important;
    }
    .mobile-filters-offcanvas .offcanvas-body .form-control,
    .mobile-filters-offcanvas .offcanvas-body .form-select {
        font-size: 16px;
        min-height: 48px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-search-input {
        font-size: 16px;
        min-height: 48px;
        padding: 12px 14px 12px 36px;
        border-radius: 13px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-range-input {
        font-size: 16px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 13px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-select {
        font-size: 16px;
        min-height: 48px;
        padding: 0 14px;
        padding-right: 2rem;
        border-radius: 13px;
        background-position: right 12px center;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-chips {
        gap: 8px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-chip__label {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 6px 14px;
        font-size: 0.84rem;
        line-height: 1.4;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-range {
        gap: 8px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-brands-checkboxes,
    .mobile-filters-offcanvas .offcanvas-body .filter-models-container {
        gap: 8px;
        padding: 0;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-models-brand-section {
        font-size: 0.72rem;
        margin-top: 8px;
        margin-bottom: 4px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-models-brand-section:first-child {
        margin-top: 0;
    }
    .filters-offcanvas-footer {
        padding: 12px 12px max(14px, var(--safe-area-bottom));
        background: linear-gradient(to top, rgba(245, 247, 251, 0.98) 68%, rgba(245, 247, 251, 0.5) 100%);
        border-top: 1px solid rgba(30, 60, 114, 0.08);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .mobile-filters-offcanvas .filters-offcanvas-footer .filter-actions {
        gap: 0;
    }
    .mobile-filters-offcanvas .filters-offcanvas-footer .filter-btn-apply {
        min-height: 54px;
        font-size: 1rem;
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(30, 60, 114, 0.3);
    }
    .mobile-filters-offcanvas .filters-offcanvas-footer .filter-sidebar__reset {
        font-size: 0.85rem;
        padding: 8px 16px;
        margin-top: 8px;
    }
    
    /* Wireframe-стиль на мобильных — явные правила */
    .public-page-wrapper.wireframe-style .car-card {
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    .public-page-wrapper.wireframe-style .mobile-filters-button-container {
        box-shadow: none;
        border-bottom: 1px solid #ddd;
    }
    .public-page-wrapper.wireframe-style .mobile-filters-offcanvas {
        box-shadow: none;
        border-left: 1px solid #ddd;
    }
    
    /* Автодополнение расходов */
    .expense-suggestions {
        max-height: 150px;
    }
    
    .expense-suggestions .suggestion-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Кнопки действий */
    .btn-primary i,
    .btn-success i,
    .btn-danger i {
        font-size: 0.9rem;
    }
    
    /* Миниатюры фото и кнопка удаления на мобильных */
    .car-details-page #carPhotosGallery .photo-item .position-relative {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    .car-details-page #carPhotosGallery .photo-item img.img-thumbnail {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: bottom;
        border-radius: 8px;
        transition: opacity 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    .car-details-page #carPhotosGallery .photo-item img.img-thumbnail:active {
        opacity: 0.65;
    }
    .car-details-page #carPhotosGallery .photo-item .btn-danger.position-absolute {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(220, 53, 69, 0.92);
        border-color: transparent;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        margin: 6px !important;
    }
    .car-details-page #carPhotosGallery .photo-item .btn-danger.position-absolute::after {
        content: '';
        position: absolute;
        inset: -8px;
    }
    .car-details-page #carPhotosGallery .photo-item .btn-danger.position-absolute .btn-text {
        display: none !important;
    }
    .car-details-page #carPhotosGallery .photo-item .btn-danger.position-absolute i {
        font-size: 0.85rem;
        pointer-events: none;
    }
}

/* ============================================
   public_comparison — таблица сравнения 431–576px
   ============================================ */

@media (min-width: 431px) and (max-width: 576px) {
    .comparison-table th,
    .comparison-table td {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }
    .comparison-param-col {
        min-width: 100px;
    }
    .comparison-car-no-photo-icon {
        font-size: 2.75rem;
    }
}

/* ============================================
   Медиа-запрос для экранов до 480px
   ============================================ */

@media (max-width: 480px) {
    
    /* Таблица истории */
    #historyTable .history-col-type,
    #historyTable .history-col-action,
    #historyTable .history-col-user,
    #historyTable .history-col-details {
        display: none;
    }
    
    #historyTable .history-col-date,
    #historyTable .history-col-description {
        display: table-cell;
    }
    
    #historyTable {
        font-size: 0.85rem;
        table-layout: fixed;
        width: 100%;
    }
    
    #historyTable .history-col-select {
        width: 2.5rem;
        min-width: 2.5rem;
        padding-right: 0.25rem;
    }
    
    /* Фиксированная ширина для даты — не сжимается, описание не налезает */
    #historyTable .history-col-date {
        width: 8rem;
        min-width: 8rem;
        max-width: 8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        vertical-align: top;
    }
    
    #historyTable .history-col-description {
        width: auto;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        vertical-align: top;
    }
    
    #historyTable thead .history-col-date,
    #historyTable thead .history-col-description {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ============================================
   Медиа-запрос для экранов до 360px (очень узкие экраны)
   ============================================ */

@media (max-width: 360px) {
    .public-header .logo-container {
        gap: 0.5rem;
    }
    
    .public-header h1 {
        font-size: 1.15rem;
    }
    
    .public-header .logo-container img {
        width: 52px;
        height: 52px;
        object-fit: cover;
    }
    
    .public-header .subtitle {
        font-size: 0.7rem;
    }
    
    .car-card-title {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .car-card-price {
        font-size: 1.15rem;
    }
    
    .car-card-image-wrapper {
        height: 180px;
    }
    .car-card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom center;
    }
    .car-card-no-photo {
        height: 180px;
    }
    .car-card-no-photo-icon {
        font-size: 2.5rem;
    }
    
    .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100% - 0.5rem);
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 0.5rem);
    }
    
    /* Страница логина/регистрации — экраны до 360px */
    body.login-page .container {
        padding-left: max(0.4rem, var(--safe-area-left));
        padding-right: max(0.4rem, var(--safe-area-right));
    }
    
    .modern-login-card {
        border-radius: 0.75rem;
    }
    
    .modern-login-card .card-body {
        padding: 0.85rem 0.6rem !important;
    }
    
    .modern-login-card h2 {
        font-size: 1.1rem;
    }
    
    .modern-login-card .text-muted.mb-0 {
        font-size: 0.8rem;
    }
    
    .modern-login-card .input-group-lg .form-control,
    .modern-login-card .input-group-lg .input-group-text {
        padding: 0.45rem 0.5rem;
        min-height: 42px;
    }
    
    .modern-login-card #togglePassword,
    .modern-login-card #toggleConfirmPassword {
        min-width: 40px;
        padding: 0.4rem;
    }
    
    .modern-login-card .btn-primary.btn-lg {
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
        min-height: 42px;
    }
    
    .modern-login-card .alert {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .modern-login-card .mb-3 {
        margin-bottom: 0.6rem !important;
    }
}

/* ============================================
   Медиа-запрос для экранов до 430px
   Очень маленькие экраны - применяются минимальные размеры для touch-устройств
   ============================================ */

@media (max-width: 430px) {
    
    /* Общие стили и safe area */
    body {
        font-size: 0.9rem;
        padding-left: var(--safe-area-left, 0);
        padding-right: var(--safe-area-right, 0);
        padding-bottom: var(--safe-area-bottom, 0);
    }
    
    /* Контейнеры с учётом safe area */
    .container-fluid {
        padding-left: max(1rem, var(--safe-area-left));
        padding-right: max(1rem, var(--safe-area-right));
    }

    /* car_details.php — без горизонтальных отступов */
    .container-fluid.car-details-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* public_car_details.php — карточка на всю ширину */
    .container-fluid.public-car-details-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Страница логина/регистрации — очень маленькие экраны */
    body.login-page .container {
        padding-left: max(0.5rem, var(--safe-area-left));
        padding-right: max(0.5rem, var(--safe-area-right));
    }
    
    .modern-login-card .card-body {
        padding: 1rem 0.75rem !important;
    }
    
    .modern-login-card h2 {
        font-size: 1.2rem;
    }
    
    .modern-login-card .form-label {
        font-size: 0.875rem;
    }
    
    .modern-login-card .input-group-lg .form-control,
    .modern-login-card .input-group-lg .input-group-text {
        padding: 0.5rem 0.6rem;
        font-size: 16px;
    }
    
    .modern-login-card .mb-3 {
        margin-bottom: 0.7rem !important;
    }
    
    .modern-login-card .btn-primary.btn-lg {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Навбар */
    .navbar-brand span {
        display: none;
    }
    
    .navbar-logo {
        height: 28px;
        max-width: 120px;
    }
    
    .navbar-text {
        font-size: 0.85rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .navbar-nav .nav-link i {
        font-size: 1rem;
        margin-right: 0.25rem;
    }
    
    .navbar-nav .nav-link .btn-text {
        display: inline;
        color: #ffffff;
    }
    
    .navbar-nav .navbar-text.text-white-50 {
        display: none;
    }
    
    /* Баланс кассы */
    .cash-balance {
        font-size: 1rem;
    }
    
    .cash-balance-badge {
        padding: 0.375rem 0.5rem;
    }
    
    .cash-balance-badge .text-muted {
        font-size: 0.75rem;
    }
    
    /* Таблицы */
    .table-responsive {
        font-size: 0.85rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }
    
    .table th:first-child,
    .table td:first-child {
        padding-left: 0.5rem;
    }
    
    .table th:last-child,
    .table td:last-child {
        padding-right: 0.5rem;
    }
    
    /* Таблица истории: перенос текста в колонке описания */
    #historyTable .history-col-description {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* Страница истории: контейнер и карточка не выходят за экран */
    .history-page .container-fluid {
        max-width: 100%;
    }
    .history-page .card,
    .history-page .table-responsive {
        max-width: 100%;
        min-width: 0;
    }
    
    /* Таблицы на странице деталей машины для очень маленьких экранов (430px) */
    .car-details-page .table tbody tr {
        padding: 0.5rem; /* 8px - еще более компактно для маленьких экранов */
        margin-bottom: 0.625rem; /* 10px - оптимизировано */
        width: 100% !important; /* Убеждаемся, что карточка занимает всю доступную ширину */
        max-width: 100% !important; /* Ограничение максимальной ширины */
        box-sizing: border-box; /* Padding учитывается в ширине */
    }
    
    .car-details-page .table tbody td {
        padding-top: 0.3rem; /* 4.8px ≈ 5px - оптимизировано */
        padding-bottom: 0.3rem; /* 4.8px ≈ 5px - оптимизировано */
        font-size: 0.85rem;
    }
    
    .car-details-page .table tbody td:before {
        font-size: 0.7rem; /* Уменьшен для компактности */
        margin-bottom: 0.2rem; /* 3.2px ≈ 3px */
        padding-bottom: 0.15rem; /* 2.4px ≈ 2px - оптимизировано */
    }
    
    .car-details-page .table tbody td:last-child {
        margin-top: 0.4rem; /* 6.4px ≈ 6px - оптимизировано */
        padding-top: 0.4rem; /* 6.4px ≈ 6px - оптимизировано */
    }
    
    .car-details-page .table tbody td .btn {
        padding: var(--btn-padding-md); /* Минимум для touch-устройств (44x44px) */
        font-size: var(--btn-font-size-sm); /* Минимум для читаемости */
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
    }
    
    .car-details-page .table tfoot {
        padding: 0.625rem; /* 10px - оптимизировано */
        margin-top: 0.625rem; /* 10px - оптимизировано */
    }
    
    .car-details-page .table tfoot th {
        font-size: 0.85rem;
        padding: 0.3rem 0; /* 4.8px ≈ 5px - оптимизировано */
    }
    
    .car-details-page .table tfoot th:nth-child(3) {
        font-size: 0.95rem; /* Немного уменьшен для компактности */
    }
    
    /* Бейджи */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Карточки */
    .card-body {
        padding: 0.75rem;
    }
    
    .card-header {
        padding: 0.5rem 0.75rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
    
    /* Кнопки - минимальные размеры для touch-устройств */
    .btn {
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
        padding: var(--btn-padding-md); /* Минимум для удобного нажатия */
        font-size: var(--btn-font-size-sm); /* Минимум для читаемости */
    }
    
    .btn-group-sm .btn {
        padding: var(--btn-padding-sm); /* Увеличено для touch */
        font-size: var(--btn-font-size-sm); /* Увеличено для читаемости */
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
    }
    
    .btn-group-sm .btn i {
        font-size: 0.9rem;
    }
    
    /* Кнопки в группах */
    .btn-group .btn {
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
    }
    
    /* Кнопки в модальных окнах */
    .modal-footer .btn {
        min-height: var(--btn-min-height-touch); /* Минимальный размер для touch */
        padding: var(--btn-padding-md); /* Минимум для удобного нажатия */
        font-size: var(--btn-font-size-md); /* Минимум для читаемости */
    }
    
    /* Таблица машин — уточнения для очень маленьких экранов (≤430px): компактные отступы и шрифты */
    #carsTable tbody tr {
        padding: 0.5rem;
        margin-bottom: 0.625rem;
    }
    #carsTable tbody td {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        font-size: 0.85rem;
    }
    #carsTable tbody td:before {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
        padding-bottom: 0.15rem;
    }
    #carsTable tbody td.actions-cell {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }
    #carsTable .btn-group .btn {
        padding: var(--btn-padding-md);
        font-size: var(--btn-font-size-sm);
        min-height: var(--btn-min-height-touch);
    }
    #carsTable .actions-cell {
        padding: 0.75rem !important;
    }
    
    /* Модальные окна */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 0.75rem;
    }
    
    .modal-header {
        padding: 0.875rem 1rem;
    }
    
    .modal-body {
        padding: 0.875rem;
    }
    
    .modal-footer {
        padding: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }
    
    /* Формы */
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    
    .form-control {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Заголовки */
    h2 {
        font-size: 1.5rem;
    }
    
    h5 {
        font-size: 1.1rem;
    }
    
    /* Бейдж уведомлений и сообщений в навбаре - мобильные размеры */
    #notificationsNavLink,
    #messagesNavLink {
        padding: 0.5rem 0.75rem;
    }
    #navNotificationsBadge,
    #navUnreadCount {
        font-size: 0.6rem;
        padding: 0.15em 0.35em;
        min-width: 16px;
    }
    
    /* Контейнеры для select опций - мобильные размеры */
    .select-options-container {
        max-height: 150px;
    }
    
    .select-options-container-lg {
        max-height: 200px;
    }
    
    /* Минимальная высота для карточек заметок - мобильные размеры */
    .card-text-min-height {
        min-height: 50px;
    }
    
    /* Иконка пользователя в модальном окне - мобильные размеры */
    .modal-body .bi-person-circle {
        font-size: 3rem;
    }
    
    .notifications-list {
        max-height: 400px;
    }
    
    /* Публичные страницы: terms, privacy, vin_check, customs — mobile */
    .public-page-wrapper .container .card.shadow-sm .card-body {
        padding: 1rem !important;
    }
    .public-page-wrapper .container .card .text-center.mb-4 h1,
    .public-page-wrapper .container .card .text-center h1.display-5,
    .public-page-wrapper .container .card .text-center h1.display-6 {
        font-size: 1.35rem;
        line-height: 1.3;
    }
    .public-page-wrapper .container .card .text-center .text-muted,
    .public-page-wrapper .container .card .text-muted.mb-0 {
        font-size: 0.9rem;
    }
    .privacy-content section {
        padding-top: 1rem;
    }
    .privacy-content h2 {
        margin-top: 2rem;
        font-size: 1.1rem;
    }
    .privacy-content p {
        font-size: 0.95rem;
        line-height: 1.8;
    }
    /* vin_check, customs_calculator — форма, label, input, код */
    .public-page-wrapper .container .card .card-body .form-label {
        font-size: 0.9rem;
    }
    .public-page-wrapper .container .card .card-body .form-control,
    .public-page-wrapper .container .card .card-body .form-select {
        font-size: 0.95rem;
    }
    .public-page-wrapper #vinCheckResultContent .col-md-6,
    .public-page-wrapper #customsCalcResult .card-body,
    .public-page-wrapper #customsCalcResult .h4 {
        font-size: 0.95rem;
    }
    .public-page-wrapper pre.bg-dark,
    .public-page-wrapper pre.bg-dark code {
        font-size: 0.75rem;
        padding: 0.75rem !important;
    }
    
    /* Публичная страница — очень маленькие экраны (логотип и текст в ряд) */
    .public-header h1 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    .public-header .logo-container img {
        width: 56px;
        height: 56px;
        object-fit: cover;
    }
    
    .public-header .subtitle {
        font-size: 0.7rem;
    }
    
    .cars-grid {
        gap: 1rem;
        padding: 0 0.5rem;
    }
    .public-pagination-wrapper {
        padding: 0 0.5rem;
    }
    .car-card-body {
        padding: 0.875rem 1rem;
    }
    
    .car-card-title {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .car-card-price {
        font-size: 1.25rem;
    }
    
    .car-card-image-wrapper {
        height: 200px;
    }
    .car-card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom center;
    }
    .car-card-no-photo {
        height: 200px;
    }
    .car-card-no-photo-icon {
        font-size: 2.75rem;
    }
    
    /* Фиксированные кнопки — учёт safe area и удобный размер */
    .public-fab-stack--top {
        top: max(1rem, var(--safe-area-top));
        right: max(1rem, var(--safe-area-right));
        gap: 0.35rem;
    }

    .public-fab-stack--top .login-btn-fixed {
        min-height: 44px;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .spare-parts-cart-btn-fixed {
        top: max(1rem, var(--safe-area-top));
        right: max(1rem, var(--safe-area-right));
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .public-fab-bar.public-fab-stack--bottom {
        bottom: max(1rem, var(--safe-area-bottom));
        right: max(1rem, var(--safe-area-right));
        gap: 0.35rem;
        max-width: calc(100vw - max(1rem, var(--safe-area-right)) - max(1rem, var(--safe-area-left, 0px)));
    }

    .public-fab-stack .support-btn-fixed,
    .public-fab-stack .sell-car-btn-fixed,
    .public-fab-stack .comparison-btn-fixed {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .public-fab-stack .support-btn-fixed i,
    .public-fab-stack .sell-car-btn-fixed i,
    .public-fab-stack .comparison-btn-fixed i {
        font-size: 1.25rem;
        line-height: 1;
        display: inline-block;
    }

    .public-fab-stack--bottom .btn-text {
        display: none !important;
    }

    .public-fab-stack .comparison-btn-fixed__count {
        margin-left: 0;
    }

    .public-fab-stack .ai-assistant-btn-fixed {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }
    
    /* public_comparison — таблица сравнения ≤430px */
    .comparison-car-no-photo-icon {
        font-size: 2.5rem;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    .comparison-param-col {
        min-width: 100px;
    }

    /* Мобильная панель фильтров — на очень маленьких экранах на всю ширину */
    .mobile-filters-offcanvas {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
    
    .filters-offcanvas-header {
        padding: 1rem 1.1rem;
        padding-top: max(1rem, calc(0.75rem + var(--safe-area-top)));
        padding-right: max(1.1rem, var(--safe-area-right));
        border-radius: 0;
    }
    
    .mobile-filters-offcanvas .offcanvas-body {
        padding: 10px 10px 0;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-section {
        border-radius: 14px;
        padding: 12px 12px !important;
        margin-bottom: 8px;
    }
    .mobile-filters-offcanvas .offcanvas-body .filter-chip__label {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .filters-offcanvas-footer {
        padding: 10px 10px max(12px, var(--safe-area-bottom));
    }
    .mobile-filters-offcanvas .filters-offcanvas-footer .filter-btn-apply {
        min-height: 50px;
        border-radius: 14px;
        font-size: 0.95rem;
    }
    
    .mobile-filters-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Публичная страница деталей машины — отступы слева/справа макс. 5px */
    .public-car-details-page .public-car-details-photo-panel {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Fullscreen photo viewer — pinch zoom, как в iOS */
    #publicGalleryFullscreenModal .public-gallery-fs-toolbar .btn-close {
        width: 36px;
        height: 36px;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-prev,
    #publicGalleryFullscreenModal .public-gallery-fs-next {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.1rem;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-counter {
        font-size: 0.8125rem;
        padding: 4px 14px;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-zoom-bar {
        display: flex;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-zoom-minus,
    #publicGalleryFullscreenModal .public-gallery-fs-zoom-plus {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.35rem;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-zoom-label {
        font-size: 0.875rem;
    }
    #publicGalleryFullscreenModal .public-gallery-fs-zoom-surface {
        max-height: calc(100dvh - 14rem);
        max-height: calc(100vh - 14rem);
    }
    #publicGalleryFullscreenModal .public-gallery-fs-card {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* Галерея фото в деталях авто: переопределить глобальный .modal-dialog для полноэкранной галереи */
    #publicGalleryFullscreenModal.modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available;
        padding: 0.5rem;
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        box-sizing: border-box;
    }
    #publicGalleryFullscreenModal .modal-dialog.public-gallery-fs-dialog {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        align-items: unset !important;
        align-self: center !important;
        margin: 0 auto !important;
        max-width: min(100vw, 100%) !important;
    }
    #publicGalleryFullscreenModal .modal-content {
        display: block !important;
        max-height: none !important;
        flex: none !important;
        margin: 0 auto !important;
        border-radius: 0 !important;
    }

    /* Markalar specs — mobile */
    .model-spec-item {
        padding: 0.625rem 0 0.625rem 0;
    }
    .model-spec-label {
        font-size: 0.675rem;
        margin-bottom: 0.2rem;
    }
    .model-spec-value {
        font-size: 0.875rem;
    }

    /* Markalar page header — mobile */
    .markalar-page-header {
        padding: 0.875rem 1rem 0.875rem 1.125rem;
    }
    .markalar-page-title {
        font-size: 1.375rem;
    }
    .markalar-brand-prefix {
        font-size: 0.7rem;
    }

    /* Markalar breadcrumb — mobile */
    .markalar-breadcrumb {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }
    .markalar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.25rem;
    }

    /* Markalar — mobile */
    .brand-card:hover {
        transform: none;
    }
    .brand-card .card-body {
        padding: 0.875rem;
    }
    .brand-content-card {
        padding: 1rem;
    }
    .brand-info-panel {
        padding: 0.75rem 1rem;
    }
    .tip-card {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    .markalar-model-buttons .btn {
        font-size: 0.8125rem;
        padding: 0.25rem 0.625rem;
    }
    .breadcrumb {
        font-size: 0.875rem;
    }

    /* Brand/model article — mobile */
    .brand-article table,
    .model-article table {
        margin: 1rem 0;
    }
    .brand-article th,
    .brand-article td,
    .model-article th,
    .model-article td {
        padding: 0.5rem 0.75rem;
    }
    .brand-article h2,
    .model-article h2 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-size: 1.25rem;
    }
    .brand-article h3,
    .model-article h3 {
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }
    .brand-article ul,
    .brand-article ol,
    .model-article ul,
    .model-article ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }
    .brand-article p,
    .model-article p {
        margin-bottom: 0.75rem;
    }
    
    /* Markalar tables — mobile: compact padding, readable text, horizontal scroll */
    .markalar-comparison-table th,
    .markalar-comparison-table td,
    .markalar-vs-table th,
    .markalar-vs-table td,
    .markalar-model-specs-table th,
    .markalar-model-specs-table td,
    .markalar-error-table th,
    .markalar-error-table td,
    .markalar-engine-table th,
    .markalar-engine-table td,
    .markalar-generations-table th,
    .markalar-generations-table td {
        padding: 0.5rem 0.625rem;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .markalar-comparison-table th:first-child,
    .markalar-comparison-table td:first-child,
    .markalar-vs-table th:first-child,
    .markalar-vs-table td:first-child,
    .markalar-model-specs-table th:first-child,
    .markalar-model-specs-table td:first-child,
    .markalar-engine-table th:first-child,
    .markalar-engine-table td:first-child,
    .markalar-generations-table th:first-child,
    .markalar-generations-table td:first-child {
        min-width: 3rem;
    }
    .markalar-error-table th:first-child,
    .markalar-error-table td:first-child {
        min-width: 3rem;
        white-space: nowrap;
    }
    .markalar-error-table th:nth-child(1),
    .markalar-error-table td:nth-child(1) { width: 14%; }
    .markalar-error-table th:nth-child(2),
    .markalar-error-table td:nth-child(2) { width: 38%; }
    .markalar-error-table th:nth-child(3),
    .markalar-error-table td:nth-child(3) { width: 26%; }
    .markalar-error-table th:nth-child(4),
    .markalar-error-table td:nth-child(4) { width: 22%; }
    /* Таблица xəta kodları — вписывается в экран, без горизонтального скролла */
    .markalar-error-table-wrap {
        overflow-x: hidden;
        max-width: 100%;
    }
    .markalar-error-table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* Таблицы comparison, vs, model-specs — вписываются в экран, без горизонтального скролла */
    .markalar-comparison-table-wrap,
    .markalar-vs-table-wrap,
    .markalar-model-specs-table-wrap {
        overflow-x: hidden;
        max-width: 100%;
    }
    .markalar-comparison-table table,
    .markalar-vs-table table,
    .markalar-model-specs-table table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* Таблицы engine_series, generations — вписываются в экран, без горизонтального скролла */
    .markalar-engine-table-wrap,
    .markalar-generations-table-wrap {
        overflow-x: hidden;
        max-width: 100%;
    }
    .markalar-engine-table,
    .markalar-generations-table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        table-layout: fixed;
    }
    /* Generic-таблицы в brand-content-card — вписываются в экран, без горизонтального скролла */
    .brand-content-card .table-responsive {
        overflow-x: hidden;
    }
    .brand-content-card .table-responsive .table {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        table-layout: fixed;
    }
    .brand-content-card .table-responsive .table th,
    .brand-content-card .table-responsive .table td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* FAQ accordion — xəta-kodlari */
    .error-codes-faq-card .accordion-button {
        font-size: 0.9rem;
        padding: 0.65rem 0.85rem;
    }
    .error-codes-faq-card .accordion-body {
        font-size: 0.9rem;
        line-height: 1.65;
        padding: 0.85rem 0.85rem 1rem;
    }
}

/* Wireframe-стиль публичной страницы: правила в main.css (.public-page-wrapper.wireframe-style) действуют на всех разрешениях. */

/* #viewPhotoModal — переопределения для мобильных ≤576px (base в main.css) */
#viewPhotoTextNav {
    gap: 0.5rem;
}
#viewPhotoPrevText,
#viewPhotoNextText {
    font-size: 0.55rem;
    padding: 0.3rem 0.6rem;
    min-height: 32px;
    min-width: 44px;
}
#viewPhotoModal .modal-header {
    padding: 0 1.25rem !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    padding-left: max(1.25rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.25rem, env(safe-area-inset-right)) !important;
    gap: 0.75rem;
    height: calc(var(--c-bar-h) + max(0px, env(safe-area-inset-top))) !important;
}
#viewPhotoModal .modal-header .modal-title {
    font-size: 0.9rem !important;
}
#viewPhotoModal .modal-header .btn-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
}
#viewPhotoModal .modal-header .btn-close::before {
    font-size: 1.2rem !important;
}
#viewPhotoPrev,
#viewPhotoNext {
    width: 52px;
    height: 96px;
    min-width: 44px;
    font-size: 1.75rem;
    padding: 0;
}
#viewPhotoFooter {
    padding: 0 1.25rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    gap: 1rem;
}
#viewPhotoCounter {
    font-size: 0.58rem;
}

/* ============================================
   Сетка миниатюр на очень маленьких экранах
   ============================================ */
@media (max-width: 380px) {
    .car-details-page #carPhotosGallery.row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

    /* === SPARE PARTS PAGE === */
    .public-page-wrapper .container > .text-center.border-bottom {
        padding: 20px 16px 16px;
    }
    .public-page-wrapper .display-6 {
        font-size: 1.4rem;
    }
    .public-page-wrapper .card.shadow-sm.border-0 .card-body {
        padding: 16px;
    }
    .public-page-wrapper .card .form-label {
        font-size: 0.68rem;
        margin-bottom: 4px;
    }
    .public-page-wrapper .card .form-control,
    .public-page-wrapper .card .form-select {
        font-size: 0.875rem;
        padding: 8px 10px;
    }
    .public-page-wrapper.wireframe-style .btn.btn-primary {
        font-size: 0.875rem;
        padding: 10px 16px;
    }
    .public-page-wrapper.wireframe-style .btn.btn-primary.btn-sm {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    .public-page-wrapper .btn.btn-outline-primary.btn-sm {
        font-size: 0.72rem;
        padding: 4px 10px;
    }
    .public-page-wrapper .card.hover-lift .card-body {
        padding: 14px 10px;
        min-height: 90px;
    }
    .public-page-wrapper .card.hover-lift .bi {
        font-size: 1.4rem;
        margin-bottom: 6px;
    }
    .public-page-wrapper .card.hover-lift .fw-semibold {
        font-size: 0.75rem;
    }
    .public-page-wrapper .table {
        font-size: 0.78rem;
    }
    .public-page-wrapper .table thead th {
        font-size: 0.65rem;
        padding: 8px 6px;
    }
    .public-page-wrapper .table tbody td {
        padding: 8px 6px;
    }
    /* Spare parts — иконки категорий */
    .sp-cat-icon-wrap {
        width: 40px;
        height: 40px;
    }
    .sp-cat-icon-img {
        width: 40px;
        height: 40px;
    }
    /* OBD Scan — размеры для мобильных */
    .obd-scan-page .card.obd-card .card-body,
    .obd-scan-page .card-header.obd-card-header {
        padding: 0.75rem 1rem;
    }
    .obd-scan-page .obd-dtc-item {
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
    }
    .obd-scan-page .obd-tag {
        padding: 0.15rem 0.5rem;
        font-size: 0.7rem;
    }
    .obd-scan-page .obd-input,
    .obd-scan-page .obd-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    .obd-scan-page .obd-alert-bar {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .obd-scan-page .obd-block-title {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    /* Mobile Responsive Scaling for Premium OTP Input Grid */
    @media (max-width: 360px) {
        .otp-digit-shell {
            width: 36px !important;
            height: 46px !important;
        }
        .otp-digit-input {
            font-size: 1.25rem !important;
        }
        .otp-digits-container {
            gap: 6px !important;
        }
        #otpVerificationModal .modal-body {
            padding: 8px 12px 20px !important;
        }
    }

    /* Beautiful modern conic-gradient unread badge button */
    .chat-unread-badge {
        position: absolute;
        bottom: 72px;
        right: 16px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: conic-gradient(#6366F1, #3B82F6, #06B6D4, #6366F1);
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        outline: none;
        cursor: pointer;
        box-sizing: border-box;
        z-index: 1050;
        transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    }

    .chat-unread-badge__inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #0D1117;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .chat-unread-badge__count {
        color: #818CF8;
        font-weight: 700;
        font-family: inherit;
        line-height: 1;
        text-align: center;
        user-select: none;
        font-size: 14px;
    }

    .chat-unread-badge__count.count-medium {
        font-size: 11px;
    }

    .chat-unread-badge__count.count-large {
        font-size: 9px;
    }
}