/* ==========================================================================
   Профиль / Личный кабинет — Mobile First
   Базовые стили = мобильные; ПК = @media (min-width: 769px)
   ========================================================================== */

/* --- Переменные --- */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --accent-color: #f59e0b;
    --accent-dark: #d97706;
    --dark-color: #0f172a;
    --light-color: #f8fafc;
    --gray-color: #64748b;
    --gray-light: #f1f5f9;
    --transition: all 0.18s ease;
    --chat-bg: #ffffff;
    --chat-surface: #f8fafc;
    --chat-divider: #e2e8f0;
    --chat-hover: #f1f5f9;
    --chat-active: #eff6ff;
    --chat-text: #0f172a;
    --chat-subtext: #64748b;
    /* Профиль: единая система закруглений */
    --profile-radius-sm: 8px;
    --profile-radius-md: 12px;
    --profile-radius-lg: 16px;
    --profile-radius-xl: 20px;
    /* Высота хедера: одна переменная для отступов контента */
    --header-height: 60px;
    /* Liquid glass scrollbar */
    --scrollbar-width: 10px;
    --scrollbar-track: rgba(255, 255, 255, 0.08);
    --scrollbar-track-border: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb: rgba(255, 255, 255, 0.45);
    --scrollbar-thumb-border: rgba(255, 255, 255, 0.6);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.65);
    --scrollbar-thumb-active: rgba(37, 99, 235, 0.5);
    --scrollbar-thumb-shadow: 0 2px 12px rgba(31, 38, 135, 0.15);
    --scrollbar-thumb-shadow-hover: 0 4px 16px rgba(31, 38, 135, 0.2);
}

/* --- Liquid glass скроллбар: страница профиля + все блоки --- */
body,
html,
.profile-main,
.profile-section,
.profile-content,
.notifications-list-wrap,
#notificationsListWrap,
.support-widget-messages,
.support-widget-window,
.notifications-dropdown-list,
.chat-messages,
.order-chat-messages,
.order-details-modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
body::-webkit-scrollbar,
html::-webkit-scrollbar,
.profile-main::-webkit-scrollbar,
.profile-section::-webkit-scrollbar,
.profile-content::-webkit-scrollbar,
.notifications-list-wrap::-webkit-scrollbar,
#notificationsListWrap::-webkit-scrollbar,
.support-widget-messages::-webkit-scrollbar,
.support-widget-window::-webkit-scrollbar,
.notifications-dropdown-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.order-chat-messages::-webkit-scrollbar,
.order-details-modal-body::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
.profile-main::-webkit-scrollbar-track,
.profile-section::-webkit-scrollbar-track,
.profile-content::-webkit-scrollbar-track,
.notifications-list-wrap::-webkit-scrollbar-track,
#notificationsListWrap::-webkit-scrollbar-track,
.support-widget-messages::-webkit-scrollbar-track,
.support-widget-window::-webkit-scrollbar-track,
.notifications-dropdown-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.order-chat-messages::-webkit-scrollbar-track,
.order-details-modal-body::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 12px;
    margin: 4px 0;
    border: 1px solid var(--scrollbar-track-border);
}
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb,
.profile-main::-webkit-scrollbar-thumb,
.profile-section::-webkit-scrollbar-thumb,
.profile-content::-webkit-scrollbar-thumb,
.notifications-list-wrap::-webkit-scrollbar-thumb,
#notificationsListWrap::-webkit-scrollbar-thumb,
.support-widget-messages::-webkit-scrollbar-thumb,
.support-widget-window::-webkit-scrollbar-thumb,
.notifications-dropdown-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.order-chat-messages::-webkit-scrollbar-thumb,
.order-details-modal-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 12px;
    border: 1px solid var(--scrollbar-thumb-border);
    box-shadow: var(--scrollbar-thumb-shadow);
    min-height: 40px;
}
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover,
.profile-main::-webkit-scrollbar-thumb:hover,
.profile-section::-webkit-scrollbar-thumb:hover,
.profile-content::-webkit-scrollbar-thumb:hover,
.notifications-list-wrap::-webkit-scrollbar-thumb:hover,
#notificationsListWrap::-webkit-scrollbar-thumb:hover,
.support-widget-messages::-webkit-scrollbar-thumb:hover,
.support-widget-window::-webkit-scrollbar-thumb:hover,
.notifications-dropdown-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.order-chat-messages::-webkit-scrollbar-thumb:hover,
.order-details-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    box-shadow: var(--scrollbar-thumb-shadow-hover);
    border-color: rgba(255, 255, 255, 0.8);
}
body::-webkit-scrollbar-thumb:active,
html::-webkit-scrollbar-thumb:active,
.profile-main::-webkit-scrollbar-thumb:active,
.profile-section::-webkit-scrollbar-thumb:active,
.profile-content::-webkit-scrollbar-thumb:active,
.notifications-list-wrap::-webkit-scrollbar-thumb:active,
#notificationsListWrap::-webkit-scrollbar-thumb:active,
.support-widget-messages::-webkit-scrollbar-thumb:active,
.support-widget-window::-webkit-scrollbar-thumb:active,
.notifications-dropdown-list::-webkit-scrollbar-thumb:active,
.chat-messages::-webkit-scrollbar-thumb:active,
.order-chat-messages::-webkit-scrollbar-thumb:active,
.order-details-modal-body::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}

/* --- Сброс и база --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5;
    color: #0f172a;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Отступ под фиксированный хедер задаётся ниже вместе с padding-top */
}

/* Текст можно выделять; кнопки/иконки отключаем только там, где нужно */
button, .btn, .mobile-nav-item, .order-info-icon {
    -webkit-user-select: none;
    user-select: none;
}

/* Loader: скрытый не блокирует клики (единственный !important для overlay) */
#page-loader.hidden {
    display: none;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ==========================================================================
   Хедер: мобильные = fixed + отступ у body; ПК = sticky
   ========================================================================== */

/* По умолчанию (мобильные): фиксированная шапка */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    padding-top: env(safe-area-inset-top, 0);
    min-height: var(--header-height);
}

body {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0));
    min-height: 100vh;
    background-color: #e8f0fe; /* fallback if gradient not loaded */
}

/* header-content базовые размеры — стили переопределяются в теме */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 10px;
    min-height: var(--header-height);
}

/* header-balance-wrap: скрыт на мобильных, отображается через тему на ПК */
.header-balance-wrap {
    display: none;
    align-items: center;
    gap: 6px;
}

.header-balance {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

/* Базовые кнопки хедера — переопределяются темой */
.header-icon-btn,
.balance-add-btn,
.notification-icon-btn,
.logout-icon-btn {
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
}

        /* ПК: хедер sticky */
        @media (min-width: 769px) {
            header {
                position: sticky;
                top: 0;
            }
            body {
                padding-top: 0;
            }
        }

        /* ==========================================================================
           Карточки заказов: мобильные = вертикально, перенос текста; ПК = горизонтально
           ========================================================================== */
        .order-card-compact {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px 16px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: var(--profile-radius-sm);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            overflow: hidden;
            position: relative;
        }

        .order-card-compact:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            border-color: var(--primary-color);
        }

        .order-card-compact .order-header {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .order-card-compact .order-id {
            font-size: 15px;
            font-weight: 700;
            color: var(--dark-color);
            line-height: 1.3;
        }

        .order-card-compact .order-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 16px;
            font-size: 13px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .order-card-compact .order-details > div {
            color: #6b7280;
            min-width: 0;
        }

        .order-card-compact .order-details > div strong {
            color: #374151;
            font-weight: 600;
            margin-right: 4px;
        }

        .order-card-compact .order-status {
            align-self: flex-start;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 12px;
            font-weight: 500;
        }

        .order-card-compact .order-info-icon {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #e5e7eb;
            background: transparent;
            color: #9ca3af;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .order-card-compact .order-info-icon:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .order-actions-compact {
            display: none;
        }

        @media (min-width: 769px) {
            .order-card-compact {
                flex-direction: row;
                align-items: center;
                flex-wrap: nowrap;
                min-height: 60px;
            }
            .order-card-compact .order-header {
                min-width: 120px;
                flex-shrink: 0;
                padding-right: 16px;
                border-right: 1px solid #e5e7eb;
            }
            .order-card-compact .order-details {
                display: flex;
                flex: 1;
                grid-template-columns: unset;
                gap: 20px;
                align-items: center;
                font-size: 14px;
            }
            .order-card-compact .order-details > div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .order-card-compact .order-status {
                margin-left: auto;
                margin-right: 12px;
                align-self: center;
            }
            .order-card-compact .order-info-icon {
                position: static;
                margin-left: auto;
            }
        }

        /* Лого и контейнер шапки (общие) */
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            flex-wrap: nowrap;
            width: 100%;
            max-width: 100%;
            margin: 0;
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 16px;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        @media (min-width: 769px) {
            .container { padding: 0 24px; }
        }

        /* Контейнер для шапки без ограничений */
        header .container {
            max-width: 100%;
            padding: 0;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            flex-shrink: 0;
        }
        
        /* Кастомный селектор темы */
        .theme-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .theme-option {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
            border: 2px solid var(--gray-light);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }
        
        .theme-option:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
        }
        
        .theme-option.active {
            border-color: var(--primary-color);
            background: rgba(37, 99, 235, 0.05);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }
        
        .theme-preview {
            width: 100%;
            height: 60px;
            border-radius: 8px;
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
            border: 2px solid rgba(0, 0, 0, 0.1);
        }
        
        .theme-preview-light {
            background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #ffffff 100%);
        }
        
        .theme-preview-light::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            background: #e5e7eb;
            border-radius: 4px;
        }
        
        .theme-preview-light::after {
            content: '';
            position: absolute;
            top: 32px;
            left: 8px;
            width: 40px;
            height: 8px;
            background: #e5e7eb;
            border-radius: 4px;
        }
        
        .theme-preview-dark {
            background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #1f2937 100%);
        }
        
        .theme-preview-dark::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            background: #374151;
            border-radius: 4px;
        }
        
        .theme-preview-dark::after {
            content: '';
            position: absolute;
            top: 32px;
            left: 8px;
            width: 40px;
            height: 8px;
            background: #374151;
            border-radius: 4px;
        }
        
        .theme-preview-auto {
            background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #1f2937 50%, #1f2937 100%);
        }
        
        .theme-preview-auto::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            width: 20px;
            height: 20px;
            background: #e5e7eb;
            border-radius: 4px;
        }
        
        .theme-preview-auto::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            background: #374151;
            border-radius: 4px;
        }
        
        .theme-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        
        .theme-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .theme-badge {
            font-size: 9px;
            padding: 2px 6px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            border-radius: 3px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .theme-check {
            position: absolute;
            top: 8px;
            right: 8px;
            color: var(--primary-color);
            font-size: 18px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .theme-option.active .theme-check {
            opacity: 1;
        }
        




        @media (max-width: 768px) {
            .theme-selector {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            
            .theme-option {
                flex-direction: column;
                align-items: center;
                padding: 12px 8px;
                min-height: 100px;
            }
            
            .theme-preview {
                width: 100%;
                height: 50px;
                margin-bottom: 8px;
                margin-right: 0;
                flex-shrink: 0;
            }
            
            .theme-label {
                flex: 1;
                align-items: center;
                text-align: center;
            }
            
            .theme-name {
                font-size: 12px;
            }
            
            .theme-badge {
                font-size: 8px;
                padding: 1px 4px;
            }
            
            .theme-check {
                top: 6px;
                right: 6px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 768px) {
            .demo-badge {
                font-size: 8px;
                padding: 3px 8px;
                margin-left: 6px;
            }
        }
        
        @media (max-width: 480px) {
            .demo-badge {
                font-size: 7px;
                padding: 2px 6px;
                margin-left: 4px;
            }
        }

        .header-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-left: auto;
            padding-right: 20px;
        }

        /* Баланс в шапке (нейтральный стиль, в гамме приложения) */
        .header-balance {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            background: var(--gray-light);
            color: var(--dark-color);
            border-radius: 20px;
            font-weight: 600;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            transition: var(--transition);
        }

        .header-balance:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .header-balance i {
            font-size: 16px;
        }

        .balance-amount {
            font-size: 18px;
            font-weight: 700;
        }

        .balance-currency {
            font-size: 14px;
            opacity: 0.9;
        }

        /* Кнопка выхода как иконка */
        .logout-icon-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #e5e7eb;
            background: white;
            color: var(--gray-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 16px;
        }

        .logout-icon-btn:hover {
            background: #fee2e2;
            border-color: #ef4444;
            color: #ef4444;
            transform: scale(1.1);
        }

        /* Уведомления в шапке */
        .notifications-wrapper {
            position: relative;
        }

        .notification-icon-btn {
            position: relative;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: var(--gray-light);
            color: var(--dark-color);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .notification-icon-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            border: 2px solid white;
        }

        .notifications-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 380px;
            max-width: 90vw;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
            max-height: 500px;
            display: flex;
            flex-direction: column;
        }

        .notifications-wrapper.active .notifications-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Всплывающая панель под кнопкой: макс. 3 новых уведомления за сессию */
        .notification-toast-popup {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 320px;
            max-width: 90vw;
            background: var(--gray-light, #f3f4f6);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
            z-index: 1001;
            pointer-events: none;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .notification-toast-popup.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }
        .notification-toast-list {
            padding: 8px;
            max-height: 280px;
            overflow: hidden;
        }
        .notification-toast-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
            margin-bottom: 4px;
        }
        .notification-toast-item:last-child {
            margin-bottom: 0;
        }
        .notification-toast-item:hover {
            background: rgba(37, 99, 235, 0.08);
        }
        .notification-toast-item .toast-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 12px;
        }
        .notification-toast-item .toast-content {
            flex: 1;
            min-width: 0;
        }
        .notification-toast-item .toast-content h4 {
            margin: 0 0 4px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--dark-color, #1f2937);
        }
        .notification-toast-item .toast-content p {
            margin: 0;
            font-size: 12px;
            color: var(--gray-color, #6b7280);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .notifications-dropdown-header {
            padding: 20px;
            border-bottom: 2px solid var(--gray-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .notifications-dropdown-header h3 {
            font-size: 18px;
            margin: 0;
        }

        .mark-all-read {
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 12px;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 5px;
            transition: var(--transition);
        }

        .mark-all-read:hover {
            background: var(--gray-light);
        }

        .notifications-dropdown-list {
            max-height: 350px;
            overflow-y: auto;
            padding: 10px 0;
        }

        .notification-dropdown-item {
            padding: 15px 20px;
            border-bottom: 1px solid var(--gray-light);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .notification-dropdown-item:hover {
            background: var(--gray-light);
        }

        .notification-dropdown-item.unread {
            background: #dbeafe;
        }

        .notification-dropdown-item.unread:hover {
            background: #bfdbfe;
        }

        .notification-dropdown-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 14px;
        }

        .notification-dropdown-content {
            flex: 1;
        }

        .notification-dropdown-content h4 {
            font-size: 14px;
            margin-bottom: 4px;
            color: var(--dark-color);
        }

        .notification-dropdown-content p {
            font-size: 12px;
            color: var(--gray-color);
            margin-bottom: 4px;
        }

        .notification-dropdown-time {
            font-size: 11px;
            color: var(--gray-color);
        }

        .notifications-dropdown-footer {
            padding: 15px 20px;
            border-top: 2px solid var(--gray-light);
            text-align: center;
        }

        .notifications-dropdown-footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: var(--transition);
        }

        .notifications-dropdown-footer a:hover {
            color: var(--primary-dark);
        }

        .notifications-dropdown-list:empty::before {
            content: 'Нет новых уведомлений';
            display: block;
            text-align: center;
            padding: 40px 20px;
            color: var(--gray-color);
            font-size: 14px;
        }

        /* Виджет поддержки: кнопка в углу только на ПК (на мобильных скрыт ниже через @media max-width: 768px) */
        .support-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99999;
            display: block;
        }
        @media (min-width: 769px) {
            .support-widget {
                display: block !important;
                visibility: visible !important;
            }
        }

        .support-widget-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            border: none;
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: var(--transition);
            position: relative;
        }

        .support-widget-button:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5);
        }

        .support-widget-button.active {
            background: linear-gradient(135deg, var(--accent-color), var(--accent-dark));
        }

        .support-widget-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background: #ef4444;
            border-radius: 50%;
            border: 2px solid white;
            display: none;
        }

        .support-widget-badge.active {
            display: block;
        }

        .support-widget-window {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 380px;
            max-width: calc(100vw - 40px);
            height: 500px;
            max-height: calc(100vh - 120px);
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
            display: none;
            flex-direction: column;
            overflow: hidden;
            animation: slideUp 0.3s ease-out;
        }

        .support-widget-window.active {
            display: flex;
        }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideOutRight {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100px);
            }
        }

        .support-widget-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .support-widget-header h3 {
            margin: 0;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .support-widget-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .support-widget-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .support-widget-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #f9fafb;
        }

        .support-widget-message {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            min-width: 0;
        }

        .support-widget-message.user {
            flex-direction: row-reverse;
        }

        .support-widget-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 16px;
        }

        .support-widget-message.user .support-widget-avatar {
            background: var(--accent-color);
        }

        .support-widget-sender-name {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        .support-widget-message-content {
            max-width: 75%;
            min-width: 0;
            padding: 12px 16px;
            border-radius: 18px;
            background: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            line-height: 1.5;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .support-widget-message-content p {
            margin: 0;
            overflow-wrap: break-word;
            word-break: break-word;
            white-space: pre-wrap;
        }

        .support-widget-message.user .support-widget-message-content {
            background: white;
            color: var(--dark-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .support-widget-img-wrap {
            margin: 0;
            padding: 0;
            line-height: 0;
        }
        .support-widget-img-wrap .support-widget-chat-img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 0;
            cursor: pointer;
            display: block;
            vertical-align: middle;
        }
        .support-widget-img-wrap .support-widget-chat-img:hover {
            opacity: 0.92;
        }

        .support-image-preview-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .support-image-preview-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            cursor: pointer;
        }
        .support-image-preview-content {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .support-image-preview-content img {
            max-width: 100%;
            max-height: calc(100vh - 80px);
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            pointer-events: none;
        }
        .support-image-preview-close {
            position: absolute;
            top: -44px;
            right: 0;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .support-image-preview-close:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .support-widget-hints {
            padding: 8px 15px 10px;
            background: #f5f5f5;
            border-top: 1px solid var(--gray-light);
        }
        .support-widget-hints-header {
            margin-bottom: 6px;
        }
        .support-widget-hints-toggle {
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 12px;
            cursor: pointer;
            padding: 2px 0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .support-widget-hints-toggle:hover { text-decoration: underline; }
        .support-widget-hints-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .support-widget-hints-sub {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px dashed var(--gray-light);
        }
        .support-widget-hints-sub-title {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .support-widget-hints-order-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .support-widget-hint-order { font-family: monospace; }
        .support-widget-no-orders {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .support-widget-hint-back {
            width: 100%;
            justify-content: center;
            margin-top: 4px;
            border-style: dashed;
        }
        .support-widget-hint-back:hover {
            border-style: dashed;
        }
        .support-widget-hint {
            padding: 6px 12px;
            border-radius: 16px;
            border: 1px solid var(--gray-light);
            background: white;
            color: var(--text-color);
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
        }
        .support-widget-hint:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background: rgba(37, 99, 235, 0.08);
        }

        .support-widget-input-area {
            padding: 15px;
            background: white;
            border-top: 2px solid var(--gray-light);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .support-widget-resolved {
            padding: 6px 10px;
            font-size: 12px;
            color: var(--text-secondary);
            background: none;
            border: 1px solid var(--gray-light);
            border-radius: 8px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .support-widget-resolved:hover {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .support-widget-attach {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--gray-light);
            color: var(--gray-color);
            border: 2px solid var(--gray-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: var(--transition);
        }
        .support-widget-attach:hover,
        .support-widget-attach-has-file {
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .support-widget-input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid var(--gray-light);
            border-radius: 25px;
            font-size: 14px;
            font-family: 'Roboto', sans-serif;
            transition: var(--transition);
        }

        .support-widget-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .support-widget-send {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .support-widget-send:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            /* На мобильных скрываем кнопку поддержки в углу — только на ПК; в настройках есть пункт «Техподдержка» */
            .support-widget {
                display: none !important;
            }
        }

        .btn {
            padding: 9px 20px;
            border-radius: var(--profile-radius-sm);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border: 1px solid transparent;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            white-space: nowrap;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .btn-logout {
            background-color: transparent;
            color: var(--dark-color);
            border: 2px solid #e5e7eb;
        }

        .btn-logout:hover {
            background-color: #f3f4f6;
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        /* Основной контент */
        .profile-section {
            padding: 24px 0 80px;
            width: 100%;
            max-width: 100%;
            margin: 0;
            overflow-x: hidden;
            box-sizing: border-box;
            min-height: calc(100vh - var(--header-height) - 80px);
        }
        
        @media (max-width: 768px) {
            .profile-section {
                padding: 0 0 90px;
                position: relative;
                z-index: 1;
            }
        }

        /* Нижняя навигация: прижата к низу, небольшой отступ снизу под индикатор */
        .mobile-bottom-nav {
            display: flex;
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100%;
            background: white;
            border-top: 1px solid #e2e8f0;
            box-shadow: 0 -4px 20px rgba(15,23,42,0.07);
            border-radius: var(--profile-radius-xl) var(--profile-radius-xl) 0 0;
            z-index: 1000;
            padding-bottom: 0.5rem;
        }

        @media (min-width: 769px) {
            .mobile-bottom-nav {
                display: none;
            }
        }

        .mobile-bottom-nav-items {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
        }

        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px 15px;
            cursor: pointer;
            transition: var(--transition);
            color: var(--gray-color);
            text-decoration: none;
            flex: 1;
            min-width: 0;
        }

        .mobile-nav-item i {
            font-size: 22px;
            transition: var(--transition);
        }

        .mobile-nav-item span {
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
        }

        .mobile-nav-item.active {
            color: var(--primary-color);
        }

        .mobile-nav-item.active i {
            transform: scale(1.1);
        }

        .mobile-nav-item:active {
            transform: scale(0.95);
        }

        /* Мобильный вид чатов */
        .mobile-chat-view {
            display: none;
        }

        .mobile-chat-back {
            display: none;
            padding: 15px 20px;
            background: white;
            border-bottom: 2px solid var(--gray-light);
            cursor: pointer;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        /* На ПК версии кнопка выхода из чата должна быть скрыта */
        @media (min-width: 769px) {
            .mobile-chat-back {
                display: none !important;
            }
            
            .mobile-chat-header {
                display: none !important;
            }
            
            /* На ПК версии скрываем мобильные элементы безопасности в настройках */
            .mobile-security-content {
                display: none !important;
            }
            
            /* На ПК версии показываем пункт "Безопасность" в навигации */
            .profile-sidebar ul li a[data-section="security"] {
                display: block !important;
            }
        }

        .mobile-chat-back i {
            font-size: 18px;
        }

        .profile-header {
            display: none; /* Убираем синий хедер профиля */
        }

        .profile-header-content {
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            color: var(--primary-color);
            border: 5px solid rgba(255, 255, 255, 0.3);
        }

        .profile-info h1 {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .profile-info p {
            font-size: 18px;
            opacity: 0.9;
        }

        /* Контент профиля: мобильные — одна колонка; ПК — сайдбар + контент */
        .profile-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
            box-sizing: border-box;
            align-items: start; /* sidebar не растягивается под высоту контента */
        }

        /* Боковое меню: только на ПК */
        .profile-sidebar {
            display: none;
        }

        @media (min-width: 769px) {
            .profile-content {
                grid-template-columns: 260px 1fr;
                margin-left: 0;
                align-items: start;
            }
            .profile-sidebar {
                display: block;
                order: 1;
                margin-right: 0;
                width: 260px;
                min-width: 260px;
                background: white;
                padding: 12px 8px;
                box-shadow: none;
                height: fit-content;
                position: sticky;
                top: calc(var(--header-height) + 16px);
                border-right: none;
                box-sizing: border-box;
                border-radius: var(--profile-radius-lg);
            }
            .profile-sidebar .sidebar-menu {
                padding: 0;
            }
            .profile-sidebar .sidebar-menu a {
                border-radius: var(--profile-radius-sm);
            }
            .profile-sidebar .sidebar-menu li {
                margin-bottom: 2px;
            }
        }

        .profile-section-content {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        .sidebar-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .sidebar-menu li {
            margin: 0;
            padding: 0;
        }

        .sidebar-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            min-height: 44px;
            box-sizing: border-box;
            color: var(--gray-color);
            text-decoration: none;
            border-radius: var(--profile-radius-sm);
            transition: var(--transition);
            border-left: 3px solid transparent;
            cursor: pointer;
            pointer-events: auto;
        }

        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: var(--gray-light);
            color: var(--primary-color);
            border-left-color: var(--primary-color);
        }

        .sidebar-menu i.fa-chevron-right {
            margin-left: auto;
            flex-shrink: 0;
        }

        .sidebar-menu i:not(.submenu-toggle) {
            width: 20px;
            flex-shrink: 0;
            text-align: center;
        }

        /* Подменю для услуг */
        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: var(--gray-light);
            border-radius: 0 0 var(--profile-radius-sm) var(--profile-radius-sm);
        }

        .submenu.active {
            max-height: 500px;
        }

        .submenu-item {
            padding: 10px 20px 10px 50px;
            display: flex;
            align-items: center;
            min-height: 40px;
            box-sizing: border-box;
            color: var(--gray-color);
            text-decoration: none;
            transition: var(--transition);
            border-left: 3px solid transparent;
            font-size: 14px;
            cursor: pointer;
            pointer-events: auto;
        }

        .submenu-item:hover,
        .submenu-item.active {
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            border-left-color: var(--primary-color);
        }

        .menu-item-with-submenu {
            position: relative;
        }

        .menu-item-with-submenu .submenu-toggle {
            position: absolute;
            right: 15px;
            transition: transform 0.3s ease;
        }

        .menu-item-with-submenu.active .submenu-toggle {
            transform: rotate(90deg);
        }

        .profile-main {
            order: 2;
            min-width: 0;
            background: white;
            border-radius: var(--profile-radius-lg);
            padding: 28px 32px 48px;
            box-shadow: 0 1px 3px rgba(15,23,42,0.06);
            margin-top: 0;
            /* Минимальная высота предотвращает резкое схлопывание при смене секций */
            min-height: calc(100vh - var(--header-height) - 80px);
        }

        @media (max-width: 768px) {
            .profile-main {
                padding: 15px 0 90px 0;
                margin-left: 0;
                margin-right: 0;
            }
            .profile-section-content {
                padding-bottom: 20px;
            }
        }

        @media (min-width: 769px) {
            .profile-main {
                margin-left: 20px;
                margin-right: 0;
                border-radius: var(--profile-radius-lg);
                background: white;
            }
        }

        .section-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 24px;
            color: var(--dark-color);
            position: relative;
            padding-bottom: 0;
            letter-spacing: -0.4px;
        }
        
        /* Для настроек - более минималистичный заголовок */
        #settings-section .section-title {
            font-size: 24px;
            margin-bottom: 20px;
            padding-bottom: 0;
        }
        
        #settings-section .section-title::after {
            display: none;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: var(--profile-radius-sm);
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 40px;
        }

        .info-card {
            padding: 20px;
            background: white;
            border-radius: var(--profile-radius-md);
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(15,23,42,0.06);
            transition: var(--transition);
        }

        .info-card h3 {
            font-size: 12px;
            color: var(--gray-color);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-card p {
            font-size: 20px;
            font-weight: 700;
            color: var(--dark-color);
            margin: 0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            color: var(--gray-color);
            font-weight: 500;
            font-size: 13px;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #e2e8f0;
            border-radius: var(--profile-radius-sm);
            font-size: 14px;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            background: white;
            color: var(--dark-color);
            box-shadow: 0 1px 2px rgba(15,23,42,0.05);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }
        
        /* Стили для настроек - современный вид без квадратиков */
        #settings-section {
            padding: 0;
        }
        
        #settings-section .settings-section-block h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            color: #111827;
            letter-spacing: -0.3px;
        }
        
        #settings-section .form-group input:focus,
        #settings-section .form-group textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .orders-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .order-card {
            padding: 18px 20px;
            background: white;
            border-radius: var(--profile-radius-md);
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(15,23,42,0.06);
            transition: var(--transition);
        }

        .order-card:hover {
            transform: none;
            border-color: #bfdbfe;
            box-shadow: 0 4px 12px rgba(15,23,42,0.08);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .order-id {
            font-weight: 700;
            color: var(--primary-color);
        }

        .order-status {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        .status-pending {
            background: #fef3c7;
            color: #d97706;
        }

        .status-processing {
            background: #eff6ff;
            color: var(--primary-color);
        }

        .status-completed {
            background: #d1fae5;
            color: #059669;
        }

        .status-cancelled {
            background: #fee2e2;
            color: #ef4444;
        }

        .order-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            color: var(--gray-color);
            font-size: 14px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--gray-color);
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.3;
        }

        /* Модальное окно «Детали заказа» — liquid glass, блюр вокруг, клик снаружи закрывает */
        .order-details-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 10000;
            overflow-y: auto;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.18);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .order-details-modal.active {
            display: flex;
        }
        .order-details-modal-content {
            max-width: 560px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: var(--profile-radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 24px 48px rgba(31, 38, 135, 0.12);
        }
        .order-details-modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-details-modal-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--dark-color);
        }
        .order-details-modal-close {
            background: transparent;
            border: none;
            font-size: 24px;
            color: var(--gray-color);
            cursor: pointer;
            padding: 0;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s, color 0.2s;
        }
        .order-details-modal-close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: var(--dark-color);
        }
        .order-details-modal-body {
            padding: 20px;
            max-height: calc(90vh - 140px);
            overflow-y: auto;
        }
        .order-details-modal-footer {
            padding: 14px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            justify-content: flex-end;
        }
        .order-details-modal-footer .btn {
            padding: 10px 20px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .order-details-modal {
                padding: 0;
                align-items: flex-end;
            }
            .order-details-modal-content {
                max-width: 100%;
                margin: 0;
                border-radius: 20px 20px 0 0;
                max-height: 88vh;
            }
            .order-details-modal-header {
                padding: 14px 16px;
            }
            .order-details-modal-header h2 {
                font-size: 17px;
            }
            .order-details-modal-body {
                padding: 16px;
            }
            .order-details-modal-footer {
                padding: 12px 16px;
            }
        }

        /* Модалка «Подтверждение оплаты заказа» — liquid glass, без реквизитов */
        .order-payment-confirmation-modal {
            position: fixed;
            inset: 0;
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, 0.18);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .order-payment-confirmation-content {
            max-width: 440px;
            width: 100%;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: var(--profile-radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 24px 48px rgba(31, 38, 135, 0.12);
            overflow: hidden;
        }
        .order-payment-confirmation-header {
            text-align: center;
            padding: 20px 20px 12px;
        }
        .order-payment-confirmation-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 24px;
            color: white;
        }
        .order-payment-confirmation-icon.ok { background: var(--primary-color); }
        .order-payment-confirmation-icon.warn { background: #ef4444; }
        .order-payment-confirmation-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--dark-color);
        }
        .order-payment-confirmation-body {
            padding: 12px 20px 20px;
        }
        .order-payment-confirmation-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            font-size: 14px;
        }
        .order-payment-confirmation-row .label { color: var(--gray-color); }
        .order-payment-confirmation-row .value { font-weight: 600; color: var(--dark-color); }
        .order-payment-confirmation-row .value.ok { color: #10b981; }
        .order-payment-confirmation-row .value.warn { color: #ef4444; }
        .order-payment-confirmation-row.highlight .value { font-size: 18px; color: var(--primary-color); }
        .order-payment-confirmation-alert {
            margin-top: 14px;
            padding: 12px 14px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: var(--profile-radius-sm);
            font-size: 13px;
            color: #991b1b;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .order-payment-confirmation-alert i { margin-top: 2px; }
        .order-payment-confirmation-footer {
            padding: 16px 20px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        .order-payment-confirmation-footer .btn { padding: 10px 20px; font-size: 14px; }
        .order-payment-confirmation-footer .btn-secondary { background: #6b7280; color: white; border: none; border-radius: 8px; cursor: pointer; }
        .order-payment-confirmation-footer .btn-secondary:hover { background: #4b5563; }
        .order-payment-confirmation-footer .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

        /* Секция услуг */
        .services-list {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .service-order-card {
            background: white;
            border: 2px solid var(--gray-light);
            border-radius: var(--profile-radius-lg);
            padding: 30px;
            transition: var(--transition);
        }

        .service-order-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 5px 20px rgba(37, 99, 235, 0.1);
        }

        .service-card {
            transition: var(--transition);
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
        }

        .service-order-header {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--gray-light);
        }

        .service-order-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border-radius: var(--profile-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            flex-shrink: 0;
        }

        .service-order-info {
            flex: 1;
        }

        .service-order-info h3 {
            font-size: 24px;
            margin-bottom: 8px;
            color: var(--dark-color);
        }

        .service-order-info p {
            color: var(--gray-color);
            margin-bottom: 10px;
            font-size: 15px;
        }

        .service-price {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
        }

        .service-order-form {
            margin-top: 20px;
        }

        .form-select {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e5e7eb;
            border-radius: var(--profile-radius-sm);
            font-size: 16px;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            background-color: white;
            cursor: pointer;
        }

        .form-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .form-file {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            transition: var(--transition);
            font-family: 'Roboto', sans-serif;
            cursor: pointer;
        }

        .form-file:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .color-palette {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .color-option {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid transparent;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .color-option.selected {
            border-color: var(--primary-color);
            transform: scale(1.15);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
        }

        .color-option.unavailable {
            opacity: 0.3;
            cursor: not-allowed;
            position: relative;
        }

        .color-option.unavailable::after {
            content: '✗';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ef4444;
            font-size: 20px;
            font-weight: bold;
        }

        .material-status {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            display: none;
        }

        .material-status.in-stock {
            background-color: #d1fae5;
            color: #059669;
            border-left: 4px solid #10b981;
        }

        .material-status.out-of-stock {
            background-color: #fee2e2;
            color: #dc2626;
            border-left: 4px solid #ef4444;
        }

        .material-status.on-order {
            background-color: #fef3c7;
            color: #d97706;
            border-left: 4px solid #f59e0b;
        }

        .service-order-note {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px;
            background-color: #fef3c7;
            border-radius: 10px;
            color: #d97706;
            border-left: 4px solid #f59e0b;
            margin-top: 15px;
        }

        .service-order-note i {
            font-size: 20px;
        }

        @media (max-width: 968px) {
            html {
                overflow-x: hidden;
            }
            .profile-content {
                grid-template-columns: 1fr;
                margin-top: 0;
                min-width: 0;
                overflow-x: hidden;
            }

            .profile-sidebar {
                display: none;
            }
            
            .profile-main {
                padding: 15px 0 90px 0;
                margin-top: 0;
                margin-left: 0;
                margin-right: 0;
                min-width: 0;
                overflow-x: hidden;
            }
            
            /* На мобильных у секций кроме сообщений — боковые отступы */
            .profile-main .profile-section-content:not(#messages-section) {
                padding-left: 16px;
                padding-right: 16px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .mobile-bottom-nav {
                display: block;
            }

            /* Секция сообщений — от края до края, высота = экран минус хедер, без прокрутки снаружи */
            #messages-section {
                padding: 0 !important;
                margin: 0 !important;
                margin-top: -15px !important;
                margin-left: calc(50% - 50vw) !important;
                margin-right: calc(50% - 50vw) !important;
                position: relative;
                z-index: 0;
                height: calc(100vh - var(--header-height) - env(safe-area-inset-top, 0)) !important;
                min-height: 0 !important;
                width: 100vw !important;
                max-width: 100vw !important;
                min-width: 100vw !important;
                box-sizing: border-box;
                background: var(--chat-bg);
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
            }

            #messages-section .section-title {
                display: none !important;
            }

            #messages-section .messages-filter-controls {
                display: none !important;
            }

            .messages-section {
                grid-template-columns: 1fr !important;
                flex: 1 !important;
                min-height: 0 !important;
                border: none !important;
                border-radius: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                position: relative;
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                background: var(--chat-bg) !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
            }

            /* Список чатов — единственный скролл на мобильных */
            .messages-list {
                /* Без !important на display — JS может скрыть через style.display = 'none' */
                display: flex;
                flex-direction: column !important;
                width: 100% !important;
                flex: 1 !important;
                min-height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                background: var(--chat-bg) !important;
                position: relative !important;
                z-index: 1 !important;
                max-width: 100% !important;
            }
            
            /* Элементы списка: блок от края до края, аватар чуть от края, без выделения текста */
            .messages-list .message-item {
                padding: 14px 0 !important;
                padding-left: calc(10px + env(safe-area-inset-left, 0)) !important;
                padding-right: env(safe-area-inset-right, 0) !important;
                border-bottom: 1px solid var(--chat-divider) !important;
                background: transparent !important;
                border-left: none !important;
                border-radius: 0 !important;
                color: var(--chat-text) !important;
                -webkit-user-select: none !important;
                user-select: none !important;
            }
            
            .messages-list .message-item:hover {
                background: var(--chat-hover) !important;
            }
            
            .messages-list .message-item.active {
                background: var(--chat-active) !important;
                border-left: none !important;
            }
            
            .messages-list .message-item.unread {
                background: rgba(47, 119, 255, 0.12) !important;
            }
            
            .messages-list .message-item-avatar {
                width: 48px !important;
                height: 48px !important;
                background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
                border: 1px solid var(--chat-divider) !important;
                color: white !important;
            }
            

            .messages-list .message-item-title {
                color: var(--chat-text) !important;
                font-size: 15px !important;
                font-weight: 700 !important;
            }
            
            .messages-list .message-item-preview {
                color: var(--chat-subtext) !important;
                font-size: 13px !important;
            }
            
            .messages-list .message-item-time {
                color: var(--chat-subtext) !important;
                font-size: 12px !important;
                margin-right: 0 !important;
            }
            /* Троеточие (меню) чуть от правого края; на мобильных всегда видно */
            .messages-list .message-item-actions {
                padding-right: 12px !important;
                opacity: 1 !important;
                visibility: visible !important;
            }
            .messages-list .message-item-header {
                padding-right: 0 !important;
            }

            .messages-list.mobile-visible {
                display: flex !important;
            }
            
            /* Скрываем список только когда чат открыт на мобильных */
            .order-chat-container.mobile-visible ~ .messages-list,
            .order-chat-container.mobile-visible + .messages-list,
            .messages-section:has(.order-chat-container.mobile-visible) .messages-list {
                display: none !important;
            }
            
            /* На ПК версии список должен показываться всегда */
            @media (min-width: 769px) {
                .order-chat-container.mobile-visible ~ .messages-list,
                .order-chat-container.mobile-visible + .messages-list,
                .messages-section:has(.order-chat-container.mobile-visible) .messages-list {
                    display: flex !important;
                }
            }
            
            /* Убеждаемся, что чат не перекрывает список когда скрыт на мобильной версии */
            .order-chat-container:not(.mobile-visible) {
                display: none !important;
            }
            
            /* На ПК версии чат должен показываться нормально */
            @media (min-width: 769px) {
                .order-chat-container:not(.mobile-visible) {
                    display: flex !important;
                }
            }
            
            /* Пустое состояние */
            .messages-list .empty-state {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 40px 20px;
                text-align: center;
                color: var(--chat-subtext);
                height: 100%;
            }
            
            .messages-list .empty-state i {
                font-size: 48px;
                margin-bottom: 15px;
                opacity: 0.5;
            }
            
            .messages-list .empty-state h3 {
                font-size: 18px;
                margin-bottom: 10px;
                color: var(--chat-text);
            }
            
            /* ── МОБИЛЬНЫЙ ЧАТ ────────────────────────────────────────────────────────
               Шапка чата (кнопка «назад» + название) — по умолчанию скрыта,
               появляется только когда чат открыт. Позиция: вместо основного хедера.
               Сам контейнер чата занимает весь экран, прокручиваются только сообщения.
               Поле ввода жёстко внизу.
            ──────────────────────────────────────────────────────────────────────── */

            /* Чат по умолчанию скрыт */
            .order-chat-container {
                display: none !important;
            }

            /* Шапка чата по умолчанию скрыта */
            .mobile-chat-header {
                display: none;
                position: fixed;
                /* Начинаем ровно под статус-баром / Dynamic Island */
                top: env(safe-area-inset-top, 0);
                left: 0;
                right: 0;
                height: var(--header-height);
                padding-top: 0;
                padding-left: calc(12px + env(safe-area-inset-left, 0));
                padding-right: calc(12px + env(safe-area-inset-right, 0));
                z-index: 1100;
                background: var(--chat-bg, #ffffff);
                border-bottom: 1px solid var(--chat-divider, #e5e7eb);
                align-items: center;
                gap: 12px;
                box-sizing: border-box;
                touch-action: none;
                overscroll-behavior: none;
                -webkit-user-select: none;
                user-select: none;
            }

            /* ── Когда чат открыт ──────────────────────────────────────────────────── */

            /* Шапка появляется */
            .mobile-chat-header.show {
                display: flex !important;
            }

            /* Страница и html — блокируем прокрутку и pull-to-refresh */
            html:has(.order-chat-container.mobile-visible) {
                overflow: hidden !important;
                overscroll-behavior: none !important;
                touch-action: none !important;
                height: 100% !important;
            }
            body:has(.order-chat-container.mobile-visible) {
                overflow: hidden !important;
                overscroll-behavior: none !important;
                touch-action: none !important;
                height: 100% !important;
                padding-top: 0 !important;
            }

            /* Основной хедер и нижняя навигация скрыты */
            body:has(.order-chat-container.mobile-visible) header,
            body:has(.order-chat-container.mobile-visible) .mobile-bottom-nav {
                display: none !important;
            }

            /* Контейнер чата — жёстко на весь экран, flex-колонка */
            .order-chat-container.mobile-visible {
                display: flex !important;
                flex-direction: column !important;
                position: fixed !important;
                /* top/bottom/left/right задают размер — без height, иначе iOS Safari оставляет зазор */
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0)) !important;
                z-index: 1050 !important;
                overflow: hidden !important;
                background: #ffffff !important;
                box-sizing: border-box !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                touch-action: auto !important;
            }

            /* Список сообщений — только он скроллится, растягивается на свободное место */
            .order-chat-container.mobile-visible .order-chat-messages {
                flex: 1 1 0 !important;
                min-height: 0 !important;
                overflow-y: scroll !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
                scroll-behavior: smooth !important;
                padding: 12px !important;
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin: 0 !important;
                touch-action: pan-y !important;
            }

            /* Поле ввода — просто последний flex-элемент в колонке контейнера (не fixed!) */
            .order-chat-container.mobile-visible .order-chat-input-area {
                position: relative !important;
                flex-shrink: 0 !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
                z-index: 1060 !important;
                display: flex !important;
                gap: 10px !important;
                align-items: flex-end !important;
                padding: 10px !important;
                padding-left: max(12px, env(safe-area-inset-left, 0)) !important;
                padding-right: max(12px, env(safe-area-inset-right, 0)) !important;
                /* safe area снизу для iPhone с home indicator */
                padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
                background: #ffffff !important;
                background-color: #ffffff !important;
                opacity: 1 !important;
                border-top: 1px solid #e5e7eb !important;
                box-sizing: border-box !important;
                width: 100% !important;
                margin: 0 !important;
                touch-action: none !important;
                overscroll-behavior: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;
            }

            /* Скрываем список когда чат открыт: :has() + класс-фоллбэк для JS */
            .messages-section:has(.order-chat-container.mobile-visible) .messages-list,
            .messages-list.chat-hidden {
                display: none !important;
            }

            /* Заголовок внутри самого контейнера чата — скрыт на мобильных */
            .order-chat-container .order-chat-header {
                display: none !important;
            }

            /* empty-chat по умолчанию скрыт на мобильных */
            .order-chat-container .empty-chat {
                display: none !important;
            }
            .order-chat-container.mobile-visible .empty-chat {
                display: flex !important;
            }

            /* ── ПК: сбрасываем всё мобильное ──────────────────────────────────────── */
            @media (min-width: 769px) {
                html:has(.order-chat-container.mobile-visible),
                body:has(.order-chat-container.mobile-visible) {
                    overflow: auto !important;
                    height: auto !important;
                    padding-top: 0 !important;
                    touch-action: auto !important;
                }
                body:has(.order-chat-container.mobile-visible) header {
                    display: flex !important;
                }
                .order-chat-container {
                    display: flex !important;
                    position: static !important;
                    width: auto !important;
                    height: 100% !important;
                    z-index: auto !important;
                    background: var(--chat-surface) !important;
                    padding-top: 0 !important;
                    overflow: visible !important;
                    touch-action: auto !important;
                }
                .order-chat-container .order-chat-header {
                    display: flex !important;
                }
                .mobile-chat-header {
                    display: none !important;
                }
                .order-chat-container.mobile-visible {
                    position: static !important;
                    width: auto !important;
                    height: 100% !important;
                    padding-top: 0 !important;
                    overflow: visible !important;
                }
                .order-chat-container.mobile-visible .order-chat-input-area {
                    position: static !important;
                    flex-shrink: 1 !important;
                    width: auto !important;
                    padding-bottom: 10px !important;
                    z-index: auto !important;
                    touch-action: auto !important;
                }
                .order-chat-container.mobile-visible .order-chat-messages {
                    overflow-y: auto !important;
                    padding-bottom: 20px !important;
                    touch-action: auto !important;
                }
            }

            /* ── Кнопка «назад» и название ────────────────────────────────────────── */
            .mobile-chat-back-btn {
                width: 40px !important;
                height: 40px !important;
                border-radius: 50% !important;
                border: none !important;
                background: rgba(148, 163, 184, 0.15) !important;
                color: var(--chat-text, #1e293b) !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex-shrink: 0 !important;
                transition: background 0.15s !important;
            }
            .mobile-chat-back-btn:active {
                background: var(--primary-color) !important;
                color: white !important;
            }
            .mobile-chat-back-btn i {
                font-size: 18px !important;
            }
            .mobile-chat-title {
                flex: 1 !important;
                font-size: 17px !important;
                font-weight: 600 !important;
                color: var(--chat-text, #1e293b) !important;
                text-align: center !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                padding-right: 52px !important; /* компенсирует кнопку слева, держит текст по центру */
            }
            
            /* Сообщения на ПК */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-messages {
                    flex: 1 !important;
                    padding: 20px !important;
                    max-height: calc(100vh - 350px) !important;
                    min-height: 400px !important;
                    overflow-y: auto !important;
                    overflow-x: hidden !important;
                    display: flex !important;
                    flex-direction: column !important;
                    gap: 15px !important;
                    scroll-behavior: smooth !important;
                    margin: 0 !important;
                    width: auto !important;
                    max-width: none !important;
                    order: unset !important;
                }
            }
            
            /* На ПК версии сообщения должны быть как раньше */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-message {
                    margin-bottom: 15px !important;
                    padding: 0 !important;
                    width: auto !important;
                    max-width: 70% !important;
                    min-width: 0 !important;
                    display: flex !important;
                    gap: 10px !important;
                }
            }
            
            /* Сообщения чата - адаптация под ширину экрана */
            .order-chat-container.mobile-visible .order-chat-message {
                margin-bottom: 15px !important;
                padding: 0 !important;
                width: auto !important;
                max-width: calc(100% - 20px) !important; /* Учитываем отступы контейнера */
                min-width: 0 !important;
                display: flex !important;
                gap: 10px !important;
            }
            
            /* Сообщения оператора - слева, прижаты к левому краю */
            .order-chat-container.mobile-visible .order-chat-message:not(.user) {
                align-self: flex-start !important;
                margin-right: auto !important;
                margin-left: 0 !important;
                max-width: calc(100% - 20px) !important;
            }
            
            /* Сообщения пользователя - справа, прижаты к правому краю без отступа */
            .order-chat-container.mobile-visible .order-chat-message.user {
                align-self: flex-end !important;
                flex-direction: row-reverse !important;
                margin-left: auto !important;
                margin-right: 0 !important;
                max-width: calc(100% - 20px) !important;
            }
            
            /* Контент сообщений не должен вылезать за границы */
            .order-chat-container.mobile-visible .order-chat-message-content {
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
            }
            
            .order-chat-container.mobile-visible .order-chat-message-content {
                padding: 12px 16px !important;
                font-size: 14px !important;
                line-height: 1.5 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                max-width: 100% !important;
                white-space: normal !important;
                box-sizing: border-box !important;
            }
            
            .order-chat-container.mobile-visible .order-chat-message-content p {
                margin: 0 !important;
                padding: 0 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
            }
            
            /* На ПК версии message-content должен быть как раньше */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-message-content {
                    background: white !important;
                    padding: 12px 16px !important;
                    border-radius: 18px !important;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
                    font-size: 14px !important;
                    line-height: 1.5 !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                    overflow-wrap: break-word !important;
                    word-break: break-word !important;
                    word-wrap: break-word !important;
                    white-space: normal !important;
                }
                
                .order-chat-container .order-chat-message.user .order-chat-message-content {
                    background: var(--primary-color) !important;
                    color: white !important;
                }
                
                .order-chat-container .order-chat-avatar {
                    width: 36px !important;
                    height: 36px !important;
                    border-radius: 50% !important;
                    background: var(--primary-color) !important;
                    color: white !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    flex-shrink: 0 !important;
                    font-size: 14px !important;
                }
                
                .order-chat-container .order-chat-message.user .order-chat-avatar {
                    background: var(--accent-color) !important;
                }
            }
            
            .order-chat-container.mobile-visible .order-chat-avatar {
                width: 36px !important;
                height: 36px !important;
                font-size: 14px !important;
                flex-shrink: 0 !important;
            }
            
            /* Пустое состояние чата */
            .order-chat-container .empty-chat {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
                color: var(--gray-color);
                text-align: center;
                padding: 40px 20px;
            }
            
            .order-chat-container .empty-chat i {
                font-size: 64px;
                margin-bottom: 20px;
                opacity: 0.3;
            }
            
            .order-chat-container .empty-chat h3 {
                font-size: 20px;
                margin-bottom: 10px;
                color: var(--dark-color);
            }

            /* Поле ввода на ПК — в потоке */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-input-area {
                    position: static !important;
                    bottom: auto !important;
                    left: auto !important;
                    right: auto !important;
                    background: white !important;
                    border-top: 2px solid var(--gray-light) !important;
                    padding: 15px !important;
                    margin: 0 !important;
                    flex-shrink: 0 !important;
                    z-index: auto !important;
                    display: flex !important;
                    gap: 10px !important;
                    align-items: flex-end !important;
                    width: auto !important;
                    box-sizing: border-box !important;
                    order: unset !important;
                }
            }
            
            .order-chat-container .order-chat-input-wrapper {
                margin: 0 !important;
                flex: 1 !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 10px !important;
            }
            
            /* На ПК версии input-wrapper должен быть как раньше */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-input-wrapper {
                    flex: 1 !important;
                    display: flex !important;
                    flex-direction: column !important;
                    gap: 10px !important;
                    margin: 0 !important;
                }
            }

            .order-chat-container .order-chat-input {
                padding: 12px 15px !important;
                border-radius: 20px !important;
                border: 1px solid #e5e7eb !important;
                font-size: 15px !important;
                width: 100% !important;
                resize: none !important;
                min-height: 44px !important;
                max-height: 120px !important;
                font-family: 'Roboto', sans-serif !important;
            }
            
            /* На ПК версии input должен быть как раньше */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-input {
                    width: 100% !important;
                    padding: 12px 15px !important;
                    border: 2px solid var(--gray-light) !important;
                    border-radius: 25px !important;
                    font-size: 14px !important;
                    font-family: 'Roboto', sans-serif !important;
                    resize: none !important;
                    min-height: 44px !important;
                    max-height: 120px !important;
                }
            }

            .order-chat-container .order-chat-input:focus {
                outline: none !important;
                border-color: var(--primary-color) !important;
            }
            
            /* На ПК версии focus должен быть как раньше */
            @media (min-width: 769px) {
                .order-chat-container .order-chat-input:focus {
                    outline: none !important;
                    border-color: var(--primary-color) !important;
                }
            }

            .order-chat-container .order-chat-actions {
                display: flex !important;
                gap: 8px !important;
                align-items: center !important;
                flex-shrink: 0 !important;
            }

            .order-chat-container .image-upload-btn {
                width: 40px !important;
                height: 40px !important;
                border-radius: 50% !important;
                border: none !important;
                background: var(--gray-light) !important;
                color: var(--gray-color) !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transition: var(--transition) !important;
            }

            .order-chat-container .image-upload-btn:hover {
                background: var(--primary-color) !important;
                color: white !important;
            }

            .order-chat-container .order-chat-send-btn {
                width: 40px !important;
                height: 40px !important;
                border-radius: 50% !important;
                border: none !important;
                background: var(--primary-color) !important;
                color: white !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                transition: var(--transition) !important;
            }

            .order-chat-container .order-chat-send-btn:hover {
                background: var(--primary-dark) !important;
                transform: scale(1.05) !important;
            }

            /* Убираем отступы в элементах списка чатов */
            .message-item {
                padding: 12px 12px !important;
                border-bottom: 1px solid #e5e7eb;
                margin: 0;
                display: flex;
                gap: 10px;
                align-items: center;
                width: 100%;
                max-width: 100%;
                border-radius: 0;
            }

            .message-item-avatar {
                width: 44px !important;
                height: 44px !important;
                font-size: 18px !important;
                flex-shrink: 0;
                margin-left: 2px;
            }

            .message-item-title {
                font-size: 15px !important;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .message-item-preview {
                font-size: 13px !important;
                color: #6b7280;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .message-item-time {
                font-size: 11px !important;
            }

            /* Дашборд - более сжатый вид на мобильных */
            #profile-section {
                padding: 10px 0;
            }

            .dashboard-widgets {
                gap: 15px;
                margin-top: 15px;
            }

            .dashboard-widget {
                padding: 15px;
                margin-bottom: 15px;
            }

            .dashboard-widget h3 {
                font-size: 16px;
                margin-bottom: 12px;
            }

            .info-grid {
                grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки на мобильных */
                gap: 10px;
                margin-bottom: 20px;
            }

            .info-card {
                padding: 12px;
            }

            .info-card h3 {
                font-size: 12px;
                margin-bottom: 6px;
            }

            .info-card p {
                font-size: 18px;
            }

            .quick-actions {
                gap: 10px;
            }

            .quick-action-btn {
                padding: 12px 15px;
                font-size: 13px;
            }
            
            /* Скрываем активность на мобильных */
            #activityWidget {
                display: none !important;
            }
            
            /* Показываем быстрые ссылки на мобильных */
            #mobileQuickLinks {
                display: block !important;
            }
            
            /* Скрываем десктопные элементы на мобильных */
            .desktop-only {
                display: none !important;
            }

            /* Показываем блок действий в настройках только на мобильных */
            /* Показываем элементы безопасности в настройках на мобильной версии */
            .mobile-security-content {
                display: block !important;
            }
            
            /* Скрываем секцию безопасности на мобильной версии */
            #security-section.profile-section-content {
                display: none !important;
            }
            
            /* Скрываем пункт "Безопасность" из навигации на мобильной версии */
            .profile-sidebar ul li a[data-section="security"],
            .mobile-nav-item[data-section="security"] {
                display: none !important;
            }
            
            .mobile-only-actions {
                display: block !important;
            }
            
            /* Скрываем кнопку загрузки на мобильной версии */
            .desktop-upload-btn {
                display: none !important;
            }
            
            /* Плавающая кнопка загрузки для мобильной версии */
            /* Плавающая кнопка загрузки для мобильной версии - показываем только в секции хранилища */
            .mobile-upload-fab {
                position: fixed;
                bottom: 110px;
                right: 20px;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
                color: white;
                border: none;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                cursor: pointer;
                z-index: 1000;
                display: none;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                transition: all 0.3s ease;
            }
            
            /* Показываем плавающую кнопку только когда секция хранилища активна */
            #storage-section.profile-section-content:not([style*="display: none"]) .mobile-upload-fab {
                display: flex !important;
            }
            
            .mobile-upload-fab:hover,
            .mobile-upload-fab:active {
                transform: scale(1.1);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
            }
            
            .mobile-upload-fab i {
                font-size: 24px;
            }
        }
        
        /* На ПК версии скрываем плавающую кнопку */
        @media (min-width: 769px) {
            .mobile-upload-fab {
                display: none !important;
            }
            
            .desktop-upload-btn {
                display: inline-block !important;
            }
        }

        /* Аналитика и статистика */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .metric-card {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 25px;
            border-radius: var(--profile-radius-lg);
            text-align: center;
            box-shadow: 0 5px 15px rgba(37, 99, 235, 0.2);
        }

        .metric-card h3 {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .metric-card .value {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .chart-container {
            background: white;
            border-radius: var(--profile-radius-lg);
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .chart-placeholder {
            height: 300px;
            background: var(--gray-light);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-color);
        }

        /* Программа лояльности */
        .loyalty-level {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 25px;
            text-align: center;
        }

        .loyalty-level h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .loyalty-progress {
            background: rgba(255, 255, 255, 0.3);
            height: 20px;
            border-radius: 10px;
            margin: 20px 0;
            overflow: hidden;
        }

        .loyalty-progress-bar {
            background: white;
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        .bonus-points {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .bonus-item {
            text-align: center;
        }

        .bonus-item .value {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .bonus-item .label {
            font-size: 14px;
            opacity: 0.9;
        }

        /* Хранилище файлов */
        .storage-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: var(--gray-light);
            border-radius: 10px;
            margin-bottom: 25px;
        }

        .file-list {
            display: grid;
            gap: 15px;
        }

        .file-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            transition: all 0.2s;
        }
        
        .file-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        @media (max-width: 768px) {
            .file-item {
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .file-list {
                display: grid;
                gap: 12px;
                grid-template-columns: 1fr;
            }
        }
        
        .file-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: var(--gray-light);
            border-radius: 10px;
            transition: var(--transition);
        }

        .file-item:hover {
            background: #e5e7eb;
            transform: translateX(5px);
        }

        .file-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }

        .file-info {
            flex: 1;
            min-width: 0; /* Позволяет flex-элементу сжиматься */
            overflow: hidden;
        }

        .file-info h4 {
            font-size: 16px;
            margin-bottom: 5px;
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            line-height: 1.4;
        }

        .file-info p {
            font-size: 12px;
            color: var(--gray-color);
        }

        .file-actions {
            display: flex;
            gap: 10px;
        }

        .btn-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: none;
            background: white;
            color: var(--primary-color);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-icon:hover {
            background: var(--primary-color);
            color: white;
        }

        /* Уведомления */
        .notifications-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .notification-item {
            padding: 20px;
            background: var(--gray-light);
            border-radius: 10px;
            border-left: 4px solid var(--primary-color);
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }

        .notification-item.unread {
            background: #dbeafe;
            border-left-color: var(--primary-color);
        }

        /* Плавное появление новых уведомлений в секции */
        .notification-item.notification-item-new {
            animation: notificationItemNew 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            will-change: transform, opacity;
        }
        .notification-item.notification-item-new:nth-child(n) {
            transform-origin: top center;
        }
        @keyframes notificationItemNew {
            0% {
                opacity: 0;
                transform: translateY(-16px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        body.theme-dark .notification-item.notification-item-new {
            animation: notificationItemNew 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notification-content {
            flex: 1;
        }

        .notification-content h4 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .notification-content p {
            font-size: 14px;
            color: var(--gray-color);
            margin-bottom: 5px;
        }

        .notification-time {
            font-size: 12px;
            color: var(--gray-color);
        }

        /* Чат с поддержкой */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 500px;
            border: 2px solid var(--gray-light);
            border-radius: 15px;
            overflow: hidden;
        }

        /* Секция сообщений — такой же внешний вид как у других секций */
        #messages-section.profile-section-content {
            padding: 0 0 24px 0;
            background: transparent;
        }

        /* Заголовок секции сообщений использует общий стиль section-title,
           поэтому здесь переопределяем только нижний отступ при необходимости */
        #messages-section .section-title {
            margin-bottom: 24px;
        }

        /* profile-main на ПК: padding 28px 32px 48px; header ~64px; profile-header ~88px; title ~48px; filter-controls ~48px */
        .messages-section {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 0;
            min-height: 360px;
            height: min(calc(100vh - 360px), 620px);
            border: 1px solid var(--border-color, rgba(148,163,184,0.25));
            border-radius: var(--profile-radius-lg, 12px);
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            background: var(--chat-bg);
            color: var(--chat-text);
            box-shadow: 0 1px 6px rgba(15,23,42,0.07);
        }
        
        /* На ПК версии секция сообщений — карточка в стиле остальных секций */
        @media (min-width: 769px) {
            .messages-section {
                display: grid !important;
                grid-template-columns: 360px 1fr !important;
                gap: 0 !important;
                min-height: 360px !important;
                height: min(calc(100vh - 360px), 620px) !important;
                max-height: 620px !important;
                border: 1px solid var(--border-color, rgba(148,163,184,0.25)) !important;
                border-radius: var(--profile-radius-lg, 12px) !important;
                overflow: hidden !important;
                position: static !important;
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                flex-direction: unset !important;
                background: var(--chat-bg) !important;
                box-shadow: 0 1px 6px rgba(15,23,42,0.07) !important;
            }
        }
        
        .order-chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            animation: fadeInChat 0.2s ease;
            background: var(--chat-surface);
        }

        @keyframes fadeInChat {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* На ПК версии контейнер чата должен быть как раньше */
        @media (min-width: 769px) {
            .order-chat-container {
                display: flex !important;
                flex-direction: column !important;
                height: 100% !important;
                overflow: hidden !important;
                position: static !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                width: auto !important;
                z-index: auto !important;
                background: var(--chat-surface) !important;
                border-radius: 0 var(--profile-radius-lg) var(--profile-radius-lg) 0 !important;
            }
            
            .order-chat-container:not(.mobile-visible) {
                display: flex !important;
            }
        }

        /* Верхняя панель фильтров в секции сообщений (ПК и мобильная версия) */
        #messages-section .messages-filter-controls {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin: 0 0 12px 0;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color, rgba(148,163,184,0.35));
        }

        #messages-section .messages-filter-tabs {
            display: inline-flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        #messages-section .messages-filter-tab {
            border: 0;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            background: var(--bg-color-light, #f3f4f6);
            color: var(--text-secondary, #6b7280);
            transition: background 0.15s ease, color 0.15s ease;
            white-space: nowrap;
        }

        #messages-section .messages-filter-tab.active {
            background: var(--primary-color);
            color: #ffffff;
        }

        .messages-list .message-item {
            display: flex;
            align-items: stretch;
            transition: background 0.15s ease;
        }

        .messages-list .message-item:hover {
            background: rgba(148, 163, 184, 0.12);
        }

        .messages-list .message-item.active {
            background: rgba(148, 163, 184, 0.14) !important;
        }

        .messages-list .message-item-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            position: relative;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s ease, visibility 0.15s ease;
        }

        .messages-list .message-item:hover .message-item-actions,
        .messages-list .message-item.active .message-item-actions {
            opacity: 1;
            visibility: visible;
        }

        .messages-list .message-item.dropdown-open {
            z-index: 1000;
            position: relative;
        }

        .messages-list .message-item-menu-btn {
            border: none;
            background: transparent;
            cursor: pointer;
            color: var(--gray-color);
            padding: 6px 8px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1;
        }

        .messages-list .message-item-menu-btn:hover {
            background: rgba(148, 163, 184, 0.15);
            color: var(--primary-color);
        }

        .messages-list .message-item-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            min-width: 200px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
            z-index: 10000;
            overflow: hidden;
        }

        .messages-list .message-item-dropdown.open {
            display: block;
        }

        .messages-list .message-item-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            border: none;
            background: #ffffff;
            padding: 12px 14px;
            font-size: 14px;
            color: #1e293b;
            cursor: pointer;
            text-align: left;
            transition: background 0.1s ease;
        }

        .messages-list .message-item-dropdown-item:hover {
            background: #f1f5f9;
        }

        .messages-list .message-item-dropdown-item i {
            width: 18px;
            text-align: center;
            color: var(--gray-color);
        }

        .messages-list .message-item-pin-icon {
            position: absolute;
            bottom: -4px;
            left: -4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color, #3b82f6);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .messages-list .message-item.support-chat {
            border-left: 3px solid var(--primary-color);
        }

        .messages-list .message-item.archived-chat {
            opacity: 0.7;
        }

        /* Разделитель завершённого тикета поддержки в merged-view */
        .support-chat-divider {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            color: var(--gray-color, #94a3b8);
            font-size: 12px;
        }

        .support-chat-divider::before,
        .support-chat-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color, rgba(148,163,184,0.3));
        }

        .messages-list {
            background: var(--chat-bg);
            border-right: 1px solid var(--chat-divider);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding: 0;
        }
        
        /* На ПК версии список сообщений — ширина, скругление слева */
        @media (min-width: 769px) {
            .messages-list {
                background: var(--chat-bg) !important;
                border-right: 1px solid var(--chat-divider) !important;
                overflow-y: auto !important;
                display: flex !important;
                flex-direction: column !important;
                width: 360px !important;
                flex: unset !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                border-right: 1px solid var(--chat-divider) !important;
                border-radius: var(--profile-radius-lg) 0 0 var(--profile-radius-lg) !important;
                position: static !important;
                min-height: auto !important;
                visibility: visible !important;
                z-index: auto !important;
            }
        }

            .message-item {
                padding: 14px 16px 14px 12px;
                border-bottom: 1px solid var(--chat-divider);
                cursor: pointer;
                transition: var(--transition);
                display: flex;
                gap: 12px;
                align-items: flex-start;
                background: transparent;
                color: var(--chat-text);
            }

            @media (max-width: 768px) {
                .message-item {
                    padding: 14px env(safe-area-inset-right, 0) 14px env(safe-area-inset-left, 0) !important;
                    border-bottom: 1px solid var(--chat-divider) !important;
                    background: transparent !important;
                    border-left: none !important;
                    border-radius: 0 !important;
                }
                
                .message-item:hover {
                    background: var(--chat-hover) !important;
                }
                
                .message-item.active {
                    background: var(--chat-active) !important;
                    border-left: none !important;
                }
                
                .message-item-avatar {
                    width: 48px !important;
                    height: 48px !important;
                    background: linear-gradient(135deg, #1f2a3f, #243452) !important;
                    border: 1px solid var(--chat-divider) !important;
                }
                
                .message-item-title {
                    color: var(--chat-text) !important;
                    font-size: 15px !important;
                }
                
                .message-item-preview {
                    color: var(--chat-subtext) !important;
                    font-size: 13px !important;
                }
                
                .message-item-time {
                    color: var(--chat-subtext) !important;
                    font-size: 12px !important;
                }
            }

        .message-item:hover {
            background: var(--chat-hover);
        }

        .message-item.active {
            background: var(--chat-active);
            border-left: none;
        }

        .message-item.unread {
            background: rgba(47, 119, 255, 0.12);
        }

        .message-item.unread .message-item-title {
            color: var(--chat-text);
        }

        .message-item.unread .message-item-preview {
            color: var(--chat-text);
            font-weight: 600;
        }

        .message-item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            border: 1px solid var(--chat-divider);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        

        .message-item-content {
            flex: 1;
            min-width: 0;
        }

        .message-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .message-item-title {
            font-weight: 700;
            font-size: 15px;
            color: var(--chat-text);
        }

        .message-item-time {
            font-size: 12px;
            color: var(--chat-subtext);
        }

        .message-item-footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 8px;
        }
        
        .message-item-preview {
            font-size: 13px;
            color: var(--chat-subtext);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }
        
        .message-item-status {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .message-item-badge {
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            margin-top: 5px;
        }

        .messages-list .empty-state {
            color: var(--chat-subtext);
        }

        .messages-list .empty-state h3 {
            color: var(--chat-text);
        }

        .order-chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--chat-surface);
            color: var(--chat-text);
        }

        @media (max-width: 768px) {
            .order-chat-container {
                background: var(--chat-surface) !important;
                display: flex !important;
                flex-direction: column !important;
            }
            
            .order-chat-container .order-chat-messages {
                order: 1;
            }
            
            .order-chat-container .order-chat-input-area {
                order: 2;
            }
        }

        .order-chat-header {
            background: var(--chat-surface);
            padding: 16px;
            border-bottom: 1px solid var(--chat-divider);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .order-chat-header-info h3 {
            font-size: 18px;
            margin-bottom: 5px;
            color: var(--chat-text);
        }

        .order-chat-header-info p {
            font-size: 13px;
            color: var(--chat-subtext);
        }

        .order-chat-messages {
            flex: 1;
            padding: 20px 16px;
            max-height: calc(100vh - 320px);
            min-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            gap: 15px;
            scroll-behavior: smooth;
            background: var(--chat-surface);
        }
        
        .chat-image {
            max-width: 300px;
            max-height: 300px;
            border-radius: 0;
            margin-top: 8px;
            cursor: pointer;
            object-fit: cover;
            display: block;
        }
        
        .chat-image-preview {
            display: inline-block;
            position: relative;
            margin: 5px;
        }
        
        .chat-image-preview img {
            max-width: 100px;
            max-height: 100px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .chat-image-preview .remove-image {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ef4444;
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .image-upload-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--gray-light);
            color: var(--gray-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 16px;
            position: relative;
        }
        
        .image-upload-btn:hover {
            background: var(--primary-color);
            color: white;
        }
        
        .image-upload-btn input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .order-chat-message {
            display: flex;
            gap: 10px;
            max-width: 70%;
        }

        .order-chat-message.user {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .order-chat-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 14px;
        }

        .order-chat-message.user .order-chat-avatar {
            background: var(--accent-color);
        }

        .order-chat-message-content {
            background: #f3f4f6;
            padding: 12px 16px;
            border-radius: 16px;
            box-shadow: none;
            border: 1px solid var(--chat-divider);
            font-size: 14px;
            line-height: 1.5;
            color: var(--dark-color);
        }
        

        .order-chat-message.user .order-chat-message-content {
            background: var(--primary-color);
            color: white;
        }

        .order-chat-message.user.order-chat-message-has-image .order-chat-message-content {
            background: #f3f4f6;
            color: var(--dark-color);
            border: 1px solid var(--chat-divider);
        }

        .order-chat-message-time {
            font-size: 11px;
            color: var(--chat-subtext);
            margin-top: 5px;
            text-align: right;
        }

        .order-chat-message.user .order-chat-message-time {
            text-align: left;
        }

        .order-chat-input-area {
            background: white;
            padding: 15px 16px;
            border-top: 1px solid var(--chat-divider);
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        

        .order-chat-input-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .order-chat-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--chat-divider);
            border-radius: 25px;
            font-size: 14px;
            font-family: 'Roboto', sans-serif;
            resize: none;
            min-height: 44px;
            max-height: 120px;
            background: white;
            color: var(--dark-color);
        }
        

        .order-chat-input::placeholder {
            color: var(--chat-subtext);
        }

        .order-chat-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .order-chat-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .order-chat-action-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: #1b2332;
            color: var(--chat-text);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 16px;
        }

        .order-chat-action-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .order-chat-send-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: var(--primary-color);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 18px;
        }

        .order-chat-send-btn:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }

        .order-chat-send-btn:disabled {
            background: var(--gray-light);
            color: var(--gray-color);
            cursor: not-allowed;
        }

        .message-attachment {
            margin-top: 8px;
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }

        .message-attachment i {
            color: var(--primary-color);
        }

        .voice-message {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 20px;
        }

        .voice-message-play {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .voice-message-info {
            flex: 1;
        }

        .voice-message-duration {
            font-size: 12px;
            color: var(--gray-color);
        }

        .empty-chat {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--gray-color);
        }

        .empty-chat i {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.3;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #f9fafb;
        }

        .message {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 15px;
            background: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .message.user .message-content {
            background: var(--primary-color);
            color: white;
        }

        .chat-input-area {
            padding: 15px;
            background: white;
            border-top: 2px solid var(--gray-light);
            display: flex;
            gap: 10px;
        }

        .chat-input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid var(--gray-light);
            border-radius: 25px;
            font-size: 14px;
        }

        /* Реферальная система */
        .referral-card {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 25px;
        }

        .referral-link {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }

        .referral-link input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 14px;
        }

        .referral-link input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

        .referral-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .referral-stat {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }

        /* Кошелек */
        .wallet-balance {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 25px;
        }

        .wallet-balance .amount {
            font-size: 48px;
            font-weight: 800;
            margin: 10px 0;
        }

        .transaction-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: var(--gray-light);
            border-radius: 10px;
        }

        .transaction-item.income {
            border-left: 4px solid #10b981;
        }

        .transaction-item.expense {
            border-left: 4px solid #ef4444;
        }

        /* Достижения */
        .achievements-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .achievement-categories {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 25px;
        }

        .achievement-category-btn {
            padding: 10px 20px;
            border: 2px solid var(--gray-light);
            background: white;
            border-radius: 25px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-color);
        }

        .achievement-category-btn:hover,
        .achievement-category-btn.active {
            border-color: var(--primary-color);
            background: var(--primary-color);
            color: white;
        }

        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
        }

        .achievement-card {
            background: white;
            border: 2px solid var(--gray-light);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .achievement-card.unlocked {
            border-color: var(--accent-color);
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
        }

        .achievement-card.rare {
            border-color: #8b5cf6;
        }

        .achievement-card.rare.unlocked {
            background: linear-gradient(135deg, #e9d5ff, #d8b4fe);
        }

        .achievement-card.epic {
            border-color: #ec4899;
        }

        .achievement-card.epic.unlocked {
            background: linear-gradient(135deg, #fce7f3, #fbcfe8);
        }

        .achievement-card.legendary {
            border-color: #f59e0b;
        }

        .achievement-card.legendary.unlocked {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
        }

        .achievement-icon {
            font-size: 48px;
            margin-bottom: 10px;
            color: var(--gray-color);
            transition: var(--transition);
        }

        .achievement-card.unlocked .achievement-icon {
            color: var(--accent-color);
            animation: achievementPulse 2s infinite;
        }

        .achievement-card.rare.unlocked .achievement-icon {
            color: #8b5cf6;
        }

        .achievement-card.epic.unlocked .achievement-icon {
            color: #ec4899;
        }

        .achievement-card.legendary.unlocked .achievement-icon {
            color: #f59e0b;
        }

        @keyframes achievementPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .achievement-card h4 {
            font-size: 14px;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .achievement-card p {
            font-size: 12px;
            color: var(--gray-color);
            margin-bottom: 8px;
        }

        .achievement-progress {
            width: 100%;
            height: 4px;
            background: var(--gray-light);
            border-radius: 2px;
            margin-top: 10px;
            overflow: hidden;
        }

        .achievement-progress-bar {
            height: 100%;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .achievement-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .achievement-badge.rare {
            background: #8b5cf6;
            color: white;
        }

        .achievement-badge.epic {
            background: #ec4899;
            color: white;
        }

        .achievement-badge.legendary {
            background: #f59e0b;
            color: white;
        }

        /* Дашборд */
        .dashboard-widgets {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 25px;
        }

        .dashboard-widget {
            background: white;
            border: 2px solid var(--gray-light);
            border-radius: var(--profile-radius-lg);
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .quick-action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
            background: var(--gray-light);
            border-radius: var(--profile-radius-md);
            text-decoration: none;
            color: var(--dark-color);
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .quick-action-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
            border-color: var(--primary-color);
        }

        .quick-action-btn i {
            font-size: 28px;
        }

        .quick-action-btn span {
            font-size: 14px;
            font-weight: 600;
        }

        .recent-orders {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .recent-order-item {
            padding: 15px;
            background: var(--gray-light);
            border-radius: var(--profile-radius-sm);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
            cursor: pointer;
        }

        .recent-order-item:hover {
            background: #e5e7eb;
            transform: translateX(5px);
        }

        .recent-order-info h4 {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .recent-order-info p {
            font-size: 12px;
            color: var(--gray-color);
        }

        .activity-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .activity-item {
            display: flex;
            gap: 15px;
            align-items: flex-start;
            padding: 15px;
            background: var(--gray-light);
            border-radius: var(--profile-radius-sm);
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            flex-shrink: 0;
        }

        .activity-content {
            flex: 1;
        }

        .activity-content p {
            margin: 0;
            font-size: 14px;
        }

        .activity-time {
            font-size: 12px;
            color: var(--gray-color);
            white-space: nowrap;
        }

        .settings-section-block {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            margin-bottom: 32px;
        }
        
        .settings-section-block:last-child {
            margin-bottom: 0;
        }
        
        /* 3D Превью модели */
        .model-preview-wrapper {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            background: #1a1a1a;
        }

        .model-preview-controls {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .model-preview-controls .btn-icon {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }

        .model-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 400px;
            color: white;
        }

        .model-loading i {
            font-size: 48px;
            margin-bottom: 15px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Безопасность */
        .security-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: var(--gray-light);
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .security-item-info {
            flex: 1;
        }

        .security-item-info h4 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .security-item-info p {
            font-size: 14px;
            color: var(--gray-color);
        }

        .toggle-switch {
            position: relative;
            display: inline-block !important;
            width: 50px;
            height: 26px;
            z-index: 10;
            visibility: visible !important;
            opacity: 1 !important;
            margin-left: auto;
            flex-shrink: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 26px;
            z-index: 1;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 2;
        }

        input:checked + .toggle-slider {
            background-color: var(--primary-color);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }
        
        /* Убеждаемся, что toggle-switch видимы в настройках на ПК */
        .settings-section-block .form-group .toggle-switch {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 10 !important;
            margin-left: auto;
            flex-shrink: 0;
        }
        
        .settings-section-block .form-group .toggle-slider {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            background-color: #ccc !important;
        }
        
        .settings-section-block .form-group input:checked + .toggle-slider {
            background-color: var(--primary-color) !important;
        }
        
        .settings-section-block .form-group {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 0;
            border-bottom: none;
            margin-bottom: 0;
        }
        
        .settings-section-block .form-group:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }
        
        /* Для form-group с toggle-switch - правильное выравнивание */
        .settings-section-block .form-group:has(.toggle-switch) {
            align-items: center;
            justify-content: space-between;
        }
        
        .settings-section-block .form-group > label:first-of-type:not(.toggle-switch) {
            flex: 1;
            margin-bottom: 0;
            margin-right: 12px;
            font-weight: 500;
        }
        
        .settings-section-block .form-group .toggle-switch {
            flex-shrink: 0;
            margin-left: auto;
        }
        
        /* Для form-group с полями ввода - правильное выравнивание */
        .settings-section-block .form-group:not(:has(.toggle-switch)):not([style*="flex-direction: column"]) {
            flex-direction: column;
            align-items: stretch;
        }
        
        .settings-section-block .form-group:not(:has(.toggle-switch)):not([style*="flex-direction: column"]) > label {
            margin-bottom: 8px;
        }

        /* Фильтры заказов */
        .filters-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 150px;
        }

        .filter-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
            color: var(--gray-color);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Калькулятор */
        .calculator-form {
            background: var(--gray-light);
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 25px;
        }

        .calculator-result {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
        }

        .calculator-result .result-amount {
            font-size: 36px;
            font-weight: 800;
            margin: 10px 0;
        }

        /* QR код */
        .qr-code-container {
            text-align: center;
            padding: 30px;
            background: white;
            border-radius: 15px;
            margin-bottom: 25px;
        }

        .qr-code-placeholder {
            width: 200px;
            height: 200px;
            background: var(--gray-light);
            border-radius: 10px;
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-color);
        }

        @media (max-width: 768px) {
            .profile-header-content {
                flex-direction: column;
                text-align: center;
            }

            /* Пустая строчка сверху хедера (3rem — как h2) — отступ под остров/чёлку */
            header {
                padding-top: 3rem;
                min-height: auto;
            }
            body {
                padding-top: calc(3rem + 52px);
            }
            .header-content {
                flex-wrap: nowrap;
                padding: 8px 10px;
                padding-top: 8px;
                gap: 8px;
                min-height: 44px;
            }
        }
            
            /* Убеждаемся, что все элементы в шапке кликабельны */
            header * {
                pointer-events: auto !important;
            }
            
            header button,
            header .btn,
            header a,
            header .header-balance,
            header .notification-icon-btn,
            header .balance-add-btn,
            header .logo {
                z-index: 1002 !important;
                pointer-events: auto !important;
                touch-action: manipulation;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            }

            .logo {
                gap: 6px;
                padding-left: 0 !important;
                flex-shrink: 0;
            }

            .logo-icon {
                font-size: 24px !important;
            }

            .logo-text {
                font-size: 18px !important;
            }
            
            .demo-badge {
                font-size: 7px !important;
                padding: 2px 6px !important;
                margin-left: 4px !important;
            }

            .header-buttons {
                flex-direction: row;
                gap: 8px;
                padding-right: 0;
                margin-left: auto;
                margin-top: 0;
                flex-shrink: 0;
            }

            .notification-icon-btn {
                width: 36px !important;
                height: 36px !important;
                font-size: 16px !important;
            }

            /* Скрываем баланс из шапки на мобильных - показываем только на дашборде */
            .header-balance {
                display: none !important;
            }

            /* Скрываем кнопку выхода из шапки на мобильных - будет в настройках */
            .logout-icon-btn {
                display: none !important;
            }

            .balance-amount {
                font-size: 16px;
            }

            .btn-primary {
                padding: 10px 20px;
                font-size: 14px;
            }

            .analytics-grid {
                grid-template-columns: 1fr;
            }

            .achievements-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            /* Адаптивность для секции безопасности и настроек */
            .settings-section-block {
                padding: 0;
                margin-bottom: 32px;
                border-radius: 0;
                background: transparent;
                border: none;
            }
            
            .settings-section-block h3 {
                font-size: 18px;
                margin-bottom: 16px;
                font-weight: 600;
            }
            
            .settings-section-block .form-group {
                margin-bottom: 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                padding: 16px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }
            
            .settings-section-block .form-group:last-child {
                border-bottom: none;
            }
            
            .settings-section-block .form-group > label:first-of-type:not(.toggle-switch) {
                margin-bottom: 0;
                flex: 1;
                font-size: 14px;
                min-width: 0;
            }
            
            /* Для form-group с темой - делаем column */
            .settings-section-block .form-group[style*="flex-direction: column"] {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            
            /* Для form-group с переключателями - правильное выравнивание */
            .settings-section-block .form-group:has(.toggle-switch) {
                justify-content: space-between;
                align-items: center;
            }
            
            .settings-section-block .form-group:has(.toggle-switch) > label:first-of-type:not(.toggle-switch) {
                flex: 1;
                margin-bottom: 0;
                margin-right: 12px;
            }
            
            .settings-section-block .form-group:has(.toggle-switch) > label.toggle-switch {
                margin-left: auto;
                flex-shrink: 0;
                width: 50px !important;
                height: 26px !important;
            }
            
            .settings-section-block .form-group input[type="text"],
            .settings-section-block .form-group input[type="email"],
            .settings-section-block .form-group input[type="tel"],
            .settings-section-block .form-group input[type="date"],
            .settings-section-block .form-group textarea,
            .settings-section-block .form-group select {
                flex: 1;
                max-width: 200px;
                padding: 10px 12px;
                font-size: 14px;
            }
            
            .settings-section-block .form-row {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            
            .settings-section-block .form-row .form-group {
                flex-direction: column;
                align-items: stretch;
            }
            
            .settings-section-block .form-row .form-group input {
                max-width: 100%;
            }
            
            /* Для ПК - делаем form-row в две колонки */
            @media (min-width: 769px) {
                .settings-section-block .form-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 16px;
                }
            }
            
            /* Переключатели должны быть справа, не растянутыми */
            .settings-section-block .form-group .toggle-switch {
                margin-left: auto;
                flex-shrink: 0;
                width: 50px;
                height: 26px;
            }
            
            /* Для form-group с переключателями - label слева, toggle справа */
            .settings-section-block .form-group:has(.toggle-switch) {
                justify-content: space-between;
                align-items: center;
            }
            
            .settings-section-block .form-group:has(.toggle-switch) > label:first-of-type {
                flex: 1;
                margin-bottom: 0;
                margin-right: 12px;
            }
            
            .settings-section-block .form-group:has(.toggle-switch) > label.toggle-switch {
                margin-left: auto;
                flex-shrink: 0;
                width: 50px;
                height: 26px;
            }
            

            .security-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .security-item-info {
                width: 100%;
            }

            #2fa-actions {
                flex-direction: column;
                width: 100%;
            }

            #2fa-actions button {
                width: 100% !important;
            }

            #2fa-verify-section {
                width: 100%;
                display: flex !important;
                flex-direction: column;
                gap: 16px;
                margin-top: 20px;
                padding: 20px;
                background: #f9fafb;
                border-radius: 12px;
                border: 1px solid #e5e7eb;
            }

            #2fa-verify-code {
                width: 100% !important;
                margin-right: 0 !important;
                padding: 16px !important;
                font-size: 20px !important;
                border: 2px solid var(--gray-light) !important;
                border-radius: 12px !important;
                text-align: center !important;
                letter-spacing: 8px !important;
                font-weight: 600 !important;
                background: white !important;
                transition: all 0.3s !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            }
            
            #2fa-verify-code:focus {
                outline: none !important;
                border-color: var(--primary-color) !important;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
            }

            #securityPasswordForm .form-group {
                margin-bottom: 15px;
            }
            
            #securityPasswordForm .form-group label {
                margin-bottom: 8px;
                font-size: 14px;
            }
            
            #securityPasswordForm .form-group input {
                width: 100%;
                padding: 12px;
                font-size: 16px;
            }
            
            #securityPasswordForm button {
                width: 100%;
                margin-top: 10px;
            }

            #logout-all-sessions-btn {
                width: 100% !important;
            }
            
            /* Компактные стили для секций безопасности на мобильных */
            #security-section .settings-section-block,
            .mobile-security-content .settings-section-block {
                padding: 16px;
                margin-bottom: 16px;
                margin-top: 20px !important;
            }
            
            #security-section .settings-section-block h3,
            .mobile-security-content .settings-section-block h3 {
                font-size: 18px;
                margin-bottom: 16px;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            #security-section .settings-section-block h3 i,
            .mobile-security-content .settings-section-block h3 i {
                font-size: 18px;
            }
            
            #security-section .settings-section-block p,
            .mobile-security-content .settings-section-block p {
                font-size: 13px;
                margin: 8px 0;
                line-height: 1.4;
            }
            
            /* Форма 2FA - компактная */
            #security-section .settings-section-block .form-group:has(#2fa-status),
            .mobile-security-content .settings-section-block .form-group:has(#mobile-2fa-status) {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                margin-bottom: 12px;
            }
            
            #security-section .settings-section-block .form-group:has(#2fa-status) > label,
            .mobile-security-content .settings-section-block .form-group:has(#mobile-2fa-status) > label {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
            }
            
            #security-section .settings-section-block .form-group:has(#2fa-status) > label > span:first-child,
            .mobile-security-content .settings-section-block .form-group:has(#mobile-2fa-status) > label > span:first-child {
                font-weight: 600;
                font-size: 14px;
            }
            
            #2fa-status,
            #mobile-2fa-status {
                font-size: 13px !important;
                font-weight: normal !important;
            }
            
            #security-section .form-group,
            .mobile-security-content .form-group {
                margin-bottom: 16px;
            }
            
            #security-section .form-group label:not(.toggle-switch),
            .mobile-security-content .form-group label:not(.toggle-switch) {
                font-size: 14px;
                margin-bottom: 8px;
                display: block;
            }
            
            #2fa-actions,
            #mobile-2fa-actions {
                flex-direction: row;
                gap: 10px;
                flex-wrap: wrap;
                margin-top: 8px;
            }
            
            #2fa-actions button,
            #mobile-2fa-actions button {
                flex: 1;
                min-width: 120px;
                font-size: 14px;
                padding: 10px 16px;
            }
            
            /* Стили для ПК версии блока подтверждения 2FA */
            #2fa-verify-section {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                margin-top: 20px !important;
                padding: 20px !important;
                background: #f9fafb !important;
                border-radius: 12px !important;
                border: 1px solid #e5e7eb !important;
            }
            
            #mobile-2fa-verify-section {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-top: 16px;
                padding: 16px;
                background: #f9fafb;
                border-radius: 12px;
                border: 1px solid #e5e7eb;
            }
            
            #2fa-verify-code {
                width: 100% !important;
                margin-right: 0 !important;
                padding: 16px !important;
                font-size: 20px !important;
                border: 2px solid var(--gray-light) !important;
                border-radius: 12px !important;
                text-align: center !important;
                letter-spacing: 8px !important;
                font-weight: 600 !important;
                background: white !important;
                transition: all 0.3s !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            }
            
            #2fa-verify-code:focus {
                outline: none !important;
                border-color: var(--primary-color) !important;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
            }
            
            #mobile-2fa-verify-code {
                width: 100% !important;
                margin-right: 0 !important;
                padding: 14px !important;
                font-size: 18px !important;
                border: 2px solid var(--gray-light) !important;
                border-radius: 10px !important;
                text-align: center !important;
                letter-spacing: 6px !important;
                font-weight: 600 !important;
                background: white !important;
            }
            
            /* Стили для кнопки подтверждения 2FA на ПК */
            #verify-2fa-btn {
                width: 100% !important;
                padding: 14px !important;
                font-size: 16px !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
                color: white !important;
                border: none !important;
                cursor: pointer !important;
                transition: all 0.3s !important;
                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
            }
            
            #verify-2fa-btn:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
            }
            
            #mobile-verify-2fa-btn {
                width: 100%;
            }
            
            /* Форма изменения пароля - компактная */
            #securityPasswordForm,
            #mobileSecurityPasswordForm {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            
            #securityPasswordForm .form-group,
            #mobileSecurityPasswordForm .form-group {
                margin-bottom: 0;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            
            #securityPasswordForm .form-group label,
            #mobileSecurityPasswordForm .form-group label {
                margin-bottom: 8px;
                font-size: 14px;
                font-weight: 600;
            }
            
            #securityPasswordForm .form-group input,
            #mobileSecurityPasswordForm .form-group input {
                width: 100%;
                padding: 12px;
                font-size: 16px;
                border: 2px solid var(--gray-light);
                border-radius: 8px;
            }
            
            #securityPasswordForm button,
            #mobileSecurityPasswordForm button {
                width: 100%;
                margin-top: 8px;
                padding: 12px;
                font-size: 16px;
            }
            
            /* Компактные стили для блока 2FA */
            .security-2fa-block {
                padding: 24px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
                margin-bottom: 24px;
                border: 1px solid #e5e7eb;
            }
            
            .security-2fa-title {
                margin-bottom: 20px;
                font-size: 20px;
                font-weight: 600;
                color: var(--dark-color);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .security-2fa-title i {
                font-size: 20px;
                color: var(--primary-color);
            }
            
            .security-2fa-content {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            
            .security-2fa-status {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 0;
                border-bottom: 1px solid #e5e7eb;
            }
            
            .security-2fa-label {
                font-size: 15px;
                font-weight: 600;
                color: var(--dark-color);
            }
            
            .security-2fa-status-value {
                font-size: 14px;
                font-weight: 500;
                padding: 6px 14px;
                border-radius: 8px;
                background: #f3f4f6;
                color: var(--gray-color);
                transition: all 0.3s;
            }
            
            .security-2fa-status-value[style*="color: #10b981"],
            .security-2fa-status-value:has-text("Включена") {
                background: #d1fae5;
                color: #10b981 !important;
            }
            
            .security-2fa-description {
                color: var(--gray-color);
                font-size: 14px;
                line-height: 1.6;
                margin: 0;
            }
            
            .security-2fa-actions {
                display: flex;
                gap: 10px;
                margin-top: 4px;
            }
            
            .security-2fa-btn {
                flex: 1;
                padding: 10px 16px;
                font-size: 14px;
            }
            
            .security-2fa-btn-danger {
                background: #ef4444;
                color: white;
            }
            
            .security-2fa-verify,
            #2fa-verify-section {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                margin-top: 20px !important;
                padding: 20px !important;
                background: #f9fafb !important;
                border-radius: 12px !important;
                border: 1px solid #e5e7eb !important;
            }
            
            .security-2fa-code-input,
            #2fa-verify-code {
                width: 100% !important;
                padding: 16px !important;
                font-size: 20px !important;
                border: 2px solid var(--gray-light) !important;
                border-radius: 12px !important;
                text-align: center !important;
                letter-spacing: 8px !important;
                font-weight: 600 !important;
                background: white !important;
                transition: all 0.3s !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            }
            
            .security-2fa-code-input:focus,
            #2fa-verify-code:focus {
                outline: none !important;
                border-color: var(--primary-color) !important;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
            }
            
            .security-2fa-verify-btn,
            #verify-2fa-btn {
                width: 100% !important;
                padding: 14px !important;
                font-size: 16px !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
                color: white !important;
                border: none !important;
                cursor: pointer !important;
                transition: all 0.3s !important;
                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
            }
            
            .security-2fa-verify-btn:hover,
            #verify-2fa-btn:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
            }
            
            .security-2fa-verify-btn:active,
            #verify-2fa-btn:active {
                transform: translateY(0) !important;
            }
            




            /* Адаптивность для секции безопасности на мобильных */
            @media (max-width: 768px) {
                #security-section .settings-section-block,
                .mobile-security-content.settings-section-block {
                    padding: 16px;
                    margin-bottom: 16px;
                    margin-top: 20px !important;
                }
                
                .security-2fa-block {
                    padding: 16px !important;
                }
                
                .security-2fa-title {
                    font-size: 16px !important;
                    margin-bottom: 12px !important;
                }
                
                .security-2fa-title i {
                    font-size: 16px !important;
                }
                
                .security-2fa-content {
                    gap: 10px !important;
                }
                
                .security-2fa-status {
                    padding-bottom: 10px !important;
                }
                
                .security-2fa-label {
                    font-size: 13px !important;
                }
                
                .security-2fa-status-value {
                    font-size: 12px !important;
                }
                
                .security-2fa-description {
                    font-size: 12px !important;
                    line-height: 1.4 !important;
                    margin: 0 !important;
                }
                
                .security-2fa-actions {
                    flex-direction: row !important;
                    gap: 8px !important;
                    margin-top: 4px !important;
                }
                
                .security-2fa-btn {
                    flex: 1 !important;
                    padding: 10px 12px !important;
                    font-size: 13px !important;
                    min-width: 0 !important;
                }
                
                .security-2fa-verify {
                    margin-top: 16px !important;
                    padding: 16px !important;
                    gap: 12px !important;
                    background: #f9fafb !important;
                    border-radius: 12px !important;
                    border: 1px solid #e5e7eb !important;
                }
                
                .security-2fa-code-input {
                    padding: 14px !important;
                    font-size: 18px !important;
                    width: 100% !important;
                    margin-right: 0 !important;
                    margin-bottom: 0 !important;
                    letter-spacing: 6px !important;
                    background: white !important;
                }
                
                .security-2fa-verify-btn {
                    padding: 12px !important;
                    font-size: 15px !important;
                    font-weight: 600 !important;
                    width: 100% !important;
                    border-radius: 10px !important;
                }
                
                #securityPasswordForm .form-group,
                #mobileSecurityPasswordForm .form-group {
                    margin-bottom: 16px;
                }
                
                #securityPasswordForm .form-group label,
                #mobileSecurityPasswordForm .form-group label {
                    font-size: 14px;
                    margin-bottom: 8px;
                }
                
                #securityPasswordForm .form-group input,
                #mobileSecurityPasswordForm .form-group input {
                    padding: 12px;
                    font-size: 16px;
                }
                
                #securityPasswordForm button,
                #mobileSecurityPasswordForm button {
                    width: 100%;
                    padding: 12px;
                    font-size: 16px;
                }
            }
            
            #2fa-verify-section {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                margin-top: 20px !important;
                padding: 20px !important;
                background: #f9fafb !important;
                border-radius: 12px !important;
                border: 1px solid #e5e7eb !important;
            }
            
            #2fa-verify-code {
                width: 100% !important;
                margin-right: 0 !important;
                padding: 16px !important;
                font-size: 20px !important;
                border: 2px solid var(--gray-light) !important;
                border-radius: 12px !important;
                text-align: center !important;
                letter-spacing: 8px !important;
                font-weight: 600 !important;
                background: white !important;
                transition: all 0.3s !important;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
            }
            
            #2fa-verify-code:focus {
                outline: none !important;
                border-color: var(--primary-color) !important;
                box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
            }
            
            #verify-2fa-btn,
            #mobile-verify-2fa-btn {
                width: 100% !important;
                padding: 14px !important;
                font-size: 16px !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%) !important;
                color: white !important;
                border: none !important;
                cursor: pointer !important;
                transition: all 0.3s !important;
                box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
            }
            
            #verify-2fa-btn:hover,
            #mobile-verify-2fa-btn:hover {
                transform: translateY(-2px) !important;
                box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
            }
            
            /* История входов - компактная версия */
            #login-history-list,
            #mobile-login-history-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            
            .login-history-item {
                padding: 12px;
                background: var(--gray-light);
                border-radius: 8px;
                border-left: 3px solid var(--primary-color);
                font-size: 13px;
            }
            
            .login-history-item strong {
                display: block;
                margin-bottom: 4px;
                font-size: 14px;
            }
            
            .login-history-item p {
                font-size: 12px;
                color: var(--gray-color);
                margin: 4px 0;
            }
            
            /* Компактная версия истории входов на мобильных */
            @media (max-width: 768px) {
                .login-history-item {
                    padding: 10px;
                    font-size: 12px;
                }
                
                .login-history-item > div:first-child {
                    width: 36px !important;
                    height: 36px !important;
                    font-size: 16px !important;
                }
                
                .login-history-item > div:last-child {
                    font-size: 12px;
                }
                
                .login-history-item > div:last-child > div {
                    font-size: 11px !important;
                    margin-bottom: 3px !important;
                }
            }
            



            /* Адаптивность для профиля — только на мобильных, чтобы на ПК сайдбар оставался вертикальным списком */
            @media (max-width: 768px) {
            .profile-content {
                flex-direction: column;
            }

            .profile-sidebar {
                width: 100%;
                margin-bottom: 20px;
            }

            .profile-main {
                width: 100%;
            }

            .sidebar-menu {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

            .sidebar-menu li {
                flex: 1 1 auto;
                min-width: 120px;
            }

            .sidebar-menu a {
                padding: 12px 15px;
                font-size: 14px;
            }

            .profile-content {
                grid-template-columns: 1fr;
                padding: 0;
            }

            .profile-sidebar {
                position: sticky;
                top: 0;
                z-index: 100;
                background: white;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                border-radius: 0;
                margin-bottom: 0;
            }

            .profile-main {
                margin-left: 0;
                padding: 15px 0 90px 0;
            }

            .sidebar-menu {
                display: flex;
                flex-wrap: nowrap;
                gap: 5px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 10px;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }

            .sidebar-menu::-webkit-scrollbar {
                display: none;
            }

            .sidebar-menu li {
                flex: 0 0 auto;
                min-width: auto;
            }

            .sidebar-menu a {
                padding: 10px 12px;
                font-size: 13px;
                white-space: nowrap;
                border-radius: 8px;
            }

            .section-title {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .info-card {
                padding: 20px;
            }

            .settings-section-block h3 {
                font-size: 18px;
            }

            .form-group input,
            .form-group textarea,
            .form-group select {
                font-size: 16px; /* Предотвращает зум на iOS */
                padding: 12px 15px;
            }

            .btn {
                padding: 12px 20px;
                font-size: 16px;
                min-height: 44px; /* Минимальный размер для удобного нажатия */
            }

            .profile-section-content {
                -webkit-overflow-scrolling: touch;
            }
            }

        @media (max-width: 480px) {
            .container {
                padding: 0 10px;
                max-width: 100vw;
                box-sizing: border-box;
            }

            .profile-main {
                padding: 10px 0 90px 0;
                max-width: 100%;
                box-sizing: border-box;
            }


            .settings-section-block {
                padding: 15px 10px;
                max-width: 100%;
                box-sizing: border-box;
            }

            .section-title {
                font-size: clamp(18px, 4vw, 20px);
                margin-bottom: 15px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .logo-text {
                font-size: 20px;
                max-width: 100%;
            }
            
            .demo-badge {
                font-size: 7px !important;
                padding: 2px 5px !important;
                margin-left: 4px !important;
            }

            .logo-icon {
                font-size: 28px;
            }

            header {
                padding: 10px 0;
                max-width: 100vw;
            }

            .header-content {
                padding: 10px;
                max-width: 100%;
                box-sizing: border-box;
            }

            /* Предотвращение переполнения текста */
            h1, h2, h3, h4, h5, h6 {
                font-size: clamp(18px, 4vw, 24px);
                word-wrap: break-word;
                overflow-wrap: break-word;
                max-width: 100%;
            }

            p, span, div, a, li {
                word-wrap: break-word;
                overflow-wrap: break-word;
                max-width: 100%;
            }

            /* Таблицы не должны выходить за границы */
            table {
                width: 100%;
                max-width: 100%;
                table-layout: fixed;
                word-wrap: break-word;
            }

            td, th {
                word-wrap: break-word;
                overflow-wrap: break-word;
                max-width: 0;
            }

            /* Все элементы должны быть в пределах экрана */
            * {
                max-width: 100%;
                box-sizing: border-box;
            }
        }

        /* Стили для полноэкранного режима (PWA) */
        @media (display-mode: standalone) {
            header {
                padding-top: max(env(safe-area-inset-top), 10px);
            }

            body {
                padding-bottom: env(safe-area-inset-bottom);
            }
        }

        @media (max-width: 480px) {
            .header-buttons {
                flex-wrap: wrap;
            }

            .header-balance {
                order: 1;
                width: 100%;
                justify-content: center;
                margin-bottom: 10px;
            }

            .btn-primary {
                order: 2;
                flex: 1;
            }

            .notifications-wrapper {
                order: 3;
            }

            .logout-icon-btn {
                order: 4;
            }
        }