/* === МОБИЛЬНАЯ ШАПКА — ФИНАЛЬНЫЙ ОВЕРРАЙД === */

    @media (max-width: 768px) {

        header {

            width: 100% !important;

            box-sizing: border-box !important;

            padding: 6px 0 !important;

        }

        header .container {

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 !important;

            padding: 0 8px !important;

            box-sizing: border-box !important;

        }

        .header-content {

            display: flex !important;

            grid-template-columns: unset !important;

            justify-content: flex-start !important;

            align-items: center !important;

            gap: 6px !important;

            width: 100% !important;

            max-width: 100% !important;

            box-sizing: border-box !important;

            flex-wrap: nowrap !important;

            padding: 0 !important;

        }

        /* Бургер — НЕ fixed, встроен в поток */

        .mobile-menu-toggle {

            position: static !important;

            top: unset !important;

            left: unset !important;

            width: auto !important;

            height: auto !important;

            display: flex !important;

            align-items: center !important;

            gap: 5px !important;

            padding: 6px 10px !important;

            font-size: 13px !important;

            flex-shrink: 0 !important;

            z-index: auto !important;

            background: rgba(225, 29, 72, 0.12) !important;

            border: 1px solid rgba(225, 29, 72, 0.3) !important;

            border-radius: 10px !important;

            color: #e11d48 !important;

            font-weight: 600 !important;

            margin: 0 !important;

        }

        body.dark-theme .mobile-menu-toggle {

            background: rgba(225, 29, 72, 0.2) !important;

            border-color: rgba(225, 29, 72, 0.4) !important;

            color: #fb7185 !important;

        }

        .mobile-menu-toggle i { font-size: 15px !important; }

        .mobile-menu-toggle .menu-label {

            display: inline !important;

            font-size: 13px !important;

        }

        /* PRO + Время — левый край */

        .h-left {

            display: flex !important;

            align-items: center !important;

            gap: 6px !important;

            justify-self: unset !important;

            justify-content: flex-start !important;

        }

        .h-brand { display: none !important; }

        .h-logo { display: none !important; }

        .h-time { display: flex !important; }

        .h-t.real { display: none !important; }

        .h-t.game { display: flex !important; flex-shrink: 0 !important; }

        .h-t-label { display: none !important; }

        .pro-b-line2 { display: none !important; }

        .h-right { display: none !important; }

        nav.desktop-nav { display: none !important; }

        /* Старые элементы — скрыть */

        .brand-container { display: none !important; }

        .time-display { display: none !important; }

        .logo { display: none !important; }

    }

    


    /* ========== ИСПРАВЛЕНИЕ ФОНА В ТЕМНОЙ ТЕМЕ - УБИРАЕМ СЕРЫЙ ГРАДИЕНТ ========== */

    /* ТОЛЬКО для темной темы - чистый темный фон */

    body.dark-theme {

        background: #0f172a !important;

        background-image: none !important;

    }



    /* УВЕЛИЧЕННЫЕ ИКОНКИ И ТЕКСТ В ШАПКЕ - ПРИМЕНЯЕМ НЕПОСРЕДСТВЕННО */

    nav ul li a {

        color: var(--text);

        text-decoration: none;

        font-size: 16px !important;

        font-weight: 500;

        padding: 10px 14px !important;

        border-radius: 6px;

        transition: all 0.2s;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 6px;

        min-width: 70px !important;

        text-align: center;

    }



    /* УВЕЛИЧЕННЫЙ ТЕКСТ ПОД ИКОНКАМИ */

    nav ul li a span {

        font-size: 14px !important;

        font-weight: 500;

        line-height: 1.1;

        text-align: center;

        width: 100%;

    }



    /* УВЕЛИЧЕННЫЕ ИКОНКИ */

    nav ul li a i {

        font-size: 22px !important;

        transition: all 0.2s;

        color: #e11d48;

    }



    /* Стиль для активной/главной кнопки */

    nav ul li a.active {

        background: var(--primary);

        color: white;

        font-weight: 600;

        box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);

    }



    nav ul li a.active:hover {

        background: var(--primary-dark);

        transform: translateY(-1px);

        box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4);

    }



    nav ul li a.active i {

        color: white;

        transform: scale(1.1);

    }



    nav ul li a:not(.active):hover {

        background: rgba(225, 29, 72, 0.1);

        color: var(--primary);

    }



    nav ul li a:not(.active):hover i {

        transform: translateY(-1px);

    }



    /* УВЕЛИЧЕННЫЕ СТИЛИ ДЛЯ МОБИЛЬНОЙ НАВИГАЦИИ */

    .mobile-nav ul li a {

        display: flex;

        align-items: center;

        gap: 18px !important;

        padding: 16px 18px !important;

        background: white;

        border-radius: 8px;

        text-decoration: none;

        color: var(--text);

        font-weight: 500;

        border: 1px solid var(--border);

        transition: all 0.2s;

        font-size: 18px !important;

    }



    /* УВЕЛИЧЕННЫЕ ИКОНКИ В МОБИЛЬНОЙ НАВИГАЦИИ */

    .mobile-nav ul li a i {

        width: 28px !important;

        text-align: center;

        font-size: 22px !important;

        color: #e11d48;

    }



    .mobile-nav ul li a:hover,

    .mobile-nav ul li a.active {

        background: var(--primary);

        color: white;

    }



    /* Адаптивные версии */

    @media (max-width: 1200px) {

        nav ul li a {

            font-size: 15px !important;

            padding: 9px 12px !important;

            min-width: 65px !important;

        }

        

        nav ul li a span {

            font-size: 13px !important;

        }

    }



    @media (max-width: 1024px) {

        nav ul li a {

            min-width: 60px !important;

            padding: 8px 11px !important;

        }

        

        nav ul li a span {

            font-size: 12px !important;

        }

    }



    @media (max-width: 480px) {

        .mobile-nav ul li a {

            padding: 14px 16px !important;

            font-size: 17px !important;

        }

    }



    @media (max-width: 360px) {

        .mobile-nav ul li a {

            padding: 12px 14px !important;

            font-size: 16px !important;

        }

    }



    /* ========== ШАПКА — ФИНАЛЬНАЯ v5 ========== */



    header .container {

        max-width: 100% !important;

        padding: 0 clamp(4px, 0.5vw, 15px) !important;

        margin: 0 !important;

    }



    .header-content {

        display: grid !important;

        grid-template-columns: 1fr auto 1fr;

        align-items: center;

        width: 100%;

        min-height: 56px;

    }



    /* === ЛЕВО === */

    .h-left {

        display: flex;

        align-items: center;

        gap: clamp(4px, 0.5vw, 12px);

        justify-self: end;

    }



    /* Медведь + название — показываются только на 2K */

    .h-brand {

        display: none; /* по умолчанию скрыт */

        align-items: center;

        gap: 6px;

        flex-shrink: 0;

    }

    .h-bear {

        width: clamp(32px, 2.5vw, 44px);

        height: clamp(32px, 2.5vw, 44px);

    }

    .h-brand-name {

        font-size: clamp(12px, 1vw, 16px);

        font-weight: 700;

        white-space: nowrap;

    }

    .h-brand-sub {

        font-size: clamp(8px, 0.6vw, 11px);

        opacity: 0.7;

        white-space: nowrap;

    }



    /* PRO баннер */

    .pro-banner {

        display: flex; flex-direction: column; align-items: center;

        background: linear-gradient(135deg, #f59e0b, #ef4444) !important;

        color: #fff !important;

        padding: clamp(4px, 0.4vw, 10px) clamp(10px, 1.2vw, 26px);

        border-radius: 10px; text-decoration: none;

        animation: proPulse 2.5s ease-in-out infinite;

        white-space: nowrap; line-height: 1.3; flex-shrink: 0;

    }

    .pro-b-line1 { font-size: clamp(10px, 0.85vw, 15px); font-weight: 700; }

    .pro-b-line2 { font-size: clamp(8px, 0.55vw, 11px); opacity: 0.9; }

    .pro-banner:hover { transform: scale(1.03); filter: brightness(1.1); }



    .pro-days-badge {

        background: linear-gradient(135deg, #059669, #10b981);

        color: #fff; padding: clamp(4px, 0.4vw, 8px) clamp(8px, 0.8vw, 16px);

        border-radius: 8px; font-size: clamp(10px, 0.8vw, 14px);

        font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;

    }

    .pro-days-badge .days-num { font-weight: 800; }



    /* Красный лого — скрыт по умолчанию */

    .h-logo { flex-shrink: 0; display: none; }

    .h-logo-img {

        width: clamp(30px, 2.8vw, 50px); height: clamp(30px, 2.8vw, 50px);

        border-radius: 50%; object-fit: contain;

    }



    /* Часы — ИГРОВОЕ ВСЕГДА, реальное где помещается */

    .h-time { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }

    .h-t {

        display: flex; align-items: center; gap: 4px;

        padding: clamp(1px, 0.15vw, 3px) clamp(4px, 0.4vw, 8px);

        border-radius: 4px; background: rgba(0,0,0,0.06); white-space: nowrap;

    }

    .h-t i { font-size: clamp(9px, 0.7vw, 13px); opacity: 0.7; }

    .h-t-label { display: none; font-size: clamp(9px, 0.6vw, 12px); opacity: 0.7; }

    .h-t-v { font-size: clamp(11px, 0.85vw, 16px); font-weight: 700;         font-variant-numeric: tabular-nums;

        letter-spacing: 0;

    }

    .h-t.real .h-t-v { color: #059669; }

    .h-t.game .h-t-v { color: #e11d48; }

    /* Реальное время — скрыто по умолчанию */

    .h-t.real { display: none; }

    body.dark-theme .h-t { background: rgba(255,255,255,0.08); }

    body.dark-theme .h-t.real .h-t-v { color: #4ade80; text-shadow: 0 0 6px rgba(74,222,128,0.3); }

    body.dark-theme .h-t.game .h-t-v { color: #fb7185; text-shadow: 0 0 6px rgba(251,113,133,0.3); }



    /* === ЦЕНТР === */

    nav.desktop-nav { justify-self: center; }

    nav.desktop-nav ul {

        display: flex !important; align-items: center; justify-content: center;

        list-style: none; margin: 0; padding: 0;

        gap: clamp(0px, 0.15vw, 4px);

    }

    nav.desktop-nav ul li a {

        display: flex; flex-direction: column; align-items: center;

        gap: clamp(1px, 0.12vw, 3px);

        padding: clamp(4px, 0.35vw, 10px) clamp(4px, 0.5vw, 12px);

        border-radius: 6px; text-decoration: none; color: var(--text);

        transition: all 0.15s;

        min-width: clamp(40px, 3.8vw, 72px); text-align: center;

    }

    nav.desktop-nav ul li a i {

        font-size: clamp(14px, 1.2vw, 22px); color: #e11d48; transition: all 0.15s;

    }

    nav.desktop-nav ul li a span {

        font-size: clamp(8px, 0.65vw, 13px); font-weight: 500;

        white-space: nowrap; line-height: 1.1;

    }

    nav.desktop-nav ul li a.active {

        background: var(--primary, #e11d48); color: #fff;

        box-shadow: 0 2px 8px rgba(225,29,72,0.3);

    }

    nav.desktop-nav ul li a.active i { color: #fff; }

    nav.desktop-nav ul li a:not(.active):hover {

        background: rgba(225,29,72,0.1); color: var(--primary, #e11d48);

    }



    /* === ПРАВО === */

    .h-right {

        display: flex; align-items: center;

        gap: clamp(4px, 0.4vw, 10px);

        justify-self: start;

    }



    .auth-btn {

        display: flex; align-items: center; gap: 6px;

        background: linear-gradient(135deg, #3b82f6, #6366f1) !important;

        color: #fff !important;

        padding: clamp(6px, 0.5vw, 10px) clamp(10px, 1vw, 20px);

        border-radius: 10px; text-decoration: none;

        font-weight: 600; font-size: clamp(11px, 0.8vw, 14px);

        white-space: nowrap; transition: all 0.2s;

        box-shadow: 0 2px 8px rgba(59,130,246,0.3);

    }

    .auth-btn i { font-size: clamp(14px, 1.1vw, 18px); color: #fff !important; }

    .auth-btn span { color: #fff !important; }

    .auth-btn:hover { transform: scale(1.05); filter: brightness(1.1); }

    .auth-btn.logged-in {

        background: linear-gradient(135deg, #059669, #10b981) !important;

        box-shadow: 0 2px 8px rgba(5,150,105,0.3);

    }

    /* Двухстрочная подпись: "Личный кабинет" сверху + имя снизу */

    .auth-btn .acct-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; gap:1px; }

    .auth-btn .acct-l1{ font-weight:700; font-size:clamp(11px,0.82vw,14px); white-space:nowrap; }

    .auth-btn .acct-l2{ font-weight:500; font-size:clamp(8px,0.6vw,11px); opacity:.85; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }



    .pro-badge-header {

        background: linear-gradient(135deg, #f59e0b, #f97316);

        color: #fff; font-size: clamp(7px, 0.5vw, 9px);

        font-weight: 800; padding: 1px 5px; border-radius: 3px;

    }



    .theme-toggle {

        cursor: pointer; background: transparent;

        border: 2px solid #e2e8f0; border-radius: 8px;

        padding: clamp(4px, 0.3vw, 8px) clamp(5px, 0.4vw, 10px);

        font-size: clamp(13px, 1vw, 18px); color: #64748b;

        transition: all 0.15s; display: flex; align-items: center;

    }

    .theme-toggle:hover { border-color: #f59e0b; background: rgba(245,158,11,0.08); }

    body.dark-theme .theme-toggle { border-color: #475569; color: #fbbf24; }



    /* === АДАПТИВНОСТЬ — ПРОГРЕССИВНОЕ ПОКАЗЫВАНИЕ === */



    /* 2K+ (1921+): ВСЁ видно — медведь, название, лого, часы с подписями */

    @media (min-width: 1921px) {

        .h-brand { display: flex !important; }

        .h-logo { display: flex !important; }

        .h-t.real { display: flex !important; }

        .h-t-label { display: inline !important; }

    }



    /* Full HD (1601-1920): реальное время + красный лого */

    @media (min-width: 1601px) and (max-width: 1920px) {

        .h-logo { display: flex !important; }

        .h-t.real { display: flex !important; }

    }



    /* Среднее (1401-1600): реальное время видно */

    @media (min-width: 1401px) and (max-width: 1600px) {

        .h-t.real { display: flex !important; }

    }



    /* < 1200: PRO компактнее */

    @media (max-width: 1200px) {

        .pro-b-line2 { display: none !important; }

        .pro-banner { padding: 4px 10px !important; }

    }



    /* < 900: кнопка auth — только иконка */

    @media (max-width: 900px) {

        .auth-btn .acct-l2 { display: none !important; }

        .auth-btn { padding: 6px 8px !important; }

    }



    /* Мобильные стили — определены в /assets/css/mobile.css */



    

    body.dark-theme nav ul li a {

        color: #cbd5e1 !important;

        background: transparent !important;

    }

    

    body.dark-theme nav ul li a i {

        color: #e11d48 !important;

    }

    

    body.dark-theme nav ul li a:hover {

        background: rgba(225, 29, 72, 0.15) !important;

        color: #e11d48 !important;

    }

    

    body.dark-theme nav ul li a:hover i {

        color: #e11d48 !important;

    }

    

    /* САМОЕ ГЛАВНОЕ: АКТИВНАЯ КНОПКА В ТЕМНОЙ ТЕМЕ - СИНИЙ ФОН */

    body.dark-theme nav ul li a.active {

        background: #3b82f6 !important;

        color: #ffffff !important;

        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;

    }

    

    body.dark-theme nav ul li a.active i {

        color: #ffffff !important;

        transform: scale(1.1) !important;

    }

    

    body.dark-theme nav ul li a.active:hover {

        background: #2563eb !important;

        color: #ffffff !important;

    }

    

    /* Мобильная навигация в темной теме */

    body.dark-theme .mobile-nav ul li a {

        background: #1e293b !important;

        border-color: #334155 !important;

        color: #cbd5e1 !important;

    }

    

    body.dark-theme .mobile-nav ul li a i {

        color: #e11d48 !important;

    }

    

    body.dark-theme .mobile-nav ul li a:hover {

        background: rgba(225, 29, 72, 0.15) !important;

        color: #e11d48 !important;

    }

    

    body.dark-theme .mobile-nav ul li a.active {

        background: #3b82f6 !important;

        color: #ffffff !important;

        border-color: #3b82f6 !important;

    }

    

    body.dark-theme .mobile-nav ul li a.active i {

        color: #ffffff !important;

    }



    /* ========== ИСПРАВЛЕНИЕ ДЛЯ КНОПКИ "НАВЕРХ" В ТЕМНОЙ ТЕМЕ ========== */

    body.dark-theme .scroll-to-top,

    body.dark-theme #scrollToTop {

        background: #dc2626 !important;

        color: white !important;

        border: none !important;

        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;

        opacity: 1 !important;

        visibility: visible !important;

    }

    

    body.dark-theme .scroll-to-top:hover,

    body.dark-theme #scrollToTop:hover {

        background: #b91c1c !important;

        transform: translateY(-3px) !important;

        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.5) !important;

    }

    

    body.dark-theme .scroll-to-top i,

    body.dark-theme #scrollToTop i {

        color: white !important;

        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;

    }

    

    @media (max-width: 768px) {

        body.dark-theme .scroll-to-top,

        body.dark-theme #scrollToTop {

            width: 45px !important;

            height: 45px !important;

            font-size: 18px !important;

            bottom: 20px !important;

            right: 20px !important;

        }

    }



    /* ========== СТИЛИ ДЛЯ РЕКЛАМНЫХ БЛОКОВ YANDEX ========== */

    .yandex-ad {

        margin: 20px auto;

        text-align: center;

        max-width: 1200px;

        min-height: 250px;

        display: flex;

        justify-content: center;

        align-items: center;

        background: #f8f9fa;

        border-radius: 8px;

        overflow: hidden;

    }



    .yandex-ad.top {

        margin-top: 20px;

        margin-bottom: 30px;

    }



    .yandex-ad.middle {

        margin: 40px auto;

    }



    .yandex-ad.bottom {

        margin-top: 40px;

        margin-bottom: 20px;

    }



    body.dark-theme .yandex-ad {

        background: #1e293b;

    }



    @media (max-width: 768px) {

        .yandex-ad {

            min-height: 200px;

            margin: 15px auto;

        }

        

        .yandex-ad.middle {

            margin: 30px auto;

        }

    }



    @media (max-width: 480px) {

        .yandex-ad {

            min-height: 150px;

            margin: 10px auto;

            border-radius: 6px;

        }

        

        .yandex-ad.middle {

            margin: 20px auto;

        }

    }



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

    body.dark-theme .modal {

        background-color: rgba(0, 0, 0, 0.8) !important;

    }



    body.dark-theme .modal-content {

        background: #1e293b !important;

        background-color: #1e293b !important;

        border-color: #475569 !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

    }



    body.dark-theme .modal-body {

        background: #1e293b !important;

        background-color: #1e293b !important;

    }



    body.dark-theme .modal-header {

        background: #4a5568 !important;

        border-bottom-color: #475569 !important;

    }



    body.dark-theme .modal-header h3 {

        color: #ffffff !important;

    }



    body.dark-theme .close-modal {

        color: #ffffff !important;

    }



    body.dark-theme .form-group label {

        color: #f8fafc !important;

    }



    body.dark-theme .form-group input,

    body.dark-theme .form-group select,

    body.dark-theme .form-group textarea {

        background: #0f172a !important;

        background-color: #0f172a !important;

        color: #cbd5e1 !important;

        border-color: #475569 !important;

    }



    body.dark-theme .form-group input::placeholder,

    body.dark-theme .form-group textarea::placeholder {

        color: #94a3b8 !important;

    }



    body.dark-theme .form-group input:focus,

    body.dark-theme .form-group select:focus,

    body.dark-theme .form-group textarea:focus {

        border-color: #dc2626 !important;

        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;

    }



    body.dark-theme .submit-btn {

        background: #dc2626 !important;

        color: #ffffff !important;

    }



    body.dark-theme .submit-btn:hover {

        background: #b91c1c !important;

    }



    body.dark-theme .form-success {

        color: #34d399 !important;

    }



    body.dark-theme .form-success h4 {

        color: #34d399 !important;

    }



    body.dark-theme .error-message {

        color: #fca5a5 !important;

    }



    /* Дополнительные стили для select в темной теме */

    body.dark-theme .form-group select option {

        background: #1e293b !important;

        color: #cbd5e1 !important;

    }



    /* Контактная форма - общие стили */

    body.dark-theme .contact-form {

        background: transparent !important;

    }



    body.dark-theme .form-group {

        background: transparent !important;

    }

    

    /* ========== ЦВЕТА ВРЕМЕНИ В ШАПКЕ - ИСПРАВЛЕНО ========== */

    .time-item.real-time .time-value {

        color: #059669 !important;

    }



    .time-item.game-time .time-value {

        color: #e11d48 !important;

    }



    /* Для темной темы — яркие цвета */

    body.dark-theme .time-item.real-time .time-value {

        color: #4ade80 !important;

        text-shadow: 0 0 8px rgba(74,222,128,0.4) !important;

    }

    body.dark-theme .time-item.game-time .time-value {

        color: #fb7185 !important;

        text-shadow: 0 0 8px rgba(251,113,133,0.4) !important;

    }

    body.dark-theme .time-label { color: #94a3b8 !important; }



    /* ========== АДАПТИВНОСТЬ ДЛЯ РАЗНЫХ ЭКРАНОВ ========== */



    /* ===== 2K+ (1921px+) ===== */

    @media (min-width: 1921px) {

        .header-content { gap: 10px !important; padding: 0 15px !important; }

        .brand-container { margin-right: 10px !important; }

        .brand-main { font-size: 17px !important; font-weight: 700 !important; }

        .bear-logo, .official-logo { width: 44px !important; height: 44px !important; }

        nav.desktop-nav ul { gap: 4px !important; }

        nav.desktop-nav ul li a { padding: 10px 14px !important; min-width: 72px !important; }

        nav.desktop-nav ul li a i { font-size: 22px !important; }

        nav.desktop-nav ul li a span { font-size: 13px !important; }

        .pro-nav-item { padding: 10px 18px !important; }

        .header-right { gap: 10px !important; }

        .time-display { display: flex !important; }

        .time-item { padding: 6px 14px !important; }

        .time-label { display: inline !important; font-size: 12px !important; }

        .time-value { font-size: 15px !important; font-weight: 700 !important; }

        .main-logo .logo-image { width: 44px !important; height: 44px !important; }

        .theme-toggle { padding: 8px 12px !important; font-size: 18px !important; }

    }



    /* ===== Full HD (1441-1920) ===== */

    @media (min-width: 1441px) and (max-width: 1920px) {

        .header-content { gap: 8px !important; }

        .brand-container { margin-right: 8px !important; }

        nav.desktop-nav ul { gap: 2px !important; }

        nav.desktop-nav ul li a { padding: 9px 12px !important; min-width: 65px !important; }

        nav.desktop-nav ul li a i { font-size: 20px !important; }

        nav.desktop-nav ul li a span { font-size: 12px !important; }

        .time-display { display: flex !important; }

        .time-label { display: none !important; }

        .time-item { padding: 5px 10px !important; }

        .time-value { font-size: 13px !important; }

    }



    /* ===== Ноутбуки (1280-1440) ===== */

    @media (min-width: 1280px) and (max-width: 1440px) {

        .header-content { gap: 4px !important; }

        .brand-container { margin-right: 4px !important; }

        .brand-subtitle { display: none !important; }

        nav.desktop-nav ul { gap: 1px !important; }

        nav.desktop-nav ul li a { padding: 8px 10px !important; min-width: 58px !important; }

        nav.desktop-nav ul li a i { font-size: 18px !important; }

        nav.desktop-nav ul li a span { font-size: 11px !important; }

        .time-display { display: none !important; }

    }



    /* ===== Маленькие ноутбуки (1001-1279) ===== */

    @media (min-width: 1001px) and (max-width: 1279px) {

        .header-content { gap: 2px !important; }

        .brand-container { margin-right: 2px !important; }

        .brand-subtitle { display: none !important; }

        .bear-logo, .official-logo { width: 36px !important; height: 36px !important; }

        nav.desktop-nav ul { gap: 0 !important; }

        nav.desktop-nav ul li a { padding: 7px 8px !important; min-width: 52px !important; }

        nav.desktop-nav ul li a i { font-size: 17px !important; }

        nav.desktop-nav ul li a span { font-size: 10px !important; }

        .time-display { display: none !important; }

        .main-logo .logo-image { width: 36px !important; height: 36px !important; }

    }



    /* ===== Планшеты (769-1000) ===== */

    @media (min-width: 769px) and (max-width: 1000px) {

        .brand-subtitle { display: none !important; }

        .bear-logo, .official-logo { width: 32px !important; height: 32px !important; }

        nav.desktop-nav ul li a span { display: none !important; }

        nav.desktop-nav ul li a { min-width: 42px !important; padding: 8px 6px !important; gap: 0 !important; }

        nav.desktop-nav ul li a i { font-size: 18px !important; }

        nav.desktop-nav ul { gap: 0 !important; }

        .time-display { display: none !important; }

        .main-logo { display: none !important; }

    }



    /* Для мобильных устройств */

    @media (max-width: 768px) {

        /* Скрываем мишку РР4 и надпись полностью */

        .bear-logo,

        .brand-text .brand-main,

        .brand-text .brand-subtitle {

            display: none !important;

        }

        

        /* Добавляем время в шапку справа */

        .header-right {

            display: flex !important;

            align-items: center !important;

            gap: 10px !important;

        }

        

        /* Компактное отображение времени */

        .time-display {

            display: flex !important;

            flex-direction: row !important;

            gap: 10px !important;

        }

        

        .time-item {

            min-width: auto !important;

            padding: 5px 10px !important;

            font-size: 12px !important;

        }

        

        .time-item .time-label {

            display: none !important;

        }

        

        .time-item i {

            margin-right: 5px !important;

        }

        

        /* Переключатель темы оставляем */

        .theme-toggle {

            display: flex !important;

        }

        

        /* Убираем левый отступ */

        .brand-container {

            margin-left: 0 !important;

        }

    }

    

    

    /* === ФИКСАЦИЯ ШИРИНЫ ЧАСОВ (табулярные цифры) === */

    .h-t-v {

        font-variant-numeric: tabular-nums !important;

        -moz-font-feature-settings: "tnum" !important;

        -webkit-font-feature-settings: "tnum" !important;

        font-feature-settings: "tnum" !important;

        display: inline-block !important;

    }

    .h-t.real .h-t-v {

        min-width: 70px !important;

        text-align: center !important;

    }

    .h-t.game .h-t-v {

        min-width: 45px !important;

        text-align: center !important;

    }



/* === МОБИЛЬНЫЙ ФИНАЛЬНЫЙ ОВЕРРАЙД (ПОСЛЕДНИЙ) === */

    @media (max-width: 768px) {

        .header-content {

            display: flex !important;

            grid-template-columns: unset !important;

            justify-content: flex-start !important;

            align-items: center !important;

            gap: 6px !important;

            flex-wrap: nowrap !important;

            padding: 0 !important;

            width: 100% !important;

        }

        .mobile-menu-toggle {

            position: static !important;

            top: unset !important;

            left: unset !important;

            z-index: auto !important;

            width: auto !important;

            height: auto !important;

            margin: 0 !important;

            flex-shrink: 0 !important;

        }

        .h-left {

            display: flex !important;

            justify-content: flex-start !important;

            justify-self: unset !important;

            gap: 6px !important;

        }

        .h-right { display: none !important; }

        nav.desktop-nav, .brand-container, .logo, .time-display {

            display: none !important;

        }

    }

    @media (max-width: 480px) {

        .header-content {

            display: flex !important;

            grid-template-columns: unset !important;

            justify-content: flex-start !important;

            flex-wrap: nowrap !important;

            gap: 4px !important;

            padding: 0 !important;

        }

    }

    @media (max-width: 360px) {

        .header-content {

            display: flex !important;

            grid-template-columns: unset !important;

            justify-content: flex-start !important;

            flex-wrap: nowrap !important;

            gap: 3px !important;

        }

        .pro-b-line1 { font-size: 9px !important; }

    }

    /* Кнопка «Помощник» в меню — выделяем зелёным акцентом + бейдж NEW */

    .nav-helper-link {

        background: linear-gradient(135deg, #16a34a, #15803d) !important;

        border-radius: 9px !important;

        box-shadow: 0 2px 10px rgba(22,163,74,.32) !important;

    }

    .nav-helper-link i, .nav-helper-link span { color: #fff !important; }

    .nav-helper-link:hover { filter: brightness(1.08); }

    .nav-new-badge {

        display: inline-block; font-size: 9px; line-height: 1; font-weight: 800;

        background: #fbbf24; color: #1a1a1a; padding: 2px 5px; border-radius: 6px;

        margin-left: 5px; vertical-align: middle; letter-spacing: .3px;

    }




    .nav-dd{ position:relative; }

    .dd-caret{ font-size:11px !important; margin-left:3px; opacity:.85; transition:transform .18s; }

    .nav-dd:hover .dd-caret, .nav-dd.open .dd-caret{ transform:rotate(180deg); }

    .nav-dd-panel{ position:absolute; top:100%; right:0; margin-top:2px; padding:8px;

        background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 14px 38px rgba(0,0,0,.16);

        min-width:240px; opacity:0; visibility:hidden; transform:translateY(-8px);

        transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:1300; }

    .nav-dd:hover > .nav-dd-panel, .nav-dd.open > .nav-dd-panel{ opacity:1; visibility:visible; transform:translateY(0); }

    /* Весь список Базы знаний — 2 колонки, без категорий */

    .nav-dd-panel.list2{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; min-width:500px; max-width:calc(100vw - 24px); }

    .nav-dd-panel.list2 .dd-all{ grid-column:1 / -1; }

    /* выпадашка в середине ряда — центрируем под кнопкой */

    .nav-dd-panel.center{ left:50%; right:auto; transform:translateX(-50%) translateY(-8px); }

    .nav-dd:hover > .nav-dd-panel.center, .nav-dd.open > .nav-dd-panel.center{ transform:translateX(-50%) translateY(0); }

    .nav-dd-panel .dd-sep{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; padding:9px 12px 3px; }

    /* уплотнение: умещаем 11 значков в ряд */

    nav.desktop-nav ul{ gap:clamp(0px,0.1vw,2px) !important; }

    nav.desktop-nav ul > li > a{ min-width:clamp(36px,3.05vw,62px) !important; padding:clamp(4px,0.3vw,9px) clamp(3px,0.35vw,8px) !important; }

    nav.desktop-nav .nav-dd-panel a{ display:flex !important; flex-direction:row !important; align-items:center; gap:9px;

        padding:9px 12px !important; border-radius:8px; min-width:0 !important; text-align:left !important;

        color:var(--text); font-size:13.5px !important; font-weight:500; white-space:nowrap; }

    nav.desktop-nav .nav-dd-panel a span{ font-size:13.5px !important; }

    nav.desktop-nav .nav-dd-panel a[href^="/pages/knowledge-base/wear-calculator.php"]{
        line-height:1.2; }
    nav.desktop-nav .nav-dd-panel a[href^="/pages/knowledge-base/wear-calculator.php"] span{
        min-width:0; white-space:normal; }

    nav.desktop-nav .nav-dd-panel a:hover{ background:rgba(225,29,72,.08); color:#e11d48; }

    nav.desktop-nav .nav-dd-panel a i{ font-size:14px !important; color:#e11d48; width:18px; text-align:center; flex-shrink:0; }

    .nav-dd-panel .dd-all{ justify-content:center !important; font-weight:700 !important; color:#e11d48 !important; background:rgba(225,29,72,.06); margin-top:4px; }

    .nav-dd-panel .dd-all:hover{ background:rgba(225,29,72,.14) !important; }

    body.dark-theme .nav-dd-panel{ background:#1e293b; border-color:#334155; box-shadow:0 14px 38px rgba(0,0,0,.55); }

    body.dark-theme nav.desktop-nav .nav-dd-panel a{ color:#cbd5e1 !important; }

    body.dark-theme nav.desktop-nav .nav-dd-panel a:hover{ background:rgba(225,29,72,.18); color:#fb7185 !important; }

    body.dark-theme .nav-dd-panel .dd-all{ background:rgba(225,29,72,.14); color:#fb7185 !important; }

    @media (max-width:1000px){ .nav-dd-panel.list2{ grid-template-columns:1fr; min-width:240px; } }




    .mobile-nav{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; }

    .mnav-head{ display:flex; align-items:center; gap:10px; padding:14px 12px 12px; border-bottom:1px solid #e2e8f0; margin-bottom:6px; }

    body.dark-theme .mnav-head{ border-bottom-color:#334155; }

    .mnav-acct{ flex:1; display:flex; align-items:center; gap:11px; text-decoration:none; padding:11px 14px; border-radius:12px;

        background:linear-gradient(135deg,#059669,#10b981); color:#fff !important; box-shadow:0 2px 10px rgba(5,150,105,.3); }

    .mnav-acct.guest{ background:linear-gradient(135deg,#3b82f6,#6366f1); box-shadow:0 2px 10px rgba(59,130,246,.3); }

    .mnav-acct > i{ font-size:27px; color:#fff !important; flex-shrink:0; }

    .mnav-acct-txt{ display:flex; flex-direction:column; line-height:1.22; min-width:0; }

    .mnav-acct-txt b{ font-size:15px; font-weight:700; color:#fff; }

    .mnav-acct-txt small{ font-size:12px; opacity:.92; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .mobile-nav .mobile-nav-close{ position:static !important; flex-shrink:0; width:40px; height:40px; border-radius:10px;

        background:rgba(0,0,0,.05); border:none; color:#64748b; font-size:18px; cursor:pointer; }

    body.dark-theme .mobile-nav .mobile-nav-close{ background:rgba(255,255,255,.08); color:#cbd5e1; }

    /* аккордеон База знаний */

    .mnav-acc{ list-style:none; }

    .mnav-acc-t{ width:100%; display:flex; align-items:center; gap:18px; padding:16px 18px; background:#fff;

        border:1px solid #e2e8f0; border-radius:8px; font-size:18px; font-weight:500; color:var(--text); cursor:pointer; text-align:left; }

    body.dark-theme .mnav-acc-t{ background:#1e293b; border-color:#334155; color:#cbd5e1; }

    .mnav-acc-t > i:first-child{ width:28px; text-align:center; font-size:22px; color:#e11d48; }

    .mnav-acc-t .acc-count{ font-size:12px; opacity:.5; font-weight:700; }

    .mnav-acc-t .acc-car{ margin-left:auto; font-size:15px; opacity:.6; transition:transform .25s; }

    .mnav-acc.open .mnav-acc-t .acc-car{ transform:rotate(180deg); }

    .mnav-acc-body{ max-height:0; overflow:hidden; transition:max-height .32s ease; }

    .mnav-acc.open .mnav-acc-body{ max-height:1500px; }

    .mobile-nav .mnav-acc-body a{ display:flex !important; align-items:center; gap:13px; padding:13px 16px 13px 28px !important;

        text-decoration:none; color:var(--text); font-size:15px !important; border:none !important; background:transparent !important; border-radius:8px; }

    body.dark-theme .mobile-nav .mnav-acc-body a{ color:#cbd5e1; }

    .mobile-nav .mnav-acc-body a i{ width:22px; text-align:center; color:#e11d48; font-size:15px !important; }

    .mobile-nav .mnav-acc-body a:active{ background:rgba(225,29,72,.1) !important; }

    .mobile-nav .mnav-acc-body .mnav-acc-all{ font-weight:700; color:#e11d48; }

    /* PRO баннер */

    .mnav-pro{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px; padding:13px;

        background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff !important; border-radius:12px; text-decoration:none; font-weight:700; font-size:15px; }

    /* соцсети */

    .mnav-sec-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; padding:14px 18px 2px; }

    .mnav-social{ display:flex; justify-content:center; gap:14px; padding:10px 14px 6px; }

    .mnav-social a{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff !important; text-decoration:none; }

    .mnav-social .yt{ background:#ff0000; } .mnav-social .vk{ background:#0077ff; } .mnav-social .tg{ background:#29a9eb; } .mnav-social .dc{ background:#5865f2; }

    .mnav-social a:active{ transform:scale(.92); }