<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
    --bg-color: #fff;
    --text-color: #000;
    --hint-color: #707070;
    --link-color: #5181b8;
    --button-color: #0088cc;
    --button-text-color: #ffffff;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  } 

  body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .logo-container {
   background-color: #fff;
   width: 100%; 
   
    display: flex;
    justify-content: center;
    align-items: center; /* Добавляем для вертикального центрирования */
    padding: 5px;
    box-sizing: border-box;
  }
  
  .logo-container img {
    display: block;
    max-width: 80%;
    height: auto;
    margin: 0 auto; /* Добавляем для дополнительной поддержки центрирования */
  }
  

  /* 1. Новое правило – делает логотип «липким» для других страниц */
  .logo-fixed {
  position: fixed;   /* «приклеено» к окну */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;     /* поверх всего контента */
  }

  /* 2. Чтобы страница не уехала под логотип */
  body.has-fixed-logo {
  padding-top: 60px; /* = реальная высота .logo-container */
  }




  
  #interface {
    flex: 1;
    /* position: relative; */
    /* overflow-y: auto;
    padding: 00px;
    background: var(--bg-color); */
  }
  
  h2 {
    color: var(--text-color);
  }
  
  #playlist {
    list-style-type: none;
    padding: 0;
  }
  
  #playlist li {
    padding: 10px;
    border-bottom: 1px solid var(--hint-color);
  }
  
  #playlist a {
    text-decoration: none;
    color: var(--link-color);
    font-size: 18px;
  }
  
  #playlist a:hover {
    text-decoration: underline;
  }
  
  button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 12px;
    background-color: var(--button-color);
    color: var(--button-text-color);
    border: none;
    cursor: pointer;
    margin-top: 20px;
  }
  
  button:hover {
    opacity: 0.8;
  }

  .scroll-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 12px; /* расстояние между элементами */
    box-sizing: border-box;
    margin-top: 15px;
  }
  
  .menu-item {
    flex: 0 0 auto;
    background-color: var(--button-color, #0088cc);
    color: var(--button-text-color, #fff);
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }
  
  .menu-item:hover {
    opacity: 0.8;
  }

  





  /* .section-title {
    text-align: left;
    padding: 10px 15px;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: var(--hint-color, #707070);
  } */



  .title-with-lines {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    margin: 15px 0;
  }
  
  .line {
    flex: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .section-title {
    margin: 0;
    white-space: nowrap;
  }




  
  .trend-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 15px;
    box-sizing: border-box;
  }
  
  .trend-item {
    flex: 0 0 calc(40% - 5px); /* влезает 2.5 квадрата */
    aspect-ratio: 2/1; /* соотношение сторон */
    background-color: rgba(255,255,255,0.08); /* заливка светлее общего фона */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-color, #ffffff);
    font-size: 14px;
    padding: 5px;
    box-sizing: border-box;
    text-decoration: none; 
  }
  
  .trend-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 6px;
  }
  
  .trend-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }



  /* Скрываем полосу прокрутки в меню */
.trend-container::-webkit-scrollbar {
    display: none;
  }
  
  .trend-container {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
  }


/* стили нижнего меню */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.2);
    box-sizing: border-box;
    z-index: 100;
    /*height: 60px; *//* Фиксированная высота */
      /* было 60 px → делаем чуть выше и прибавляем safe-area */
  height: calc(70px + env(safe-area-inset-bottom,0));
  }
  
  .nav-item {
    flex: 1;
    color: var(--hint-color, #bbb);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
  }
  
  .nav-item img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    object-fit: contain; /* Гарантируем сохранение пропорций */
  }
  
  .nav-item.active {
    color: var(--link-color, #5181b8);
  }
  
  .nav-item.active img {
    filter: brightness(0) saturate(100%) invert(43%) sepia(44%) saturate(542%) hue-rotate(172deg) brightness(96%) contrast(89%);
  }

  /* плавное исчезновение */
  .fade-out {
    transition: opacity 0.5s ease; /* 0.5s — полсекунды, можно менять */
    opacity: 0; /* Прозрачность (0 = полностью невидимо) */
  }

  .collapsible {
    overflow: hidden;              /* Чтобы содержимое не вылезало */
    transition: height 0.5s ease;  /* Анимируем height за 0.5 секунды */
  }

  .hidden {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* стили для выподающего меню */
  /* Контейнер для переключателя  */
  .deal-switcher-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 12px 15px;
    position: relative;
    font-family: Arial, sans-serif;
    color: var(--text-color);
    margin-top: 10px;
    box-sizing: border-box;
  }
  
  /* исправляем выравнивание элементов */
  .deal-placeholder-text, .deal-dropdown-toggle {
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  
  .deal-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none;
    color: var(--link-color, #5181b8) !important;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  

/* Выпадающее меню */
.deal-dropdown-menu {
  display: none; /* скрыто по умолчанию */
  position: absolute;
  right: 15px;
  top: 45px;
  background-color: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 200;
  min-width: 150px;
  box-sizing: border-box;
}

/* Элементы меню */
.deal-dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-color);
  white-space: nowrap;
}

/* Элемент меню при наведении */
.deal-dropdown-item:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Активный элемент меню */
.deal-dropdown-item.active {
  color: var(--link-color);
}


/* .playList-scrolling {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 70px;
  border: 2px dashed red;
  max-height: calc(100vh - 200px - 60px); 
  overflow-y: auto;
}
 */

/* прокрутка для плэйлиста */
.playList-scrolling22222 {
  /* flex: 1; */
  /* overflow-y: auto; */
  max-height: 28vh;    /* 40% высоты экрана */
  overflow-y: auto;    /* собственная прокрутка при переполнении */
  padding-bottom: 40px; /* чуть больше, чем высота меню */
  bottom: 35px; 
  border: 2px dashed red;
  /* убираем max-height или любые другие жёсткие размеры! */
}

.playList-scrolling {
  /* базовый фон такой же, как у всего приложения */
  background-color: var(--bg-color);
  /* слегка высветляем через полупрозрачную «тень» внутри */
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05);

  /* скруглённые углы, отступы, скролл */
  border-radius: 8px;
  margin: 0 10px;
  padding: 12px;
  max-height: 26vh;
  overflow-y: auto;

}


.shadow {
  display: none;
}

 /* НАЖАТАЯ КНОПКА */
.trend-item {
  /* Исходное оформление кнопок меню */
  background-color: rgba(255,255,255,0.08); 
  transition: background-color 0.3s;
}

/* Во время загрузки (кликнули, но fetch не завершился) */
.trend-item.loading {
  background-color: rgb(174, 174, 174); /* любой цвет, показывающий "загружается" */
}

/* После загрузки (кнопка активна и выделена) */
.trend-item.active {
  background-color: rgba(174, 174, 174, 0.344) /* более светлый фон  rgba(174, 174, 174, 0.344)*/
}


/* Чтобы показывать «замочек» поверх картинки */
.trend-item.locked {
  position: relative;   /* Чтобы псевдоэлемент позиционировался внутри. Важно: нужно, чтобы ::after позиционировался относительно родителя */
 /* pointer-events: none; /* Запрет кликов */
  opacity: 0.6;         /* Чуть затемняем */
}

/* Псевдоэлемент с иконкой замка */
.trend-item.locked::after {
  content: "🔒";
  position: absolute;
  font-size: 16px;     /* Сделали значок поменьше */
  color: red;
  top: 6px;            /* Отступ от верхнего края */
  right: 6px;          /* Отступ от правого края */
}

.text-track-list {
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.825) !important;
}

/* Активный трек: жирный шрифт и анимация */
.text-track-list-active {
  text-decoration: none !important;
  font-weight: bold; /* Жирный шрифт */
  color: rgba(255, 255, 255, 0.9); /* Цвет текста */
  animation: trackHighlight 0.3s ease-in-out; /* Анимация */
}

/* Анимация подсветки */
@keyframes trackHighlight {
  0% {
    transform: scale(1);
    color: rgba(255, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.1);
    color: rgba(255, 255, 255, 1);
  }
  100% {
    transform: scale(1);
  }
}


/* =========  Фиксируем тёмную палитру  ========== */
:root{
  /* базовый фон страницы */
  --bg-color: #212d3b /* #121212 */!important;

  /* основной текст */
  --text-color: #E0E0E0 !important;

  /* приглушённые подписи */
  --hint-color: #8A8A8A !important;

  /* ссылки / активные элементы */
  --link-color: #42A5F5 !important;

  /* фон кнопок и «плиток» меню */
  --button-color: #1E1E1E !important;

  /* текст на кнопках */
  --button-text-color: #FFFFFF !important;
}

/* Чуть-чуть светлее фона для блоков-подложек */
.logo-container,
/*.deal-switcher-container,*/
.playList-scrolling{
  background-color: #2c3846 /*#1E1E1E*/ !important;
}

/* Если нужен совсем чёрный низ */
.bottom-nav{background-color:#000 !important;}

/* ===== Белый фон только у верхней шапки с логотипом ===== */
.logo-container{
  background-color:#FFFFFF !important;   /* чистый белый */
}

/* КНОПКИ ПРИ НАЖАТИИ делаем плитку чуть светлее, пока палец держит кнопку */
.trend-item:active {
  background-color: rgba(255, 255, 255, 0.451); /* чуток светлее, чем 0.08 */
}

/* ========  текст об активации когда висят замочки ======== */
/* Скрывает элемент по умолчанию */
.shadow-text-access {
  display: none;
}


/* ❶ Задаём переменные высот */
:root{
  --header-h: 0px;   /* по умолчанию верхняя шапка не фиксирована */
  --footer-h: 60px;  /* высота нижнего меню .bottom-nav (у вас 60px) */
}
/* когда логотип «липкий» — уже есть класс .has-fixed-logo */
body.has-fixed-logo{
  --header-h: 80px;  /* фактическая высота .logo-container */
}

/* ❷ Обновлённый скелетон */
.skeleton{
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  background: var(--bg-color);      /* тот же фон, что и у страницы */
  overflow: hidden;                 /* чтобы анимация не вылезала */
}

/* сам «бегущий блик» */
.skeleton::before{
  content: '';
  position: absolute;
  inset: 0;                         /* top/right/bottom/left: 0 */
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.06) 25%,
      rgba(255,255,255,.12) 37%,
      rgba(255,255,255,.06) 63%,
      transparent 100%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer{
  0%   {background-position: -450px 0;}
  100% {background-position:  450px 0;}
}


#content{
  flex: 1 1 auto;   /* ← тянемся во всё свободное место колонку body */
  display: flex;    /* чтобы skeleton внутри мог центрироваться, если нужно */
}


/* ТЕКСТ ПОД ШАПКОЙ*/
/* --- Шапка с крошечным текстом --- */
.tiny-header{
  background:transparent;       /* прозрачный фон */
  padding:6px 8px;             /* лёгкие внутренние отступы */
  box-sizing:border-box;
  text-align:left;             /* выравнивание по левому краю */
}

/* каждая строчка */
.tiny-line{
  margin:0;                    /* убираем внешние отступы */
  font-size:0.62rem;           /* ≈10 px: очень мелко */
  line-height:1.25;            /* плотнее вертикально */
  color:#ffffff;               /* белый текст (замени при нужде) */
}

/* ссылка на бота */
.tiny-link{
  color: #807be8;               /* цвет ссылки #00C8FF*/
  text-decoration:none;        /* без подчёркивания */
}

.tiny-link:hover{
  color:#7ADBFF;               /* лёгкое подсветка при наведении */
}


/* Центрируем только заголовок */
.welcome-title{
  /*font-family: 'Lobster', cursive;*/
  text-align:center;    /*    горизонтальный центр */
  margin:0;            /* убираем стандартные отступы h2 */
  margin-bottom: 5px;
  width:100%;  /*   на всю строку, чтобы точно по центру */
}





/* убираем заголовок при клике на каталог */
.title-with-lines{                /* сам заголовок каталога */
  transition: height .35s ease, opacity .35s ease;
}
.title-hidden{                    /* будет добавляться/сниматься JS-ом */
  height:0;           /* плавно схлопываемся */
  opacity:0;
  overflow:hidden;
  
  height:0;
  opacity:0;
  overflow:hidden;

  /* ⬇️ убираем зазор */
  margin:0 !important;
  padding:0 !important;
}




/*  КРУГЛЫЕ ЗНАЧКИ на втором курсе  */
/* ---------- Курс prog0 и prog2: прямоугольники прежнего размера ---------- */
.catalog[data-prog="prog0"] .trend-item,
.catalog[data-prog="prog2"] .trend-item{
  flex: 0 0 calc(40% - 5px);  /* ширина как в третьем курсе */
  aspect-ratio: 2 / 1;        /* соотношение 2 : 1  */
  border-radius: 12px;
  overflow: visible;          /* даём картинке «вылезать» */
  padding: 5px;
}

/* ---------- Курс prog1: полностью круглые кнопки ---------- */
.catalog[data-prog="prog1"] .trend-item{
  flex: 0 0 auto;             /* фиксируем диаметр, а не % ширину */
  width: 84px;                /* диаметр круга */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  padding: 6px;
}

/* ---------- Крупные «наклейки» в prog0 и prog1 ---------- */
.catalog[data-prog="prog0"] .trend-item img,
.catalog[data-prog="prog1"] .trend-item img{
  width: 72px;
  height: 72px;
  transform: translateY(-18px);   /* выступают над кнопкой */
}

.catalog[data-prog="prog0"] .trend-label,
.catalog[data-prog="prog1"] .trend-label{
  margin-top: -6px;               /* сдвигаем подписи вниз */
}

/* ---------- Отступы контейнера кружков второго курса ---------- */
.catalog[data-prog="prog1"] .trend-container{
  padding: 0 20px;            /* те же 20 px, что у «засечек» заголовка */
  justify-content: space-between; /* крайние кружки упираются в эти 20 px */
  gap: 0;
  overflow-x: hidden;         /* без горизонтального скролла */
}

/* prog1: кнопка-круг остаётся 84×84 px без внутреннего отступа */
.catalog[data-prog="prog1"] .trend-item{
  flex: 0 0 auto;
  width: 84px;            /* диаметр */
  height: 84px;           /* = ширина → точный квадрат */
  border-radius: 50%;     /* круг */
  padding: 0;             /* ⬅️ убираем, чтобы высота не росла */
  box-sizing: border-box; /* подстраховка */
  overflow: visible;      /* картинка «выпирает» */
}

/* крупная «наклейка» внутри круга */
.catalog[data-prog="prog1"] .trend-item img{
  width: 50px;
  height: 50px;
  transform: translateY(0px); /* чуть выглядывает сверху если значение будет отрицательно -8px былопше*/
}

/* подпись чуть ниже, чтобы не налезала на картинку */
.catalog[data-prog="prog1"] .trend-label{
  margin-top: -4px;
  font-size: 12px;                /* при желании — чуть компактнее */
}

/* prog0: компактнее расстояние и чуть меньше сам «стикер» */
.catalog[data-prog="prog0"] .trend-item img{
  width: 60px;              /* было 72 → чуть меньше, чтобы не растягивать плитку */
  height: 60px;
  transform: translateY(-18px);   /* поднимаем, освобождая место снизу */
 
}

.catalog[data-prog="prog0"] .trend-label{
  margin-top: -12px;        /* подтягиваем текст ближе к иконке */
}






/* Стили для попапа */
.popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.65);
  z-index: 9999;
  animation: fadeIn .25s ease;
}

.popup.show { display: flex; }

.popup__content {
  width: 92%;
  max-width: 560px;
  margin: 0 12px;
  background: #2c3846;
  color: var(--text-color);
  border-radius: 16px;
  padding: 0.5rem 1.6rem 0.8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  position: relative;
  animation: scaleIn .25s ease;
}

.popup__close {
  position: absolute;
  top: -10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  border: none;
  color: var(--hint-color);
  cursor: pointer;
  font-size: 1.2rem;
   line-height: 1;         /* 🔧 Убирает вытяжку вверх/вниз */
  padding: 0;             /* 🔧 Обнуляем отступ */
}

/* Акцентный блок */
 .highlight{
    text-align:center;
    font-weight:500;
    background:rgba(255,255,255,.05);
    padding: 12px 8px;
    border-radius:10px;
  }

  .highlight p {
  margin: 0px 0px;
  line-height: 1.2; /* можно чуть меньше, например, 1.2 */
}

@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes scaleIn { from {transform:scale(.9)} to {transform:scale(1)} }

.telegram-button {
  display: inline-block;
  background-color: #0088cc; /* Цвет Telegram */
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px; /* Круглая кнопка */
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.telegram-button:hover {
  background-color: #007ab8;
  transform: translateY(-2px);
}

 .contact{
  margin-top:1.2rem;
  text-align:center;
  font-size:.9rem;
}
.contact a{
  color:#8ec5ff;
  text-decoration:none;
}
.contact a:hover{
  text-decoration:underline;
}


/* отступ у главного контейнера чтобы нижнее меню не заезжало на него */
#main-content {
  padding-bottom: calc(40px + env(safe-area-inset-bottom,0)); 
}
</pre></body></html>