:root {

            --primary: #720AA4;

            --primary-hover: #5d0883;

            --secondary: #F1F1F4;

            --dark: #050A24;

            --light: #5C647D;

            --white: #FFFFFF;

            --success: #28a745;

            --gradient-primary: linear-gradient(135deg, #720AA4 0%, #050A24 100%);

            --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            --border-radius: 10px;

            --border-radius-sm: 6px;

            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);

            --shadow-md: 0 4px 16px rgba(0,0,0,0.12);

            --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);

            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

        }

        html {
            overflow-x: hidden;
            max-width: 100%;
        }

        body {

            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

            background-color: #f4f7fb;

            font-size: 14px;

            line-height: 1.5;

            -webkit-font-smoothing: antialiased;

            -moz-osx-font-smoothing: grayscale;

            overflow-x: hidden;
            max-width: 100%;

            padding-top: 60px; /* Отступ для мобильной шапки */

        }

        

        @media (min-width: 769px) {

            body {

                padding-top: 0; /* Убираем отступ для десктопной версии */

            }

        }

        

        /* Рекламный баннер - улучшенный */

        .advertisement-banner {

            width: 100%;

            background-color: var(--dark);

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 10px 0;

            position: relative;

            overflow: hidden;

        }

        

        .advertisement-banner::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);

        }

        

        @media (min-width: 640px) {

            .advertisement-banner {

                display: flex;

            }

        }

        

        .advertisement-banner a {

            width: 100%;

            max-width: 1320px;

            margin: 0 auto;

            padding: 0 20px;

            transition: transform 0.3s ease;

        }

        

        .advertisement-banner a:hover {

            transform: translateY(-1px);

        }

        

        .advertisement-banner img {

            border-radius: 12px;

            width: 100%;

            height: auto;

            box-shadow: 0 4px 20px rgba(0,0,0,0.2);

        }

        

        /* ===== МОБИЛЬНАЯ ШАПКА ===== */

        .mobile-header {

            display: block;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            background: var(--white);

            z-index: 9999;

            box-shadow: 0 2px 12px rgba(0,0,0,0.08);

            padding: 10px 0;

        }

        

        @media (min-width: 769px) {

            .mobile-header {

                display: none !important;

            }

        }

        

        .mobile-header-container {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 0 15px;

        }

        

        .mobile-header-left {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        

        .mobile-menu-btn {

            background: none;

            border: none;

            font-size: 20px;

            color: var(--dark);

            cursor: pointer;

            padding: 8px;

            border-radius: 6px;

            transition: var(--transition);

        }

        

        .mobile-menu-btn:hover {

            background: rgba(114, 10, 164, 0.05);

            color: var(--primary);

        }

        

        .mobile-logo {

            display: flex;

            align-items: center;

            text-decoration: none;

            color: var(--dark);

            font-weight: 700;

            font-size: 16px;

        }

        

        .mobile-logo img:not(.mobile-logo-badge) {

            height: 36px;
            width: auto;
            object-fit: contain;

            margin-right: 8px;

        }

        .mobile-logo-badge {
            width: 34px;
            height: 34px;
            object-fit: contain;
            object-position: center;
            background: #fff;
            padding: 3px;
            box-sizing: border-box;
            border-radius: 10px;
            margin-right: 8px;
            box-shadow: 0 4px 12px rgba(114, 10, 164, 0.22);
            flex-shrink: 0;
        }

        

        .mobile-header-right {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        

        .mobile-search-btn,

        .mobile-user-btn {

            background: none;

            border: none;

            font-size: 18px;

            color: var(--dark);

            cursor: pointer;

            padding: 8px;

            border-radius: 6px;

            transition: var(--transition);

            position: relative;

        }

        

        .mobile-search-btn:hover,

        .mobile-user-btn:hover {

            background: rgba(114, 10, 164, 0.05);

            color: var(--primary);

        }

        

        .mobile-user-btn .notification-badge {

            position: absolute;

            top: 2px;

            right: 2px;

            background: linear-gradient(135deg, #FF416C, #FF4B2B);

            color: var(--white);

            border-radius: 10px;

            width: 18px;

            height: 18px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 10px;

            font-weight: 700;

            border: 2px solid var(--white);

        }

        

        /* Мобильное меню */

        .mobile-menu-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.5);

            z-index: 10000;

            display: none;

        }

        

        .mobile-menu-overlay.active {

            display: block;

        }

        

        .mobile-menu-sidebar {

            position: fixed;

            top: 0;

            left: -300px;

            width: 280px;

            height: 100%;

            background: var(--white);

            z-index: 10001;

            transition: left 0.3s ease;

            overflow-y: auto;

            box-shadow: 4px 0 20px rgba(0,0,0,0.1);

        }

        

        .mobile-menu-sidebar.active {

            left: 0;

        }

        

        .mobile-menu-header {

            padding: 20px 15px;

            background: var(--dark);

            color: var(--white);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        

        .mobile-menu-close {

            background: none;

            border: none;

            color: var(--white);

            font-size: 20px;

            cursor: pointer;

            padding: 5px;

        }

        

        .mobile-menu-content {

            padding: 20px 0;

        }

        

        .mobile-menu-section {

            margin-bottom: 20px;

        }

        

        .mobile-menu-section-title {

            padding: 0 15px 10px;

            font-weight: 600;

            color: var(--dark);

            border-bottom: 1px solid #eee;

            margin-bottom: 10px;

            font-size: 14px;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }

        

        .mobile-menu-link {

            display: flex;

            align-items: center;

            padding: 12px 20px;

            color: var(--dark);

            text-decoration: none;

            transition: var(--transition);

            border-left: 3px solid transparent;

        }

        

        .mobile-menu-link:hover,

        .mobile-menu-link.active {

            background: rgba(114, 10, 164, 0.05);

            color: var(--primary);

            border-left-color: var(--primary);

        }

        

        .mobile-menu-link i {

            width: 24px;

            margin-right: 12px;

            font-size: 16px;

            color: var(--light);

        }

        

        .mobile-menu-link:hover i,

        .mobile-menu-link.active i {

            color: var(--primary);

        }

        

        .mobile-auth-buttons {

            padding: 15px;

            display: flex;

            flex-direction: column;

            gap: 10px;

        }

        

        .mobile-auth-buttons .btn {

            width: 100%;

            justify-content: center;

        }

        

        /* ===== ДЕСКТОПНАЯ ШАПКА ===== */

        /* Верхняя навигация - улучшенная */

        .top-nav {

            background-color: var(--dark);

            padding: 0;

            font-size: 13px;

            position: relative;

            border-bottom: 1px solid rgba(255,255,255,0.05);

            display: none;

        }

        

        @media (min-width: 769px) {

            .top-nav {

                display: block !important;

            }

        }

        

        .top-nav-container {

            width: 100%;

            max-width: 1400px;

            padding: 0 40px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 auto;

        }

        

        .top-nav-left {

            display: flex;

            align-items: center;

            justify-content: flex-start;

        }

        

        .city-selector {

            display: flex;

            align-items: center;

            gap: 8px;

            padding: 10px 14px;

            margin-right: 24px;

            background: rgba(255,255,255,0.05);

            border: 1px solid rgba(255,255,255,0.1);

            color: var(--white);

            font-size: 13px;

            font-weight: 500;

            cursor: pointer;

            transition: var(--transition);

            border-radius: var(--border-radius-sm);

            backdrop-filter: blur(10px);

        }

        

        .city-selector:hover {

            background: rgba(255,255,255,0.1);

            border-color: rgba(255,255,255,0.2);

            transform: translateY(-1px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.2);

        }

        

        .city-selector i {

            font-size: 14px;

            color: rgba(255,255,255,0.8);

        }

        

        .nav-links-top {

            display: flex;

            gap: 4px;

        }

        

        .nav-links-top a {

            color: rgba(255,255,255,0.9);

            text-decoration: none;

            font-size: 13px;

            font-weight: 500;

            padding: 10px 14px;

            transition: var(--transition);

            border-radius: var(--border-radius-sm);

            white-space: nowrap;

            position: relative;

            overflow: hidden;

        }

        

        .nav-links-top a::before {

            content: '';

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translateX(-50%);

            width: 0;

            height: 2px;

            background: linear-gradient(90deg, transparent, var(--primary), transparent);

            transition: width 0.3s ease;

        }

        

        .nav-links-top a:hover {

            color: var(--white);

            background: rgba(255,255,255,0.05);

        }

        

        .nav-links-top a:hover::before {

            width: 70%;

        }

        

        .top-nav-divider {

            background: rgba(255,255,255,0.1);

            border-radius: 50%;

            width: 4px;

            height: 4px;

            margin: 0 24px;

        }

        

        /* Middle navigation links - улучшенные */

        .middle-nav {

            background-color: var(--white);

            padding: 12px 0;

            border-bottom: 1px solid rgba(0,0,0,0.08);

            box-shadow: 0 2px 12px rgba(0,0,0,0.04);

            display: none;

        }

        

        @media (min-width: 769px) {

            .middle-nav {

                display: block !important;

            }

        }

        

        .middle-nav-container {

            width: 100%;

            max-width: 1400px;

            padding: 0 40px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 auto;

        }

        

        .middle-nav-links {

            display: flex;

            gap: 32px;

            align-items: center;

        }

        

        .middle-nav-link {

            color: var(--dark);

            text-decoration: none;

            font-size: 14px;

            font-weight: 500;

            padding: 8px 0;

            position: relative;

            transition: var(--transition);

            letter-spacing: 0.2px;

        }

        

        .middle-nav-link::after {

            content: '';

            position: absolute;

            bottom: -2px;

            left: 0;

            width: 0;

            height: 2px;

            background: var(--primary);

            border-radius: 2px;

            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        }

        

        .middle-nav-link:hover {

            color: var(--primary);

        }

        

        .middle-nav-link:hover::after {

            width: 100%;

        }

        

        .middle-nav-link.active {

            color: var(--primary);

            font-weight: 600;

        }

        

        .middle-nav-link.active::after {

            width: 100%;

        }

        

        /* Дропдауны - улучшенные с черным текстом */

        .dropdown-container {

            position: relative;

        }

        

        .dropdown-toggle {

            background: none;

            border: none;

            color: var(--white);

            display: flex;

            align-items: center;

            gap: 6px;

            padding: 10px 14px;

            font-size: 13px;

            font-weight: 500;

            cursor: pointer;

            transition: var(--transition);

            border-radius: var(--border-radius-sm);

            background: rgba(255,255,255,0.05);

            border: 1px solid rgba(255,255,255,0.1);

        }

        

        .dropdown-toggle:hover {

            background: rgba(255,255,255,0.1);

            border-color: rgba(255,255,255,0.2);

            transform: translateY(-1px);

            box-shadow: 0 4px 12px rgba(0,0,0,0.15);

        }

        

        .dropdown-menu {

            position: absolute;

            top: calc(100% + 8px);

            left: 0;

            background: var(--white);

            border-radius: 12px;

            box-shadow: var(--shadow-lg);

            min-width: 220px;

            z-index: 1000;

            display: none;

            padding: 8px 0;

            overflow: hidden;

            opacity: 0;

            transform: translateY(-10px) scale(0.95);

            transform-origin: top left;

            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

            border: 1px solid rgba(0,0,0,0.08);

            backdrop-filter: blur(20px);

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ В ДРОПДАУНАХ */

        }

        

        .dropdown-menu.show {

            display: block;

            opacity: 1;

            transform: translateY(0) scale(1);

        }

        

        .dropdown-item {

            display: flex;

            align-items: center;

            padding: 12px 20px;

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

            text-decoration: none;

            font-size: 14px;

            transition: var(--transition);

            min-height: 44px;

            border-left: 3px solid transparent;

        }

        

        .dropdown-item:hover {

            background-color: rgba(114, 10, 164, 0.05);

            color: var(--primary) !important;

            border-left-color: var(--primary);

            padding-left: 24px;

        }

        

        .dropdown-item i {

            width: 20px;

            margin-right: 12px;

            font-size: 14px;

            color: var(--light);

        }

        

        .dropdown-item:hover i {

            color: var(--primary);

        }

        

        /* КАТЕГОРИИ - улучшенный дропдаун с фиксированным позиционированием */

        .categories-dropdown {

            position: fixed;

            top: auto;

            left: 50%;

            transform: translateX(-50%) translateY(-12px) scale(0.98);

            width: 95vw;

            max-width: 1400px;

            padding: 32px 0px 52px 20px;

            background: rgba(255, 255, 255, 0.98);

            backdrop-filter: blur(20px);

            z-index: 10000;

            display: none !important;

            visibility: hidden;

            pointer-events: none;

            height: min(760px, calc(100vh - 120px));

            min-height: 320px;

            max-height: calc(100vh - 120px);

            border-radius: 16px;

            box-shadow: var(--shadow-lg);

            border: 1px solid rgba(0,0,0,0.08);

            opacity: 0;

            transform-origin: top center;

            transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

        }

        

        .categories-dropdown.show {

            display: flex !important;

            visibility: visible;

            pointer-events: auto;

            opacity: 1;

            transform: translateX(-50%) translateY(0) scale(1);

        }

        

        .category-menu-left {

            display: flex;

            flex-direction: column;

            min-width: 280px;

            max-width: 280px;

            gap: 8px;

            padding-right: 8px;

        }

        

        .category-menu-left-item {

            width: 100%;

            height: 56px;

            border-radius: 12px;

            padding: 12px 18px;

            display: flex;

            align-items: center;

            background: none;

            border: 1px solid transparent;

            font-size: 16px;

            font-weight: 500;

            color: var(--dark);

            cursor: pointer;

            transition: var(--transition);

            text-align: left;

        }

        

        .category-menu-left-item:hover,

        .category-menu-left-item.active {

            background: rgba(253, 239, 255, 0.8);

            border-color: rgba(114, 10, 164, 0.2);

            transform: translateX(4px);

        }

        

        .category-menu-left-item i {

            margin-right: 14px;

            font-size: 20px;

            color: var(--primary);

            transition: transform 0.3s ease;

        }

        

        .category-menu-left-item:hover i {

            transform: scale(1.1);

        }

        

        .category-divider {

            height: calc(100% - 64px);

            width: 1px;

            background: linear-gradient(to bottom, transparent, rgba(241, 241, 244, 1), transparent);

            margin: 32px 24px 32px 48px;

        }

        

        .category-content {

            flex: 1;

            overflow-y: auto;

            overflow-x: hidden;

            padding-right: 20px;

            margin-top: 8px;

        }

        

        .category-content::-webkit-scrollbar {

            width: 8px;

        }

        

        .category-content::-webkit-scrollbar-track {

            background: #f8f9fa;

            border-radius: 10px;

        }

        

        .category-content::-webkit-scrollbar-thumb {

            background: linear-gradient(135deg, #720AA4, #050A24);

            border-radius: 10px;

        }

        

        .category-content::-webkit-scrollbar-thumb:hover {

            background: linear-gradient(135deg, #5d0883, #030619);

        }

        

        .category-main-title {

            font-size: 32px;

            line-height: 1.2;

            font-weight: 800;

            color: var(--dark);

            margin-bottom: 28px;

            position: relative;

            padding-bottom: 12px;

        }

        

        .category-main-title::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 60px;

            height: 4px;

            background: var(--primary);

            border-radius: 2px;

        }

        

        .category-grid {

            display: grid;

            grid-template-columns: repeat(4, minmax(0, 1fr));

            gap: 36px;

            margin-top: 28px;

        }

        

        .category-column {

            min-width: 0;

        }

        

        .category-block {

            margin-bottom: 36px;

            min-width: 0;

        }

        

        .category-block-title {

            font-weight: 700;

            font-size: 18px;

            color: var(--dark);

            margin-bottom: 18px;

            cursor: pointer;

            padding-bottom: 10px;

            border-bottom: 2px solid rgba(0,0,0,0.08);

            display: flex;

            align-items: center;

            transition: var(--transition);

        }

        

        .category-block-title:hover {

            color: var(--primary);

            border-bottom-color: rgba(114, 10, 164, 0.3);

        }

        

        .category-block-title i {

            margin-right: 10px;

            font-size: 18px;

            color: var(--primary);

        }

        

        .category-items {

            display: flex;

            flex-direction: column;

            gap: 12px;

        }

        

        .category-item {

            font-size: 15px;

            color: rgba(92, 100, 125, 0.9);

            line-height: 1.4;

            text-decoration: none;

            cursor: pointer;

            width: fit-content;

            max-width: 100%;

            overflow-wrap: anywhere;

            transition: var(--transition);

            padding: 6px 12px;

            border-radius: 6px;

            position: relative;

            overflow: hidden;

        }

        

        .category-item::before {

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            width: 3px;

            height: 0;

            background: var(--primary);

            transition: height 0.3s ease;

        }

        

        .category-item:hover {

            color: var(--primary);

            background: rgba(114, 10, 164, 0.05);

            padding-left: 16px;

            transform: translateX(4px);

        }

        

        .category-item:hover::before {

            height: 100%;

        }

        

        .show-more-btn {

            background: none;

            border: none;

            padding: 8px 12px;

            color: var(--primary);

            font-size: 14px;

            font-weight: 600;

            cursor: pointer;

            display: inline-flex;

            align-items: center;

            gap: 6px;

            margin-top: 12px;

            transition: var(--transition);

            border-radius: 6px;

        }

        

        .show-more-btn:hover {

            background: rgba(114, 10, 164, 0.1);

            transform: translateY(-1px);

        }

        

        .show-more-btn svg {

            width: 16px;

            height: 16px;

            transition: transform 0.3s ease;

        }

        

        .show-more-btn.expanded svg {

            transform: rotate(180deg);

        }

        

        /* Выпадающий список городов - улучшенный с черным текстом */

        .cities-dropdown {

            width: 820px;

            max-height: 520px;

            padding: 24px !important;

            position: fixed !important;

            z-index: 9999;

            display: none;

            background: rgba(255, 255, 255, 0.98);

            backdrop-filter: blur(20px);

            border-radius: 16px;

            box-shadow: var(--shadow-lg);

            border: 1px solid rgba(0,0,0,0.08);

            opacity: 0;

            transform: translateY(-20px) scale(0.95);

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

        }

        

        .cities-dropdown.show {

            display: block;

            opacity: 1;

            transform: translateY(0) scale(1);

        }

        

        .city-selector-grid {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

        }

        

        .city-column {

            max-height: 420px;

            overflow-y: auto;

            padding-right: 12px;

            border-radius: 8px;

            background: rgba(0,0,0,0.01);

        }

        

        .city-column-title {

            font-weight: 700;

            color: var(--dark);

            margin-bottom: 16px;

            padding-bottom: 8px;

            border-bottom: 3px solid var(--primary);

            font-size: 16px;

            position: sticky;

            top: 0;

            background: var(--white);

            padding: 12px 0;

            z-index: 1;

        }

        

        .federal-district-list,

        .region-list,

        .city-list {

            list-style: none;

            padding: 0;

            margin: 0;

        }

        

        .federal-district-item,

        .region-item,

        .city-item {

            padding: 10px 14px;

            margin-bottom: 6px;

            border-radius: 8px;

            cursor: pointer;

            transition: var(--transition);

            font-size: 14px;

            line-height: 1.4;

            font-weight: 500;

            border: 1px solid transparent;

            background: var(--white);

            position: relative;

            overflow: hidden;

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

        }

        

        .federal-district-item::before,

        .region-item::before,

        .city-item::before {

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            width: 3px;

            height: 0;

            background: var(--primary);

            transition: height 0.3s ease;

        }

        

        .federal-district-item:hover,

        .region-item:hover,

        .city-item:hover {

            background-color: rgba(114, 10, 164, 0.05);

            color: var(--primary) !important;

            border-color: rgba(114, 10, 164, 0.2);

            transform: translateX(4px);

        }

        

        .federal-district-item:hover::before,

        .region-item:hover::before,

        .city-item:hover::before {

            height: 100%;

        }

        

        .federal-district-item.active,

        .region-item.active,

        .city-item.active {

            background: linear-gradient(135deg, var(--primary), var(--primary-hover));

            color: white !important; /* БЕЛЫЙ ТЕКСТ на активном элементе */

            border-color: var(--primary);

            box-shadow: 0 4px 12px rgba(114, 10, 164, 0.3);

        }

        

        .selected-city-info {

            margin-top: 20px;

            padding: 16px;

            background: linear-gradient(135deg, #f8f9fa, #e9ecef);

            border-radius: 12px;

            font-size: 14px;

            border: 1px solid rgba(0,0,0,0.1);

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

        }

        

        /* Основной header - улучшенный */

        .main-header {

            background-color: var(--white);

            padding: 0;

            box-shadow: 0 4px 20px rgba(0,0,0,0.06);

            position: relative;

            z-index: 100;

            display: none;

        }

        

        @media (min-width: 769px) {

            .main-header {

                display: block !important;

            }

        }

        

        .main-header-container {

            width: 100%;

            max-width: 1400px;

            padding: 0 40px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 auto;

        }

        

        @media (min-width: 1024px) {

            .main-header-container {

                padding: 0 40px;

            }

        }

        

        .header-left {

            display: flex;

            align-items: center;

            justify-content: flex-start;

            gap: 24px;

        }

        

        .logo-container {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 20px 0;

            text-decoration: none;

            color: var(--dark);

            font-size: 20px;

            font-weight: 700;

            transition: var(--transition);

            position: relative;

        }

        

        .logo-container:hover {

            transform: translateY(-1px);

        }

        

        .logo-container::after {

            content: '';

            position: absolute;

            bottom: 16px;

            left: 0;

            width: 0;

            height: 2px;

            background: var(--primary);

            transition: width 0.3s ease;

        }

        

        .logo-container:hover::after {

            width: 100%;

        }

        

        .logo-container img:not(.logo-icon) {

            width: 120px;

            height: 44px;

            margin-right: 12px;

            transition: transform 0.3s ease;

        }

        

        .logo-container:hover img:not(.logo-icon) {

            transform: scale(1.05);

        }

        

        .logo-icon {
            width: 38px;
            height: 38px;
            object-fit: contain;
            object-position: center;
            background: #fff;
            padding: 4px;
            box-sizing: border-box;
            border-radius: 11px;
            margin-right: 12px;
            box-shadow: 0 6px 16px rgba(114, 10, 164, 0.25);
            flex-shrink: 0;
            transition: transform 0.3s ease;
            display: block;
        }

        

        .logo-container:hover .logo-icon {

            transform: rotate(-5deg);

        }

        

        /* Кнопка категорий - улучшенная */

        .categories-btn {

            background: var(--primary);

            color: var(--white);

            border: none;

            padding: 10px 20px;

            border-radius: var(--border-radius-sm);

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            cursor: pointer;

            font-size: 14px;

            font-weight: 600;

            transition: var(--transition);

            height: 44px;

            letter-spacing: 0.3px;

            position: relative;

            overflow: hidden;

        }

        

        .categories-btn::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

            transition: left 0.6s ease;

        }

        

        .categories-btn:hover {

            background-color: var(--primary-hover);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(114, 10, 164, 0.3);

        }

        

        .categories-btn:hover::before {

            left: 100%;

        }

        

        .categories-btn i {

            font-size: 16px;

        }

        

        /* Кнопка города в десктопе - улучшенная */

        .city-btn-desktop {

            padding: 10px 16px;

            background: var(--white);

            border-radius: var(--border-radius);

            display: inline-flex;

            justify-content: center;

            align-items: center;

            gap: 8px;

            cursor: pointer;

            transition: var(--transition);

            border: 1px solid rgba(0,0,0,0.1);

            text-decoration: none;

            color: var(--dark);

            height: 44px;

            box-sizing: border-box;

            font-size: 14px;

            font-weight: 500;

            box-shadow: 0 2px 8px rgba(0,0,0,0.05);

        }

        

        .city-btn-desktop:hover {

            color: var(--primary);

            border-color: var(--primary);

            transform: translateY(-2px);

            box-shadow: 0 4px 16px rgba(114, 10, 164, 0.15);

        }

        

        .city-btn-desktop i {

            color: var(--primary);

            font-size: 16px;

            transition: transform 0.3s ease;

        }

        

        .city-btn-desktop:hover i {

            transform: scale(1.1);

        }

        

        /* Правая часть header - улучшенная */

        .header-right {

            display: inline-flex;

            justify-content: space-between;

            align-items: center;

            gap: 16px;

        }

        

        /* Кнопка публикации - улучшенная */

        .publish-btn {

            position: relative;

        }

        

        .publish-btn .btn-content {

            background: var(--primary);

            color: var(--white);

            border: none;

            padding: 10px 20px;

            border-radius: var(--border-radius-sm);

            display: flex;

            align-items: center;

            gap: 10px;

            cursor: pointer;

            font-size: 14px;

            font-weight: 600;

            height: 44px;

            box-sizing: border-box;

            transition: var(--transition);

            letter-spacing: 0.3px;

            position: relative;

            overflow: hidden;

        }

        

        .publish-btn .btn-content::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

            transition: left 0.6s ease;

        }

        

        .publish-btn .btn-content:hover {

            background-color: var(--primary-hover);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(114, 10, 164, 0.4);

        }

        

        .publish-btn .btn-content:hover::before {

            left: 100%;

        }

        

        .publish-btn .btn-content i {

            font-size: 16px;

            transition: transform 0.3s ease;

        }

        

        .publish-btn .btn-content:hover i {

            transform: rotate(90deg);

        }

        

        /* Иконки пользователя - улучшенные и увеличенные */

        .user-icons {

            display: flex;

            gap: 16px;

            align-items: center;

        }

        

        .icon-btn {

            background: none;

            border: none;

            color: var(--light);

            cursor: pointer;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 6px;

            padding: 10px 12px;

            position: relative;

            transition: var(--transition);

            min-width: 60px;

            border-radius: var(--border-radius-sm);

        }

        

        .icon-btn:hover {

            color: var(--primary);

            background: rgba(114, 10, 164, 0.05);

            transform: translateY(-2px);

        }

        

        .icon-btn i {

            font-size: 22px; /* Увеличен размер иконок */

            transition: transform 0.3s ease;

        }

        

        .icon-btn:hover i {

            transform: scale(1.1);

        }

        

        .icon-label {

            font-size: 13px; /* Увеличен размер текста */

            color: var(--light);

            line-height: 1.2;

            font-weight: 500;

            transition: color 0.3s ease;

            white-space: nowrap;

        }

        

        .icon-btn:hover .icon-label {

            color: var(--primary);

        }

        

        .notification-badge {

            position: absolute;

            top: 4px;

            right: 4px;

            background: linear-gradient(135deg, #FF416C, #FF4B2B);

            color: var(--white);

            border-radius: 12px;

            width: 22px;

            height: 22px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 11px; /* Слегка увеличен */

            font-weight: 700;

            border: 2px solid var(--white);

            box-shadow: 0 2px 6px rgba(255, 65, 108, 0.4);

            animation: pulse 2s infinite;

        }

        

        @keyframes pulse {

            0% { transform: scale(1); }

            50% { transform: scale(1.1); }

            100% { transform: scale(1); }

        }

        

        /* Профиль пользователя - улучшенный */

        .user-profile {

            position: relative;

        }

        

        .profile-btn {

            background: linear-gradient(135deg, #f8f9fa, #e9ecef);

            border-radius: 24px;

            padding: 6px;

            display: flex;

            align-items: center;

            gap: 12px;

            cursor: pointer;

            border: none;

            width: 200px;

            justify-content: flex-end;

            position: relative;

            height: 48px;

            box-sizing: border-box;

            transition: var(--transition);

            box-shadow: 0 2px 8px rgba(0,0,0,0.08);

        }

        

        .profile-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(0,0,0,0.12);

            background: linear-gradient(135deg, #ffffff, #f8f9fa);

        }

        

        .profile-avatar {

            position: absolute;

            left: 4px;

            width: 36px;

            height: 36px;

            background: var(--white);

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

            background-size: cover;

            background-position: center;

            background-image: none;

            font-size: 16px;

            font-weight: 700;

            color: var(--white);

            border: 3px solid var(--white);

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            transition: transform 0.3s ease;

        }

        

        .profile-btn:hover .profile-avatar {

            transform: scale(1.05);

        }

        

        .profile-info {

            display: flex;

            flex-direction: column;

            align-items: flex-start;

            width: 100%;

            max-width: 140px;

            padding-right: 8px;

        }

        

        .profile-name {

            font-size: 14px;

            font-weight: 600;

            color: var(--dark);

            text-overflow: ellipsis;

            overflow: hidden;

            white-space: nowrap;

            max-width: 130px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            width: 100%;

            line-height: 1.2;

        }

        

        .profile-role {

            font-size: 12px;

            color: var(--light);

            text-overflow: ellipsis;

            max-width: 130px;

            overflow: hidden;

            line-height: 1.2;

            font-weight: 500;

        }

        

        /* Выпадающее меню пользователя - улучшенное с черным текстом */

        .user-dropdown {

            width: 300px !important;

            padding: 20px !important;

            background: rgba(255, 255, 255, 0.98) !important;

            backdrop-filter: blur(20px) !important;

            border: 1px solid rgba(0,0,0,0.08) !important;

            box-shadow: var(--shadow-lg) !important;

            border-radius: 16px !important;

            opacity: 0;

            transform: translateY(-10px) scale(0.95);

            transform-origin: top right;

            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

            color: var(--dark) !important;

        }

        .user-profile .user-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            left: auto;
        }

        

        .user-dropdown.show {

            opacity: 1;

            transform: translateY(0) scale(1);

            display: block !important;

        }

        

        .main-header .dropdown-menu.user-dropdown {

            min-width: 300px;

            border: 1px solid rgba(0,0,0,0.08);

            padding: 20px;

        }

        

        .user-info-full {

            margin-bottom: 16px;

            padding-bottom: 16px;

            border-bottom: 1px solid rgba(0,0,0,0.08);

        }

        

        .user-actions-full {

            display: flex;

            flex-direction: column;

            gap: 6px;

        }

        

        .user-dropdown .dropdown-item {

            padding: 10px 14px;

            border-bottom: none;

            border-radius: 8px;

            font-size: 14px;

            min-height: 40px;

            transition: var(--transition);

            border-left: 3px solid transparent;

            color: var(--dark) !important; /* ЧЕРНЫЙ ТЕКСТ */

        }

        

        .user-dropdown .dropdown-item:hover {

            background-color: rgba(114, 10, 164, 0.05);

            color: var(--primary) !important;

            border-left-color: var(--primary);

            padding-left: 20px;

        }

        

        .user-dropdown .dropdown-item i {

            width: 20px;

            font-size: 16px;

        }

        

        /* Адаптивность */

        @media (max-width: 1200px) {

            .category-grid {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }

            

            .top-nav-container,

            .middle-nav-container,

            .main-header-container {

                padding: 0 24px;

            }

            

            .user-icons {

                gap: 12px;

            }

            

            .icon-btn {

                min-width: 56px;

                padding: 8px 10px;

            }

            

            .icon-btn i {

                font-size: 20px;

            }

            

            .icon-label {

                font-size: 12px;

            }

        }

        

        @media (max-width: 992px) {

            .category-grid {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

            

            .user-icons {

                gap: 8px;

            }

            

            .icon-btn {

                min-width: 52px;

                padding: 6px 8px;

            }

            

            .icon-btn i {

                font-size: 18px;

            }

            

            .icon-label {

                font-size: 11px;

            }

        }

        

        /* Анимации */

        @keyframes fadeIn {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        

        @keyframes slideIn {

            from {

                opacity: 0;

                transform: translateX(-20px);

            }

            to {

                opacity: 1;

                transform: translateX(0);

            }

        }

        

        /* Микро-взаимодействия */

        .search-container,

        .categories-btn,

        .city-btn-desktop,

        .publish-btn .btn-content,

        .profile-btn {

            animation: fadeIn 0.5s ease-out;

        }

        

        .middle-nav-link {

            animation: slideIn 0.5s ease-out;

        }

        

        .middle-nav-link:nth-child(1) { animation-delay: 0.1s; }

        .middle-nav-link:nth-child(2) { animation-delay: 0.2s; }

        .middle-nav-link:nth-child(3) { animation-delay: 0.3s; }

        .middle-nav-link:nth-child(4) { animation-delay: 0.4s; }

        .middle-nav-link:nth-child(5) { animation-delay: 0.5s; }

        .middle-nav-link:nth-child(6) { animation-delay: 0.6s; }

        .middle-nav-link:nth-child(7) { animation-delay: 0.7s; }

        

        .hidden-items {

            display: none;

            flex-direction: column;

            gap: 12px;

        }

        

        /* Исправления для темного текста в дропдаунах */

        .dropdown-menu * {

            color: var(--dark) !important;

        }

        

        .dropdown-menu .text-muted {

            color: #6c757d !important;

        }

        

        .dropdown-menu .text-dark {

            color: var(--dark) !important;

        }

        

        .dropdown-menu a {

            color: var(--dark) !important;

        }

        

        .dropdown-menu a:hover {

            color: var(--primary) !important;

        }

        

        /* Исправление для кнопки в выпадающем меню поддержки */

        .dropdown-menu .btn-outline-primary {

            color: var(--primary) !important;

            border-color: var(--primary) !important;

        }

        

        .dropdown-menu .btn-outline-primary:hover {

            color: var(--white) !important;

            background-color: var(--primary) !important;

        }

        .grad-lang-switcher { margin-left: 10px; }
        .grad-lang-switcher__btn {
            height: 40px;
            border-radius: 12px;
            border: 1px solid rgba(114, 10, 164, 0.22);
            background: linear-gradient(180deg, #fff 0%, #faf8fc 100%);
            color: #050A24;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 12px;
            font-size: 13px;
            font-weight: 600;
        }
        .grad-lang-switcher__menu {
            min-width: 220px;
            border-radius: 12px;
            padding: 8px;
        }
        .grad-lang-switcher__item {
            display: flex !important;
            align-items: center;
            gap: 10px;
            border-radius: 8px;
            padding: 9px 10px !important;
            font-size: 14px;
        }
        .grad-lang-switcher__item.active {
            background: rgba(114, 10, 164, 0.08);
            color: #720AA4 !important;
        }
        .grad-lang-switcher__fab {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid rgba(114, 10, 164, 0.35);
            background: #fff;
            color: #050A24;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }