body.openSidebar .sidebar-wrap { transform: none; }
.sidebar-inner { display: flex; flex-direction: column; }
.sidebar-header { display: flex; align-items: center; padding: 18px 18px 12px 18px; }
.sidebar-avatar { width: 42px; height: 42px; border-radius: 100%; background: #f2f3f7; margin-right: 12px; overflow: hidden; }
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-username { font-weight: 600; font-size: 17px; }
.sidebar-userstatus { font-size: 14px; color: #878; }
.sidebar-close { background: none; border: none; font-size: 32px; margin-left: auto; color: #bbb; cursor: pointer; }
.sidebar-menu { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; margin: 8px 0 0 0; }
.sidebar-menu a { display: flex; align-items: center; padding: 13px 22px; font-size: 16px; color: #273145; text-decoration: none; }
.sidebar-menu a:hover { background: #f2f3f5; }
.sidebar-guest { margin: 20px 0; text-align: center; }
.sidebar-btn { display: block; margin: 8px 0; padding: 10px; border-radius: 8px; background: #4680eb; color: #fff; text-decoration: none; }
.sidebar-bottom { padding: 13px 0 16px 0; border-top: 1px solid #f2f3f6; }
.sidebar-bottom a { display: block; padding: 12px 22px; color: #8a9ab7; text-decoration: none; font-size: 15px; }


/* Логотип начало */
.sidebar-logo {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 46px;
  box-shadow: 2px 0 3px rgba(0,0,0,.1);
}
.sidebar-logo img {
  width: 32px;
  height: 32px;
  background: #435f8b;
  border-radius: 50%;
  border: 2px solid #fff;
}
.sidebar-logo span {
  margin-left: 8px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
}
.sidebar-logo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*max-width: 320px;*/
  margin: 0 auto;
  background: transparent;
}

@media (max-width: 881px) {
    .sidebar-logo-inner {
        background: #fff;
    }
    .sidebar-logo span {
        color: #435f8b;
    }
    .sidebar-logo {
        height: 48px;
        border: 0;
    }
}    

.sidebar-logo a {
  background: transparent;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
  justify-content: center;
  height: 48px;
  will-change: transform,box-shadow;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  width: 100%;
  padding: 0;
}
.sidebar-close {
  border: none;
  color: #000;
  cursor: pointer;
  padding: 0 6px;
  transition: background 0.14s;
  width: 50px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar-logo a:hover, .sidebar-close:hover {
  background: rgba(131,102,86,0.12);
}
.sidebar-logo a:active, .sidebar-close:active {
  background: rgba(131,102,86,0.12);
  box-shadow: 0 4px 10px rgba(0,0,0,.08) inset;
}

/* Логотип конец */


/* Мобильные стили (для устройств <= 881px) */
@media (max-width: 881px) {
  body.openSidebar #sidebar_wrap.tw1ngo_novaya {
    background: rgba(255,255,255);
    width: 320px;
    clip: inherit;
    contain: layout;
    overflow: visible;

  }




}

/* Десктопные стили (для устройств >= 882px) */
@media (min-width: 882px) {
  .sidebar-close {
     display: none !important;
  }
  body.tw1ngo_staraya, .tw1ngo_staraya {
    display: block !important;
  }
}


.fi_ic {
  display: inline-block;
}
.l-sidebar_link.fi_ic, .l-sidebar_link > .fi_ic {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  flex: 0 0 24px;
}
.l-sidebar .fi_ic {
  margin-right: 0;
}
.l-sidebar_lst.__flat .fi_ic {
  margin-left: 12px;
  transition: transform .15s;
  transition: transform .15s,-webkit-transform .15s;
}
.l-sidebar_link.fi svg {
  margin-left: 0;
}
.l-sidebar_lst.__secondary::after {
  content: '';
  display: block;
  height: 1px;
  width: auto;
  background-color: rgba(131,102,86,0.12);
  margin: 0 16px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
.l-sidebar_lst.__main .gbbl, .l-sidebar_lst.__main .gbbl.__pointer {
  top: 4px;
  left: auto;
  right: 4px;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-transform: translate(30%,-30%);
  transform: translate(30%,-30%);
  z-index: 1;
}
.l-sidebar_lst.__flat .l-sidebar_i:hover .fi_ic, .l-sidebar_lst.__flat .l-sidebar_i:active .fi_ice {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


@-moz-keyframes logoRotate{
  0%{transform:rotateY(0) scale(.55)}
  16%{transform:rotateY(360deg) scale(.9)}
  32%{transform:rotateY(540deg) scale(1.1)}
  48%{transform:rotateY(720deg) scale(1.2)}
  64%{transform:rotateY(900deg) scale(1.2)}
  82%{transform:rotateY(1080deg) scale(1.1)}
  100%{transform:rotateY(1260deg) scale(1)}
}
@-webkit-keyframes logoRotate{
  0%{-webkit-transform:rotateY(0) scale(.55);transform:rotateY(0) scale(.55)}
  16%{-webkit-transform:rotateY(360deg) scale(.9);transform:rotateY(360deg) scale(.9)}
  32%{-webkit-transform:rotateY(540deg) scale(1.1);transform:rotateY(540deg) scale(1.1)}
  48%{-webkit-transform:rotateY(720deg) scale(1.2);transform:rotateY(720deg) scale(1.2)}
  64%{-webkit-transform:rotateY(900deg) scale(1.2);transform:rotateY(900deg) scale(1.2)}
  82%{-webkit-transform:rotateY(1080deg) scale(1.1);transform:rotateY(1080deg) scale(1.1)}
  100%{-webkit-transform:rotateY(1260deg) scale(1);transform:rotateY(1260deg) scale(1)}
}

.Banner__host {
  background-color: var(--vkui--color_background_secondary);
  border-radius: var(--vkui--size_border_radius--regular);
  color: var(--vkui--color_text_primary);
  isolation: isolate;
  padding: var(--vkui_internal--banner-padding);
  --vkui_internal--banner-padding: 12px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  flex-flow: row;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden;
}
.Banner__content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
















/* --- БАЗОВЫЕ СТИЛИ (Общие для всех) --- */
#sidebar_wrap {
  width: 272px;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  contain: layout;
  /* Плавность прописана ТУТ, чтобы она работала и при открытии, и при закрытии */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* --- ДЕКСТОП (> 882px): Панель стоит статично --- */
@media (min-width: 882px) {
  #sidebar_wrap {
    position: relative;
    float: left;
    margin-right: 4px;
    transform: none !important;
    visibility: visible !important;
    clip: auto !important;
    overflow: visible;
    transition: none !important;
  }
  #sidebarOverlay { display: none !important; }
}

/* --- МОБАЙЛ (< 881px): Панель превращается в шторку --- */
@media (max-width: 881px) {
  #sidebar_wrap {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(-100%, 0, 0); /* Спрятан слева */
    visibility: hidden;
    overflow: hidden;
  }

  /* Состояние ОТКРЫТО */
  body.openSidebar #sidebar_wrap {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15);
  }

  /* Белый стиль */
  #sidebar_wrap.tw1ngo_novaya {
    background: #fff;
  }
}


        /* Стили текста с переливом */
        .redesign_2o25 { 
            display: inline-flex; 
            position: relative; 
            align-items: center; 
            margin-left: 6px; 
            z-index: 2; 
            
            /* Шрифт под логотип */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-weight: 900;
            font-size: 20px;
            letter-spacing: -0.8px;
            text-transform: lowercase;

            /* ТВОЙ ГРАДИЕНТ */
            background: linear-gradient(to right, #435f8b, #64b3c4, #435e8a);
            background-size: 200% auto;
            
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            
            /* Анимация перелива */
            animation: flowShine 4s ease-in-out infinite;
        }

        @keyframes flowShine {
            0% { background-position: 0% center; }
            50% { background-position: 100% center; }
            100% { background-position: 0% center; }
        }

        .sidebar-logo-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-love-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .valentine-float {
            animation: floatAnim 3s infinite ease-in-out;
        }

        .mini-heart {
            position: absolute;
            color: #ff2d55;
            font-size: 8px;
            opacity: 0;
            user-select: none;
            pointer-events: none;
            z-index: 1;
            /* Чтобы градиент текста не скрывал сердца */
            -webkit-text-fill-color: #ff2d55;
        }

        /* Анимации сердец */
        .p1 { left: -10px; top: 20%; animation: heartFadeUp 3.5s infinite 0.2s; --drift: -12px; }
        .p2 { bottom: -5px; left: 10%; animation: heartFadeUp 3s infinite 1.2s; --drift: -5px; }
        .p3 { top: -8px; left: 40%; animation: heartFadeUp 4s infinite 0.6s; --drift: 8px; }
        .p4 { top: -10px; left: 40%; animation: heartFadeUp 3.2s infinite 1.9s; --drift: 3px; }
        .p5 { right: -12px; top: 30%; animation: heartFadeUp 3.8s infinite 0.4s; --drift: 15px; }
        .p6 { bottom: -8px; right: 10%; animation: heartFadeUp 3.4s infinite 2.1s; --drift: -5px; }

        @keyframes floatAnim {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        @keyframes heartFadeUp {
            0% { transform: translateY(0) scale(0.5); opacity: 0; }
            30% { opacity: 0.25; }
            100% { transform: translateY(-28px) translateX(var(--drift)) scale(1.3) rotate(20deg); opacity: 0; }
        }




/* =========================================
   1. БЛОКИРОВКА ЭКРАНА (Отвечает за плавность на телефоне)
   ========================================= */
body.locked {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.openSidebar {
  overflow: hidden; /* Доп. страховка для скрытия скролла сайта */
}

/* =========================================
   2. ТЕМНЫЙ ФОН С РАЗМЫТИЕМ (Оверлей)
   ========================================= */
#sidebarOverlay {
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  height: 120vh; /* Берем с запасом для мобильных браузеров */
  z-index: 1234;
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s linear, visibility 0.25s linear;
}

/* Когда меню открыто - показываем оверлей */
body.openSidebar #sidebarOverlay {
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}

/* =========================================
   3. БОКОВАЯ ПАНЕЛЬ (Основа)
   ========================================= */
#sidebar_wrap {
  width: 272px;
  height: 100%;
  will-change: transform; /* Подсказка для телефона задействовать GPU */
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* =========================================
   4. МОБИЛЬНАЯ ВЕРСИЯ (Адаптив до 881px)
   ========================================= */
@media (max-width: 881px) {
  
  /* Закрытое состояние: прячем шторку за левый край экрана */
  #sidebar_wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1235; /* Важно: Шторка должна быть ВЫШЕ оверлея (1234) */
    transform: translate3d(-100%, 0, 0); /* 3D-ускорение для идеальной плавности */
    visibility: hidden;
    background: #fff;
  }
  
  /* Открытое состояние: выдвигаем шторку на экран */
  body.openSidebar #sidebar_wrap {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    box-shadow: 5px 0 25px rgba(0,0,0,0.15); /* Красивая тень */
  }

  /* Твой специфичный класс для новой панели */
  #sidebar_wrap.tw1ngo_novaya {
    width: 320px;
  }

  /* Внутренний скролл для содержимого меню (мастхэв для iOS) */
  #left_nav1 {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
    padding-left: env(safe-area-inset-left);
  }
}












/* --- 1. Полоска загрузки (Лоадер) сверху --- */
#pjax-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px; /* Толщина полоски */
    background: #2a5885; /* Твой фирменный синий цвет */
    z-index: 9999;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s, opacity 0.3s;
}

/* Состояние: Грузим (полоска медленно ползет до 70%) */
#pjax-loader.loading {
    width: 70%;
    opacity: 1;
    transition: width 2s cubic-bezier(0, 0, 0.2, 1);
}

/* Состояние: Готово (полоска долетает до 100% и исчезает) */
#pjax-loader.done {
    width: 100%;
    opacity: 0;
    transition: width 0.3s, opacity 0.3s 0.3s;
}

/* --- 2. Защита от прыжков контента --- */
#pjax-container {
    /* Минимальная высота: высота экрана минус высота шапки и нижнего бара (примерно 120px) */
    min-height: calc(100vh - 120px); 
    transition: opacity 0.2s ease; /* Плавное затухание при загрузке */
}

/* Когда страница грузится, мы чуть-чуть делаем старый контент прозрачным */
#pjax-container.fading {
    opacity: 0.5; 
}