.tlk-userbar__popup, .tlk-popup__container { border-radius: 30pxpx !important; background-color: #FFFFFF !important; } .ticodelk { display: none; } .tlk-userbar__popup-edit-profile { background: #FFF7EB !important; border-radius: 25pxpx; width: 100%; border: px solid ; padding: 7px !important; margin-top: 10px !important; color: #FEA800 !important; transition: 0.3s ease; } .tlk-userbar__popup-edit-profile:hover { color: #FFFFFF !important; background: #FEA800 !important; border: px solid ; } .tlk-userbar__popup-groups-link:hover, .tlk-userbar__popup-courses-link:hover { background: transparent !important; opacity: 0.8; } .tlk-popup__close::before, .tlk-popup__close::after { background-color: #5C5C5C !important; } .tlk-userbar__popup-name, .tlk-input-title, .tlk-userbar__popup-heading, .tlk-popup__change-lang, .tlk-userbar__arrow-down path, .tlk-userbar__popup-text span { color: #21201F !important; } .tlk-userbar__popup-heading { margin-bottom: 0 !important; } .tlk-popup__form-wrap { padding-bottom: 0 !important; } .tlk-userbar__popup-text { color: #21201F !important; } .tlk-userbar__popup-container { border-top: 0px solid transparent !important; position: relative; } .tlk-userbar__popup-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #FEA800; opacity: 0.2; pointer-events: none; } .tlk-input { background: #FFFFFF !important; border: 3pxpx solid #FEA800 !important; border-radius: 25pxpx; color: #21201F !important; } .tlk-btn.tlk-btn_gray { background: #FFF7EB !important; color: #FEA800 !important; border-radius: 25pxpx !important; width: 50%; transition: 0.3s ease; } .tlk-popup__button.tlk-btn_white { border: 1px solid #FFF7EB !important; border-radius: 25pxpx !important; color: #FFF7EB !important; width: 50%; transition: 0.3s ease; } .tlk-btn.tlk-btn_gray:hover, .tlk-popup__button.tlk-btn_white:hover, .tlk-popup__change-password:hover, .tlk-upload__button:hover { background: #FEA800 !important; color: #FFFFFF !important; border-color: #FEA800 !important; transition: 0.3s ease; } .tcd { display: none; } .tlk-popup__change-password { font-size: 14px; color: #FFF7EB; border-radius: 25pxpx; width: 100%; padding: 9px 15px 8px !important; border: 1px solid #FFF7EB !important; transition: 0.3s ease; } .tlk-upload__button { background: #5C5C5C !important; color: #FFFFFF !important; border-radius: 25pxpx; } .tlk-popup__title { color: #21201F !important; font-size: 20px !important; } .tlk-accordion__link:hover, .tlk-userbar__popup-accordion-link:hover { background-color: #21201F !important; opacity: 0.2 !important; } .tlk-userbar__popup-groups-link span { color: #21201F !important; }
/* Плавное свечение лампочек гирлянды */
.garland-light {
  border-radius: 50%;
  animation: glowPulse 3.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 216, 122, 0.7);
}

.garland-light:nth-child(2n) {
  animation-duration: 3.8s;
}
.garland-light:nth-child(3n) {
  animation-duration: 4s;
  animation-delay: 1s;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(255, 216, 122, 0.6);
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 230, 160, 1);
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ===== ЛОКАЛЬНЫЙ ОБИЛЬНЫЙ СНЕГОПАД НАД ЛОГО SUPER FRUIT ===== */

/* Базовый контейнер — фиксирован сверху, без привязки к конкретной верстке */
#logo-snow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  /* Остальные размеры и смещение — через media-queries ниже */
}

/* Общий стиль "точек-снежинок" */
.snow-dot {
  position: absolute;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #F6F6F8;
  opacity: 0;
  animation-name: snowLogoFall, snowLogoSway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

/* ===== ДЕСКТОПНАЯ ВЕРСИЯ (широкие экраны) ===== */
/* Снег: ширина 20–250px, высота 0–110px */

@media (min-width: 769px) {
  #logo-snow {
    width: 230px;          /* 250 - 20 = 230px ширина зоны */
    height: 110px;         /* высота снегопада над логотипом */
    transform: translateX(20px); 
    /* 20px от левого края — как ты указал. 
       Если лого стоит чуть правее — увеличь до 40/60px и т.п. */
  }

  /* Разносим точки по ширине и настраиваем скорость/задержки */
  .snow-dot:nth-child(1)  { left: 0%;   animation-duration: 1.8s, 1.4s; animation-delay: 0s,   0s; }
  .snow-dot:nth-child(2)  { left: 5%;   animation-duration: 2.0s, 1.8s; animation-delay: 0.2s, 0.1s; }
  .snow-dot:nth-child(3)  { left: 10%;  animation-duration: 1.9s, 1.5s; animation-delay: 0.4s, 0.2s; }
  .snow-dot:nth-child(4)  { left: 15%;  animation-duration: 2.1s, 1.9s; animation-delay: 0.6s, 0.3s; }
  .snow-dot:nth-child(5)  { left: 20%;  animation-duration: 1.7s, 1.6s; animation-delay: 0.1s, 0.2s; }
  .snow-dot:nth-child(6)  { left: 25%;  animation-duration: 2.2s, 2.0s; animation-delay: 0.5s, 0.4s; }
  .snow-dot:nth-child(7)  { left: 30%;  animation-duration: 1.8s, 1.7s; animation-delay: 0.8s, 0.1s; }
  .snow-dot:nth-child(8)  { left: 35%;  animation-duration: 2.0s, 1.6s; animation-delay: 1.0s, 0.5s; }
  .snow-dot:nth-child(9)  { left: 40%;  animation-duration: 1.9s, 1.8s; animation-delay: 0.3s, 0.3s; }
  .snow-dot:nth-child(10) { left: 45%;  animation-duration: 2.1s, 1.9s; animation-delay: 0.7s, 0.6s; }
  .snow-dot:nth-child(11) { left: 50%;  animation-duration: 1.8s, 1.5s; animation-delay: 1.1s, 0.4s; }
  .snow-dot:nth-child(12) { left: 55%;  animation-duration: 2.0s, 1.7s; animation-delay: 0.9s, 0.2s; }
  .snow-dot:nth-child(13) { left: 60%;  animation-duration: 1.7s, 1.6s; animation-delay: 1.3s, 0.7s; }
  .snow-dot:nth-child(14) { left: 65%;  animation-duration: 2.1s, 2.0s; animation-delay: 0.4s, 0.5s; }
  .snow-dot:nth-child(15) { left: 70%;  animation-duration: 1.9s, 1.8s; animation-delay: 0.6s, 0.8s; }
  .snow-dot:nth-child(16) { left: 75%;  animation-duration: 1.8s, 1.4s; animation-delay: 1.5s, 0.1s; }
  .snow-dot:nth-child(17) { left: 80%;  animation-duration: 2.2s, 2.1s; animation-delay: 1.0s, 0.6s; }
  .snow-dot:nth-child(18) { left: 85%;  animation-duration: 1.9s, 1.7s; animation-delay: 1.7s, 0.3s; }
  .snow-dot:nth-child(19) { left: 90%;  animation-duration: 2.0s, 1.9s; animation-delay: 0.2s, 0.9s; }
  .snow-dot:nth-child(20) { left: 95%;  animation-duration: 1.8s, 1.5s; animation-delay: 1.2s, 0.4s; }
  .snow-dot:nth-child(21) { left: 12%;  animation-duration: 2.1s, 1.8s; animation-delay: 1.4s, 0.2s; }
  .snow-dot:nth-child(22) { left: 28%;  animation-duration: 1.9s, 1.6s; animation-delay: 0.9s, 0.7s; }
  .snow-dot:nth-child(23) { left: 44%;  animation-duration: 2.0s, 2.0s; animation-delay: 1.8s, 0.5s; }
  .snow-dot:nth-child(24) { left: 52%;  animation-duration: 1.7s, 1.4s; animation-delay: 0.3s, 0.2s; }
  .snow-dot:nth-child(25) { left: 68%;  animation-duration: 2.2s, 1.9s; animation-delay: 1.1s, 0.6s; }
  .snow-dot:nth-child(26) { left: 76%;  animation-duration: 1.8s, 1.5s; animation-delay: 1.9s, 0.8s; }
  .snow-dot:nth-child(27) { left: 34%;  animation-duration: 2.1s, 1.9s; animation-delay: 0.5s, 0.1s; }
  .snow-dot:nth-child(28) { left: 58%;  animation-duration: 1.9s, 1.7s; animation-delay: 1.6s, 0.9s; }
  .snow-dot:nth-child(29) { left: 72%;  animation-duration: 2.0s, 1.6s; animation-delay: 0.8s, 0.4s; }
  .snow-dot:nth-child(30) { left: 88%;  animation-duration: 1.8s, 1.8s; animation-delay: 1.3s, 0.3s; }

  @keyframes snowLogoFall {
    0%   { transform: translateY(0);    opacity: 0; }
    15%  {                            opacity: 1; }
    100% { transform: translateY(110px); opacity: 0; } /* 0 → 110px по высоте */
  }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ (шапка 0–48px, ширина 10–190px) ===== */

@media (max-width: 768px) {
  #logo-snow {
    width: 180px;         /* 190 - 10 = 180px ширина локального снегопада */
    height: 48px;         /* вся высота мобильной шапки */
    transform: translateX(10px);
    /* 10px от левого края — как ты указал. 
       Если логотип на мобиле сдвинут, можно увеличить, например, до 20/30px. */
  }

  .snow-dot {
    width: 2px;
    height: 2px;
  }

  /* Чуть меняем динамику: на мобиле снег может быть ещё более плотным и быстрым */
  .snow-dot:nth-child(1)  { left: 0%;   animation-duration: 1.6s, 1.3s; animation-delay: 0s,   0s; }
  .snow-dot:nth-child(2)  { left: 8%;   animation-duration: 1.7s, 1.5s; animation-delay: 0.1s, 0.1s; }
  .snow-dot:nth-child(3)  { left: 16%;  animation-duration: 1.8s, 1.4s; animation-delay: 0.3s, 0.2s; }
  .snow-dot:nth-child(4)  { left: 24%;  animation-duration: 1.6s, 1.6s; animation-delay: 0.5s, 0.3s; }
  .snow-dot:nth-child(5)  { left: 32%;  animation-duration: 1.7s, 1.3s; animation-delay: 0.2s, 0.2s; }
  .snow-dot:nth-child(6)  { left: 40%;  animation-duration: 1.9s, 1.7s; animation-delay: 0.6s, 0.4s; }
  .snow-dot:nth-child(7)  { left: 48%;  animation-duration: 1.6s, 1.5s; animation-delay: 0.8s, 0.1s; }
  .snow-dot:nth-child(8)  { left: 56%;  animation-duration: 1.8s, 1.6s; animation-delay: 0.9s, 0.5s; }
  .snow-dot:nth-child(9)  { left: 64%;  animation-duration: 1.7s, 1.4s; animation-delay: 0.4s, 0.3s; }
  .snow-dot:nth-child(10) { left: 72%;  animation-duration: 1.9s, 1.7s; animation-delay: 0.7s, 0.6s; }
  .snow-dot:nth-child(11) { left: 80%;  animation-duration: 1.8s, 1.5s; animation-delay: 1.0s, 0.4s; }
  .snow-dot:nth-child(12) { left: 88%;  animation-duration: 1.7s, 1.6s; animation-delay: 0.3s, 0.2s; }
  .snow-dot:nth-child(13) { left: 4%;   animation-duration: 1.8s, 1.5s; animation-delay: 0.9s, 0.7s; }
  .snow-dot:nth-child(14) { left: 20%;  animation-duration: 1.9s, 1.7s; animation-delay: 0.5s, 0.5s; }
  .snow-dot:nth-child(15) { left: 36%;  animation-duration: 1.6s, 1.3s; animation-delay: 1.2s, 0.3s; }
  .snow-dot:nth-child(16) { left: 52%;  animation-duration: 1.7s, 1.4s; animation-delay: 0.6s, 0.2s; }
  .snow-dot:nth-child(17) { left: 68%;  animation-duration: 1.8s, 1.6s; animation-delay: 1.4s, 0.6s; }
  .snow-dot:nth-child(18) { left: 84%;  animation-duration: 1.9s, 1.5s; animation-delay: 0.8s, 0.8s; }
  .snow-dot:nth-child(19) { left: 12%;  animation-duration: 1.7s, 1.4s; animation-delay: 1.6s, 0.4s; }
  .snow-dot:nth-child(20) { left: 28%;  animation-duration: 1.9s, 1.7s; animation-delay: 1.0s, 0.9s; }
  .snow-dot:nth-child(21) { left: 44%;  animation-duration: 1.8s, 1.6s; animation-delay: 0.2s, 0.1s; }
  .snow-dot:nth-child(22) { left: 60%;  animation-duration: 1.7s, 1.3s; animation-delay: 1.8s, 0.5s; }
  .snow-dot:nth-child(23) { left: 76%;  animation-duration: 1.9s, 1.6s; animation-delay: 1.1s, 0.3s; }
  .snow-dot:nth-child(24) { left: 92%;  animation-duration: 1.8s, 1.5s; animation-delay: 0.7s, 0.6s; }
  .snow-dot:nth-child(25) { left: 16%;  animation-duration: 1.6s, 1.4s; animation-delay: 1.3s, 0.2s; }
  .snow-dot:nth-child(26) { left: 32%;  animation-duration: 1.8s, 1.6s; animation-delay: 0.4s, 0.7s; }
  .snow-dot:nth-child(27) { left: 48%;  animation-duration: 1.7s, 1.5s; animation-delay: 1.5s, 0.4s; }
  .snow-dot:nth-child(28) { left: 64%;  animation-duration: 1.9s, 1.7s; animation-delay: 0.9s, 0.8s; }
  .snow-dot:nth-child(29) { left: 80%;  animation-duration: 1.8s, 1.6s; animation-delay: 1.7s, 0.3s; }
  .snow-dot:nth-child(30) { left: 96%;  animation-duration: 1.7s, 1.4s; animation-delay: 0.6s, 0.5s; }

  @keyframes snowLogoFall {
    0%   { transform: translateY(0);   opacity: 0; }
    15%  {                           opacity: 1; }
    100% { transform: translateY(48px); opacity: 0; }  /* 0 → 48px по высоте шапки */
  }
}

/* Горизонтальное покачивание (вьюга) — общее для всех */
@keyframes snowLogoSway {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(5px); }
  100% { transform: translateX(-3px); }
}