/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

hr {
  height: 1px !important;
}

.required::after {
  content: "*";
  color: #d61348;
  display: inline-block;
  margin-left: 2px;
}

.one-line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* скрытия иконки в описании */
#desc-box {
  max-height: 4.5rem;
  overflow: hidden;
}



/* Список треков в выборе альбома */
#trackListContainer .track-item {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Кастомный скролл только для списка треков в альбоме */
/* ==== Firefox: все скроллы, кроме основного ==== */

/* по умолчанию — тонкий скролл у всех элементов */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 130, 0.8) transparent;
}

/* у корневого скролла оставляем стандарт */
html {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

/* ==== WebKit (Chrome / Edge / Safari) ==== */

/* все скроллбары, кроме основного у html/body */
*:not(html):not(body)::-webkit-scrollbar {
  width: 6px;
}

*:not(html):not(body)::-webkit-scrollbar-track {
  background: transparent;
}

*:not(html):not(body)::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 130, 0.8);
  border-radius: 999px;
}

*:not(html):not(body)::-webkit-scrollbar-thumb:hover {
  background-color: rgba(160, 160, 170, 0.9);
}

textarea {
  resize: vertical;
  padding-bottom: 14px; /* чтобы было место под псевдо-ручку */
}

textarea::-webkit-resizer {
  background: transparent;
  border: none;
}

textarea::after {
  content: "";
  position: absolute;          /* не работает, потому что textarea не position:relative; и ::after внутри контента */
}





/* Аватары в комментариях — строго круг, с обрезкой по краям */
.comment .comment-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comment .image {
  border-radius: 50%;
  overflow: hidden;
}

.cicon img {
  width: .95em !important;
  height: .95em !important;
  opacity: .3;
}

/* Градиентный аватар по умолчанию (когда нет загруженного) для js */
.avatar-fallback {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1c0b6 0%, #dde2ee 100%);
}

/* Резиновый круглый аватар исполнителя */
.artist-avatar-large {
  width: 100%;
  max-width: 180px;      /* максимум, чтобы не раздувался на больших экранах */
  aspect-ratio: 1 / 1;   /* квадрат */
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;        /* центровка в колонке */
}

.has-text-grey, .has-text-grey a, .menu-label {
  color: #717680 !important;
}



.mess-badge {
  min-height: 16px; 
  min-width: 16px; 
  height: 16px; 
  padding: 0 4px; 
  background: #ff3860;
  color: #fff;
  font-size: 11px; 
  margin-top: -2px;
}

.mess-badge.is-zero {
  background: #6c6c6c;
}




/*
.comment {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
  line-height: 1.4;
}

.comment b a {
  color: #5ca8ff;
  text-decoration: none;
}
.comment b a:hover {
  text-decoration: underline;
}

.comment p {
  margin: 4px 0 6px 0;
  color: #ddd;
}

.comment small {
  color: #777;
  font-size: 0.9em;
}

button.comment-delete,
button.reply-toggle {
  font-size: 0.9em;
  margin-left: 6px;
  padding: 0;
  background: none;
  border: none;
}

.replies {
  margin-left: 25px;
  border-left: 1px solid #333;
  padding-left: 10px;
}
*/ 
/* Сгругление */
.rounded-sm {
  border-radius: 4px;
}

.rounded-md {
  border-radius: 8px;
}

.rounded-lg {
  border-radius: 12px;
}

/*
для сапа переход

.transition-fade {
  opacity: 1;
  transition: opacity .4s;
}

html.is-changing .transition-fade {
  opacity: 0;
}



*/

/* profile_header.php */
/* базовый отступ под именем/локацией, когда статистики нет */
.profile-header-main {
  margin-bottom: 0; /* или небольшой, если хочешь */
}

/* если сразу после идёт блок статистики и в нём есть хотя бы один .has-text-centered (хотя бы один счётчик) */
.profile-header-main:has(+ .profile-stats:has(> .has-text-centered)) {
  margin-bottom: 1.5rem; /* нужный тебе отступ между именем и цифрами */
}

/* по умолчанию без отступа у блока статистики */
.profile-stats {
  margin-top: 0;
}

/* если внутри есть хотя бы один числовой блок — даём отступ */
.profile-stats:has(> .has-text-centered) {
  margin-top: 1.5rem; /* подбери величину по вкусу */
}

/* по умолчанию без отступа */
.profile-follow {
  margin-top: 0;
}

/* если внутри есть что-то от follow_button.php — даём отступ сверху */
.profile-follow:has(.js-follow-toggle),
.profile-follow:has(> a.button) {
  margin-top: 1rem; /* или нужное тебе значение */
}



/* Убираем лишний отступ, появившийся после удаления стрелки */

/* .navbar-dropdown {
  border: none !important;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.navbar-item.has-dropdown:hover .navbar-link {
  background: transparent !important;
} */

/*

/* ===========================
   Общие стили для счётчика прослушиваний
   =========================== */
/*
.play-count {
  font-size: 0.95em;
  color: currentColor; 
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.play-count img.icon {
  width: 1.1em;
  height: 1.1em;
  opacity: 0.85;
  vertical-align: middle;
  transition: opacity 0.2s ease, filter 0.3s ease;
}

.play-count:hover img.icon {
  opacity: 1;
}

.columns.is-vcentered[style*="#"] .play-count img.icon {
  filter: brightness(0) invert(1);
}
*/



/* ===========================================================
   UNIVERSAL TOOLTIP SYSTEM
   применимо ко всем элементам с атрибутом data-tooltip
   =========================================================== */

[data-tooltip] {
  position: relative;
  cursor: pointer;
}

/* Тело подсказки */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s ease;
  z-index: 100;
}

/* Стрелочка */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: all 0.18s ease;
  z-index: 99;
}

/* Появление при наведении */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: auto;
}


/* ===========================================================
   КЛАССЫ ДЛЯ КНОПОК ДЕЙСТВИЙ (лайки, репосты, и т.п.)
   =========================================================== */

/* курсор-указатель (замена style="cursor:pointer;") */
.clickable {
  cursor: pointer;
}

/* для неактивных (заблокированных) кнопок, например self_like */
.is-disabled {
  cursor: not-allowed;
}

/* плавное наведение для интерактивных элементов */
.clickable:hover {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}



/* ===========================
   Универсальный блок пользователя (аватар + имя)
   =========================== */

.user-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* .user-inline:hover span {
  text-decoration: underline;
} */

/* ----- Аватар по умолчанию (32px) ----- */
.user-inline .image {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.user-inline .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ----- Варианты размеров ----- */

/* Маленький аватар (24px) */
.user-inline.is-small .image {
  width: 24px;
  height: 24px;
  gap: 6px;
}

/* Средний аватар (32px) — значение по умолчанию */
.user-inline.is-medium .image {
  width: 32px;
  height: 32px;
}

/* Крупный аватар (48px) */
.user-inline.is-large .image {
  width: 48px;
  height: 48px;
  gap: 10px;
}

/* Имя под аватаром: обрезка по ширине */
.follower-name {
  display: block;
  max-width: 128px;        /* совпадает с аватаром */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* цепочка: имя, треки, подписчики, кнопка follow */
.user-inline-meta {
  display: inline-flex;
  align-items: center;
}

/* отступ между соседними элементами внутри цепочки */
.user-inline-meta > * + * {
  margin-left: 0.5rem;   /* подкорректируй по вкусу: 0.4–0.75rem */
}

@media (max-width: 768px) {
  .user-inline-meta > * + * {
    margin-left: 0.35rem;
  }
}

/* иконки счётчиков (треки, подписчики, "вы подписаны") возле имени автора */
.user-inline-meta img.icon,
.user-inline-meta .icon img,
.user-inline-meta .follow-status img,
.user-inline-meta a img {
  width: 1.1rem;
  height: 1.1rem;
}






/* ===== Карточка плейлиста ===== */
/* ===== Карточка плейлиста ===== */
.playlist-card {
  color: inherit;
  text-decoration: none;
}

.playlist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Название */
.playlist-title {
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Короткое описание */
.playlist-desc {
  max-height: 2.6em;
  overflow: hidden;
  line-height: 1.3;
}

/* Мобильный */
@media (max-width: 768px) {
  .playlist-title {
    font-size: 0.9rem;
  }
  .playlist-desc {
    font-size: 0.8rem;
  }
}



/* ====== Карточки альбомов ====== */
.album-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Обложка — любой формат, всегда заполняет квадрат */
.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Заголовок */
.album-title {
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Дата релиза */
.album-date {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

/* Описание */
.album-desc {
  max-height: 2.6em; /* около 2 строк */
  overflow: hidden;
  line-height: 1.3;
}

/* Мобильные мелкие правки */
@media (max-width: 768px) {
  .album-title {
    font-size: 0.9rem;
  }
  .album-desc {
    font-size: 0.8rem;
  }
}











/* Текстовый стиль */
.user-inline span {
  /* font-weight: 600; */
  line-height: 1.1;
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-info .has-background-black {
  display: inline-flex;
  flex-wrap: wrap;
}










/* ======================================
   Универсальные gap-классы для inline-flex
   ====================================== */

/* Маленький промежуток */
.gap-xs {
  gap: 0.25rem; /* ~4px */
}

/* Средний (универсальный) промежуток */
.gap-sm {
  gap: 0.5rem;  /* ~8px */
}

/* Крупный (для панелей, блоков и т.п.) */
.gap-md {
  gap: 0.75rem; /* ~12px */
}

/* Очень крупный, если нужно больше воздуха */
.gap-lg {
  gap: 1rem; /* ~16px */
}

















/* ==== ЕДИНЫЙ СТИЛЬ ДЛЯ ИКОНКИ + СЧЁТЧИКА ==== */
.track-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.95em;
  color: currentColor;
  vertical-align: middle;
  user-select: none;
  line-height: 1;
  cursor: default;
}

.track-meta-item img.icon {
  width: 1.41em;
  height: 1.41em;
  opacity: 0.85;
  vertical-align: middle;
  transition: opacity 0.2s ease, filter 0.3s ease;
}

.track-meta-item:hover img.icon {
  opacity: 1;
}

/* выравнивание счётчика */
.track-meta-item span {
  display: inline-block;
  min-width: 0.6em;
  text-align: center;
}

/* если внутри цветного блока (фон через inline-style) — иконки белые */
.columns.is-vcentered[style*="#"] .track-meta-item img.icon {
  filter: brightness(0) invert(1);
}

/* ==== ДОП. НАСТРОЙКИ ДЛЯ АКТИВНЫХ СОСТОЯНИЙ ==== */
/*
.like-btn.liked img.icon,
.repost-btn.reposted img.icon {
  filter: brightness(1.1) saturate(1.2);
}
*/
.like-btn.clickable:hover img.icon,
.repost-btn.clickable:hover img.icon,
.play-count:hover img.icon {
  opacity: 1;
}

/* ==== ИНТЕРАКТИВНОСТЬ ==== */

/* курсор-рука у кликабельных */
.track-meta-item.clickable,
.like-btn.clickable,
.repost-btn.clickable {
  cursor: pointer;
}

/* курсор по умолчанию у неактивных */
.track-meta-item.is-disabled,
.like-btn.is-disabled {
  cursor: default;
  opacity: 1;
}

/* лёгкий hover-эффект для интерактивных иконок */
.track-meta-item.clickable:hover img.icon,
.like-btn.clickable:hover img.icon,
.repost-btn.clickable:hover img.icon {
  opacity: 1;
}

/* ==== ГРУППА МЕТА-ЭЛЕМЕНТОВ ==== */
.track-meta-group {
  display: inline-flex;
  align-items: center;
  gap: 1em; /* расстояние между иконками */
  flex-wrap: wrap; /* чтобы на узких экранах переносились */
  font-size: 0.95em;
  color: inherit;
  margin-bottom: 2em;
}

/* выравнивание в один ряд и центрирование внутри карточки трека */
.track-meta-group.centered {
  justify-content: center;
}

.track-meta-group.right {
  justify-content: flex-end;
}

.track-meta-group.left {
  justify-content: flex-start;
}

/* адаптивность: чуть уменьшаем расстояние на мобильных */
@media (max-width: 768px) {
  .track-meta-group {
    gap: 0.7em;
  }
}







/* --- жанры: обложка как фон + мягкий цветной градиент --- */
/* --- жанры: фон из JS + картинка в верхней части под углом --- */

.genre-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;

  width: 100%;
  aspect-ratio: 1 / 1;

  padding: 0.8rem 0.9rem;
  border-radius: 4px;
  overflow: hidden;

  color: #ffffff;
  text-decoration: none;

  /* фон задаёт JS, пока нет — нейтральный */
  /* background: linear-gradient(167deg, #d5d9e2, #b7bcc8); */

  /* без теней и рамок */
  border: none;
}



/* Наклонённая картинка в верхней части блока, под обрез */
.genre-cover-slice {
  position: absolute;
  top: -2%;      /* чуть выше, чтобы резалось сверху */
  right: -7%;    /* уводим вправо, чтобы “лезла” из-за края */
  width: 95%;
  height: 90%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: rotate(-8deg);
  transform-origin: center;

  border-radius: 4px;
  pointer-events: none;
  filter: contrast(.85); /* меньше 1 — контраст ниже, больше 1 — выше */
  
}

/* Название жанра внизу слева.
   Шрифт НЕ меняем — только позиционирование. */
.genre-tile-title {
  position: relative;
  z-index: 1;
  text-align: left;
  font-size: clamp(1rem, 1.2vw, 1.4rem);
}

/* Индикатор проигрывания — три полоски */

.genre-play-indicator {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;

  display: none;           /* видно только у .is-active */
  align-items: flex-end;
  gap: 2px;

  z-index: 1;
}

.genre-play-bar {
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);

  /* базовая высота, когда жанр не активен */
  height: 9px;
  transform-origin: bottom;
}

/* Плавная, еле заметная анимация только у активного жанра */

.genre-tile.is-active .genre-play-indicator {
  display: inline-flex;
}

.genre-tile.is-active .genre-play-bar:nth-child(1) {
  animation: genreBar1 0.7s ease-in-out infinite;
}

.genre-tile.is-active .genre-play-bar:nth-child(2) {
  animation: genreBar2 0.7s ease-in-out infinite;
}

.genre-tile.is-active .genre-play-bar:nth-child(3) {
  animation: genreBar3 0.7s ease-in-out infinite;
}

/* Очень простые keyframes: высота чуть «дышит» */

@keyframes genreBar1 {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1);   }
}

@keyframes genreBar2 {
  0%, 100% { transform: scaleY(0.8); }
  50%      { transform: scaleY(1.2); }
}

@keyframes genreBar3 {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.1); }
}



.genres-card{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  padding: 0.75rem;
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  overflow: hidden; /* чтобы фон обрезался по радиусу */
}

.genres-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg) center/cover no-repeat;
  /* filter: saturate(.7) contrast(.85) brightness(.95); насыщенность/контраст */
  filter: contrast(.85); /* меньше 1 — контраст ниже, больше 1 — выше */
  transform: scale(1.02);
}

.genres-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(45deg, rgba(0,0,0,0.35), rgba(0,0,0,0.05)); /* затемнение снизу-слева -> вверх-вправо */
}

.genres-card > *{
  position: relative;
  z-index: 1;
}

/* индикатор в плитках жанров поверх картинки, в правом нижнем углу */
.genres-card > .genre-play-indicator {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
}

#charts-genre-list .charts-genre-tile,
#new-genre-list .new-genre-tile {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.15rem;
}

#charts-genre-list .charts-genre-tile .genre-tile-subtitle,
#new-genre-list .new-genre-tile .genre-tile-subtitle {
  position: relative;
  z-index: 1;
  display: block;
  text-align: left;
  line-height: 1.1;
  opacity: 0.85;
  font-size: 0.75rem; /* можно убрать, если не хочешь менять размер */
}



/* ===============================
   Chat (messages) styles
   =============================== */

.messages-list {
  /* ЕДИНСТВЕННЫЙ скролл у списка */
  overflow-y: auto;
  /* Адаптивная высота: не выше 70vh и с учётом хедера/формы */
  /* Если у тебя другой вертикальный ритм — подстрой нижний вычет */
  height: min(70vh, calc(100dvh - 260px));
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}

/* Сообщения (пузыри) */
.message-item {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  line-height: 1.4;
  word-break: break-word;
  box-sizing: border-box;
}

.message-mine {
  align-self: flex-end;
  background-color: #e1f5fe; /* светло-синий */
  color: #222;
  border-top-right-radius: 0;
}

.message-other {
  align-self: flex-start;
  background-color: #f2f2f2;
  color: #222;
  border-top-left-radius: 0;
}

.message-meta {
  font-size: 0.7rem;
  color: #888;
  margin-top: 0.25rem;
  text-align: right;
}







.opacity-0   { opacity: 0   !important; }
.opacity-10  { opacity: 0.1 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-90  { opacity: 0.9 !important; }
.opacity-100 { opacity: 1   !important; }








/* ============================================================
   Эквалайзер-подложка (визуализатор)
   ============================================================ */
.track-colored {
  position: relative;
  /* overflow: hidden; */
}

.visualizer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

.track-colored > * {
  position: relative;
  z-index: 2;
}





/* ===============================
   ТРЕК — единый стиль с разделителями
   =============================== */
   .tracks-list {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .track-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 0;
    /* border-bottom: 1px solid rgba(255,255,255,0.08); */
    margin: 0 !important;
    border: none;
  }

  /* Линия ТОЛЬКО между треками */
  [data-theme="light"] .track-item + .track-item {
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  
  /* Тёмная тема — оставляем мягко-белыми */
  [data-theme="dark"] .track-item + .track-item {
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  /* первый трек без лишнего верха */
  .tracks-list .track-item:first-child,
  .tracks-list > *:first-child .track-item {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* 🔹 последний трек без линии */
  /* .tracks-list .track-item:last-child,
  .tracks-list > *:last-child .track-item,
  .tracks-list .track-item:last-of-type,
  .tracks-list > *:last-of-type .track-item,
  .tracks-list > .column:last-child .track-item {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  } */
  
  /* 🔹 hover без подсветки */
  .track-item:hover {
    background: transparent;
  }
  



  /* ===== Обложка ===== */
  .track-cover,
  .track-cover-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
  }
  
  .track-cover img,
  .track-cover-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
  }
  
  /* ===== Кнопка Play ===== */
  .play-overlay-btn {
    position: absolute;
    inset: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s ease;
  }
  
  .track-cover:hover .play-overlay-btn,
  .track-cover-wrap:hover .play-overlay-btn {
    opacity: 1;
  }
  
  .play-overlay-btn img {
    width: 36px;
    height: 36px;
    filter: invert(1) brightness(1.05);
  }
  
  .play-overlay-btn.playing img {
    content: url('/assets/icons/pause.svg');
    filter: invert(1) brightness(0.85) contrast(85%);
  }
  
  /* ===== Информация ===== */
  .track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  
  .track-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
  }
  
  .track-meta {
    font-size: 0.95rem;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .track-extra {
    font-size: 0.85rem;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
  }
  
  /* ===== Кнопки справа ===== */
  .track-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
  }
  
  /* ===== Адаптив ===== */
  @media (max-width: 768px) {
    .track-item {
      padding: 1rem 0;
      gap: 0.75rem;
    }
  
    .track-cover,
    .track-cover-wrap {
      width: 80px;
      height: 80px;
    }
  
    .track-title { font-size: 0.9rem; }
    .track-meta { font-size: 0.8rem; }
    .track-extra { font-size: 0.75rem; }
  }
  
  @media (max-width: 480px) {
    .track-cover,
    .track-cover-wrap {
      width: 64px;
      height: 64px;
    }
  
    .track-title { font-size: 0.85rem; }
    .track-meta { font-size: 0.75rem; }
    .track-extra { font-size: 0.7rem; }
    .track-actions { gap: 0.75rem; }
  }


/* для страницы pages/verify.php */
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: rgba(50, 50, 50, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.toast.success { background: rgba(0,170,90,0.9); }
.toast.error   { background: rgba(220,40,40,0.9); }









/* ========== GRID формат: карточки треков ========== */

/* Обертка одной карточки в grid-режиме */
.track-card-grid {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem; /* отступы между карточками */
}

/* Кол-во карточек по ширине:
   мобилка: 1, планшет: 2, десктоп: 4 */
@media (min-width: 769px) {
  .track-card-grid {
    width: 50%; /* 2 карточки в ряд */
  }
}

@media (min-width: 1024px) {
  .track-card-grid {
    width: 25%; /* 4 карточки в ряд */
  }
}

/* Карточка занимает всю высоту обертки */
.track-card-grid .card.track-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Контент тянется, footer прижат к низу */
.track-card-grid .card.track-card .card-content {
  flex: 1 1 auto;
}

/* Переопределяем дефолтный размер обложки
   ТОЛЬКО внутри карточек grid */
.track-card-grid .track-cover-wrap {
  width: 100%;
  height: auto;
}

/* Квадратная обложка, полностью по ширине карточки */
.track-card-grid .track-cover-img {
  width: 100%;
  padding-top: 100%;            /* квадрат */
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* =========================================
   GRID-карточки: треки, альбомы, плейлисты
   ========================================= */

/* Колонки — flex, чтобы карточки были одинаковой высоты */
.tracks-grid > .column,
.albums-grid > .column,
.playlists-grid > .column {
  display: flex;
}

/* Карточки тянутся по высоте колонки */
.tracks-grid .card.track-card,
.albums-grid .card.album-card,
.playlists-grid .card.playlist-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tracks-grid .card.track-card .card-content,
.albums-grid .card.album-card .card-content,
.playlists-grid .card.playlist-card .card-content {
  flex: 1 1 auto;
}

/* Обложка внутри грид-карточек: квадрат, cover */
.tracks-grid .track-cover-wrap,
.albums-grid .album-cover-wrap,
.playlists-grid .playlist-cover-wrap {
  width: 100%;
}

.tracks-grid .track-cover-img,
.albums-grid .album-cover-img,
.playlists-grid .playlist-cover-img {
  width: 100%;
  padding-top: 100%;           /* квадрат */
  border-radius: 4px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Описание плейлиста — не раздувать карточку бесконечно */
.playlists-grid .playlist-desc {
  max-height: 3em;            /* ~2 строки */
  overflow: hidden;
}


/* =========================================
   Внешний вид карточек треков / альбомов / плейлистов в grid
   ========================================= */

/* Чуть меньше расстояние между колонками */
.tracks-grid > .column,
.albums-grid > .column,
.playlists-grid > .column {
  padding: 0.5rem;
}

/* Сами карточки — без тени, без лишних рамок */
.tracks-grid .card.track-card,
.albums-grid .card.album-card,
.playlists-grid .card.playlist-card {
  box-shadow: none;
  border-radius: 4px;
  border: none;
}

/* Контент внутри карточек: меньшие отступы */
.tracks-grid .card.track-card .card-content,
.albums-grid .card.album-card .card-content,
.playlists-grid .card.playlist-card .card-content {
  padding: 0.75rem 0.9rem;                 /* вместо ~1.5rem у Bulma */
}

/* Нижняя полоска и разделители в card-footer — убрать */
.tracks-grid .card.track-card .card-footer,
.albums-grid .card.album-card .card-footer,
.playlists-grid .card.playlist-card .card-footer {
  border-top: none;                        /* убираем линию сверху footer */
}

/* Меньше отступы и без вертикальных линий между иконками */
.tracks-grid .card.track-card .card-footer-item,
.albums-grid .card.album-card .card-footer-item,
.playlists-grid .card.playlist-card .card-footer-item {
  border: none;                            /* Bulma ставит разделители */
  padding: 0.5rem 0.75rem;                 /* компактнее */
}

.track-card-grid {
  padding: 0.5rem; /* было 0.75rem, сделаем чуть меньше */
}
/* Уменьшаем иконки в футере карточек альбомов */
/* .card-footer .icon {
  width: 20px;
  height: 20px;
} */


/* ===============================
   Отступ между строками карточек
   =============================== */
/* ===============================
   Отступ между строками карточек
   =============================== */

/* === ТРЕКИ (grid через .track-card-grid) === */
/* Мобильный (по умолчанию) */
.track-card-grid {
  margin-bottom: 1.5rem;  /* расстояние между рядами карточек треков */
}

/* Планшет */
@media (min-width: 769px) and (max-width: 1023px) {
  .track-card-grid {
    margin-bottom: 2rem;
  }
}

/* Десктоп */
@media (min-width: 1024px) {
  .track-card-grid {
    margin-bottom: 2.5rem;
  }
}

/* === АЛЬБОМЫ и ПЛЕЙЛИСТЫ (Bulma columns) === */
/* Мобильный (по умолчанию) */
.albums-grid > .column,
.playlists-grid > .column {
  padding-bottom: 1.5rem !important;  /* расстояние между строками карточек */
}

/* Планшет */
@media (min-width: 769px) and (max-width: 1023px) {
  .albums-grid > .column,
  .playlists-grid > .column {
    padding-bottom: 2rem !important;
  }
}

/* Десктоп */
@media (min-width: 1024px) {
  .albums-grid > .column,
  .playlists-grid > .column {
    padding-bottom: 2.5rem !important;
  }
}


.link-hover:hover {
  text-decoration: underline;
}









/* Список уведомлений — как треки */
.notifications-list {
  margin: 0 !important;
  padding: 0 !important;
}

/* Один элемент уведомления */
.notification-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.0rem 0;
  margin: 0 !important;
  border: none;
}

/* Линия ТОЛЬКО между уведомлениями (как .track-item + .track-item) */
[data-theme="light"] .notifications-list .notification-item + .notification-item {
  border-top: 1px solid rgba(0,0,0,0.06);
}

[data-theme="dark"] .notifications-list .notification-item + .notification-item {
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Первый — без лишних отступов сверху (на всякий случай) */
.notifications-list .notification-item:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


.progress.is-small {
  height: 0.25rem;;
}









.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
}

/* Если иконка слишком крупная — можно поджать */
.verified-badge .icn {
  width: 18px;
  height: 18px;
}



/* Размер иконок в карточках альбомов и плейлистов */
.albums-grid .card-footer .icon,
.playlists-grid .card-footer .icon, img.icon-color {
  width: 20px;
  height: 20px;
}




/* ===========================
   Страница сообщений: чат
   =========================== */

/* Просто обёртка, без ограничений по высоте */
.chat-wrapper {
  display: flex;
  flex-direction: column;
  max-height: none;
}

/* Никаких внутренних скроллов и ограничений высоты */
#chat-box {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* У списка сообщений тоже убираем скролл, даём только отступ снизу */
#messages-list {
  height: auto;
  max-height: none;
  overflow: visible;
  /* padding-bottom: 140px; запас под форму + плеер, можно подправить */
}

/* Форма всегда внизу экрана, над плеером */
.chat-form {
  position: sticky;
  bottom: 88px; /* подстрой под фактическую высоту аудиоплеера */
  z-index: 20;

  /* background: var(--body-bg, #050509); или твой цвет фона */
  /* padding-top: 0.75rem; */
}

/* Чуть отступим весь чат от низа страницы, чтобы плеер не резал контент
   (особенно если sticky не сработает в старых браузерах) */
.section .chat-wrapper {
  margin-bottom: 96px; /* примерно высота плеера */
}





/* === Выпадающее меню "В плейлист" (локальные стили) === */
/*
.playlist-add-dropdown {
  position: relative;
  display: inline-block;
}

.playlist-add-dropdown .dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.35rem;

  min-width: 220px;
  background-color: #18181c; 
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  padding: 0.4rem 0;

  display: none; 
  z-index: 9999;  
}

.playlist-add-dropdown.is-open .dropdown-menu {
  display: block;
}

.playlist-add-dropdown .dropdown-content {
  max-height: 260px;
  overflow-y: auto;
}

.playlist-add-dropdown .dropdown-item {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  white-space: nowrap;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.playlist-add-dropdown .dropdown-item:hover,
.playlist-add-dropdown .dropdown-item.is-active {
  background-color: #202028;
}

.playlist-add-dropdown .dropdown-divider {
  margin: 0.35rem 0;
}
*/























@media (max-width: 1023px) {
  /* прибиваем любой старый overlay/fixed */
  #mainNavbar.navbar-menu.is-active{
    position: static !important;
    inset: auto !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    background: transparent !important;
  }

  /* мобильный блок показывается только когда меню открыто (Bulma) */
  #mainNavbar .nav-mobile-menu { display: none; }
  #mainNavbar.navbar-menu.is-active .nav-mobile-menu { display: block; }

  /* разделители */
  .navm-sep{
    height: 1px;
    border: 0;
    margin: 0.75rem 0;
    background: rgba(0,0,0,0.12);
  }
  [data-theme="dark"] .navm-sep{ background: rgba(255,255,255,0.12); }

  /* чтобы лейблы не прилипали к краю */
  #mainNavbar .nav-mobile-menu .menu-label{
    padding: 0 0.75rem;
  }

  /* отступы ТОЛЬКО для обычных пунктов меню и summary (НЕ для .button) */
  #mainNavbar .nav-mobile-menu .menu-list a:not(.button),
  #mainNavbar .nav-mobile-menu .menu-list summary{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* details */
  .navm-details > summary{
    list-style: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2rem; /* место под шеврон */
  }
  .navm-details > summary::-webkit-details-marker{ display:none; }

  /* аккуратный шеврон на currentColor (под тему) */
  #mainNavbar .nav-mobile-menu .navm-details > summary::after{
    content:"";
    position:absolute;
    right: 0.75rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .45;
    transform: translateY(-50%) rotate(45deg);
  }
  #mainNavbar .nav-mobile-menu .navm-details[open] > summary::after{
    transform: translateY(-50%) rotate(-135deg);
  }

  /* вложенные пункты внутри details — с отступом ещё больше */
  #mainNavbar .nav-mobile-menu .navm-details ul a{
    padding-left: 1.5rem;
  }

  /* активный пункт: без синей плашки */
  #mainNavbar .nav-mobile-menu .menu-list a.is-active{
    background: transparent !important;
    color: inherit !important;
    font-weight: 600;
  }
  /* вместо синей плашки — нейтральная точка */
  #mainNavbar .nav-mobile-menu .menu-list a.is-active::before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:999px;
    background: currentColor;
    opacity: .35;
    margin-right:10px;
    vertical-align: middle;
  }

  /* аватар + имя в summary */
  #mainNavbar .nav-mobile-menu .navm-userline{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
  }
  #mainNavbar .nav-mobile-menu .navm-avatar{
    width:28px;
    height:28px;
    border-radius:999px;
    flex:0 0 28px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* сообщения/тема — иконки, но с тем же левым краем */
  #mainNavbar .nav-mobile-menu .navm-icon-link{
    display: inline-flex !important;
    align-items: center;
    padding: 0.35rem 0.75rem;
  }

/* Bottom bar: кнопка Upload на всю ширину + More под ней */
#mainNavbar .nav-mobile-menu .navm-bottombar{
  padding: 0.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#mainNavbar .nav-mobile-menu .navm-bottombar .navm-upload-btn{
  width: 100% !important;
  justify-content: center;
}

#mainNavbar .nav-mobile-menu .navm-bottombar .navm-more summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
#mainNavbar .nav-mobile-menu .navm-bottombar .navm-more summary::-webkit-details-marker{ display:none; }


#mainNavbar .nav-mobile-menu .navm-bottombar .navm-more summary{
  display: flex;
  justify-content: center;
  width: 100%;
}
#mainNavbar .nav-mobile-menu .navm-bottombar .navm-more summary .icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

  
}

/* Бургер/крестик: только ч/б по теме, без подложек */
.navbar-burger{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.navbar-burger:hover,
.navbar-burger:focus,
.navbar-burger:active{
  background: transparent !important;
}
/* линии/крестик берут цвет из currentColor */
.navbar-burger span{
  background-color: currentColor !important;
}
/* цвет по теме */
[data-theme="dark"] .navbar-burger{ color:#fff !important; }
[data-theme="light"] .navbar-burger{ color:#000 !important; }

.navbar .navbar-dropdown .navbar-item .nav-dd-line{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
}

/* Navbar dropdown: вернуть стандартный размер иконок */
.navbar .navbar-dropdown .navbar-item .icon,
.navbar .navbar-dropdown .navbar-item img.icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex: 0 0 1.25rem;
}

/* если где-то иконка завернута в <span class="icon"><img ...></span> */
.navbar .navbar-dropdown .navbar-item .icon img {
  width: 100% !important;
  height: 100% !important;
}

/* Navbar: логотип без фоновой подсветки на hover/focus */
.navbar .navbar-brand > .navbar-item:hover,
.navbar .navbar-brand > .navbar-item:focus,
.navbar .navbar-brand > .navbar-item:focus-within,
.navbar .navbar-brand > .navbar-item:active,
.navbar .navbar-item.navbar-search:hover,
.navbar .navbar-item.navbar-search:focus,
.navbar .navbar-item.navbar-search:active {
  background: transparent !important;
}

.navbar-item .icon { display: inline-flex; align-items: center; justify-content: center; }
.navbar-item img.icon { display: block; }






/* portal dropdown: фикс в viewport */
[data-dd-portal] .dropdown-menu{
  position: fixed !important;
  z-index: 999999 !important;
  width: min(18rem, calc(100vw - 16px)) !important; /* важное: ширина у меню */
}

/* скролл и ограничение по высоте */
[data-dd-portal] .dropdown-content{
  max-height: min(60vh, 360px) !important;
  overflow: auto !important;
}

/* троеточие (усиленно) */
[data-dd-truncate] .dropdown-item{
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}








/* ===== PLAYLIST: галочка слева, текст с … ===== */
.playlist-add-dropdown .playlist-item,
.playlist-add-dropdown .dropdown-item[data-pid]{
  display:flex;
  align-items:center;
  gap:.5rem;
  position: relative;
  padding-left: 2rem; /* место под галочку всегда */
}

/* если где-то остался img-чек — скрыть */
.playlist-add-dropdown .pl-check,
.playlist-add-dropdown .icon-check{
  display:none !important;
}

/* галочка (скрыта по умолчанию) */
.playlist-add-dropdown .playlist-item::before,
.playlist-add-dropdown .dropdown-item[data-pid]::before{
  content:"";
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  opacity:0;

  background-color: currentColor;
  -webkit-mask: url("/assets/icons/check.svg") no-repeat center / contain;
          mask: url("/assets/icons/check.svg") no-repeat center / contain;
}

/* показать галочку: либо уже в плейлисте, либо если где-то ставится is-active */
.playlist-add-dropdown .playlist-item.in-list::before,
.playlist-add-dropdown .dropdown-item[data-pid].in-list::before,
.playlist-add-dropdown .playlist-item.is-active::before,
.playlist-add-dropdown .dropdown-item[data-pid].is-active::before{
  opacity:1;
}

/* обрезка только текста */
.playlist-add-dropdown .pl-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* убрать синий фон Bulma у active */
.playlist-add-dropdown .playlist-item.is-active,
.playlist-add-dropdown .dropdown-item[data-pid].is-active{
  background: transparent !important;
  color: inherit !important;
}


/* ===== AUTONEXT: галочка слева, без синего фона ===== */
#autonext-dropdown .dropdown-item[data-value]{
  position: relative;
  padding-left: 2rem;
}

#autonext-dropdown .dropdown-item[data-value].is-active{
  background: transparent !important;
  color: inherit !important;
}

#autonext-dropdown .dropdown-item[data-value]::before{
  content:"";
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  opacity:0;

  background-color: currentColor;
  -webkit-mask: url("/assets/icons/check.svg") no-repeat center / contain;
          mask: url("/assets/icons/check.svg") no-repeat center / contain;
}

#autonext-dropdown .dropdown-item[data-value].is-active::before{
  opacity:1;
}

/* убрать тень у dropdown (только где используешь portal) */
[data-dd-portal] .dropdown-content{
  box-shadow: none !important;
}

[data-dd-portal] .dropdown-menu{
  box-shadow: none !important;
}






/* ===== Dropdown: слегка серый / тёмно-серый, цельный фон ===== */
:root{
  --dd-bg: #f2f3f5;        /* светло-серый */
  --dd-hover: #e6e8eb;
}

[data-theme="dark"]{
  --dd-bg: #1c1f24;        /* тёмно-серый, не чёрный */
  --dd-hover: #262a31;
}

/* контейнер dropdown */
[data-dd-portal] .dropdown-content{
  background: var(--dd-bg);
  border-radius: 8px;
  overflow: hidden;       /* КЛЮЧЕВО: фон цельный */
}

/* пункты */
[data-dd-portal] .dropdown-item{
  background: transparent;
}

/* hover / active */
[data-dd-portal] .dropdown-item:hover,
.playlist-add-dropdown .playlist-item.is-active,
.playlist-add-dropdown .dropdown-item[data-pid].is-active,
#autonext-dropdown .dropdown-item[data-value].is-active{
  background: var(--dd-hover);
}




:root{
  --loc-dd-bg: #f2f3f5;
  --loc-dd-hover: #e6e8eb;
  --loc-dd-text: #111;
  --loc-dd-border: rgba(0,0,0,.08);
}

[data-theme="dark"]{
  --loc-dd-bg: #1c1f24;
  --loc-dd-hover: #262a31;
  --loc-dd-text: #fff;
  --loc-dd-border: rgba(255,255,255,.08);
}

/* контейнер подсказок (у тебя там class="box", поэтому перебиваем) */
#country-suggestions,
#city-suggestions{
  background: var(--loc-dd-bg) !important;
  color: var(--loc-dd-text) !important;
  border: 1px solid var(--loc-dd-border) !important;
  border-radius: 10px;
  overflow: hidden;      /* цельный фон */
  box-shadow: none !important;
  padding: 0 !important;
}

/* пункты */
#country-suggestions .loc-suggestion-item,
#city-suggestions .loc-suggestion-item{
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

/* hover */
#country-suggestions .loc-suggestion-item:hover,
#city-suggestions .loc-suggestion-item:hover{
  background: var(--loc-dd-hover);
}

/* необязательное: вид отключённого city */
#city-input.is-disabled{
  opacity: .65;
}


/* tracks_list.php */

.track-cover-img-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
}

/* COMPACT */
.track-item-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.track-compact-meta {
  flex: 1;
  min-width: 0;
}

.track-compact-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
}

.track-compact-artist {
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-compact-blocked {
  font-size: 0.85em;
  margin-top: 4px;
}

.track-play-icon-18 {
  width: 18px;
  height: 18px;
}