/* ════════════════════════════════════════════════════
   СБРОС СТИЛЕЙ
   Убираем все отступы браузера по умолчанию у всех элементов.
   box-sizing:border-box — размеры включают padding и border (удобнее считать).
   ════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ════════════════════════════════════════════════════
   ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ
   Меняй здесь — изменится везде на сайте.
   --bg:    цвет фона страницы
   --c1:    акцентный зелёный (кнопки, активные элементы, визуализатор)
   --c2:    акцентный фиолетовый (градиент кнопки play)
   --glass: полупрозрачный белый для стеклянных поверхностей (слабее)
   --glass2: то же, но чуть ярче — для hover-эффектов
   --border: цвет рамок элементов
   --text:  цвет основного текста
   --sub:   приглушённый текст (подписи, плейсхолдеры)
   ════════════════════════════════════════════════════ */
:root {
  --bg: #08090d;
  --c1: #00e5b4;
  --c2: #7c4dff;
  --glass: rgba(255,255,255,0.04);
  --glass2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.07);
  --text: #f0f2f8;
  --sub: rgba(240,242,248,0.42);
}

/* Страница занимает весь экран, фон и шрифт по умолчанию */
html,body { height:100%; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }

/* ════════════════════════════════════════════════════
   ФОНОВЫЕ "ОРБЫ" — размытые цветные пятна на фоне
   Фиксированы (не скроллятся), z-index:0 — под всем контентом.
   pointer-events:none — не перехватывают клики мыши.
   ════════════════════════════════════════════════════ */
.bg-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; }
/* Общий стиль орба: круглый, размытый, плавно дрейфует */
.orb { position:absolute; border-radius:50%; filter:blur(120px); animation:drift 15s ease-in-out infinite alternate; }
/* Орб 1 — зелёный, левый нижний угол */
.orb1 { width:600px; height:600px; background:rgba(0,229,180,0.07); bottom:-200px; left:-150px; }
/* Орб 2 — фиолетовый, правый верхний угол, запускается с задержкой 6 сек */
.orb2 { width:500px; height:500px; background:rgba(124,77,255,0.08); top:-100px; right:-100px; animation-delay:-6s; }
/* Орб 3 — розовый, середина, запускается с задержкой 11 сек */
.orb3 { width:350px; height:350px; background:rgba(255,64,129,0.06); top:40%; left:30%; animation-delay:-11s; }
/* Анимация дрейфа: орб слегка смещается и увеличивается */
@keyframes drift { 0%{transform:translate(0,0)} 100%{transform:translate(40px,30px) scale(1.08)} }

/* ════════════════════════════════════════════════════
   ОСНОВНАЯ ОБОЛОЧКА
   Flex-контейнер: сайдбар слева + плеер справа.
   height:100dvh — 100% высоты экрана (dvh учитывает мобильный браузер).
   z-index:1 — поверх фоновых орбов.
   ════════════════════════════════════════════════════ */
.shell { display:flex; height:100dvh; min-height:100vh; position:relative; z-index:1; }

/* ════════════════════════════════════════════════════
   САЙДБАР — левая панель со списком станций
   Фиксированная ширина 320px. Стеклянный эффект: blur фона.
   ════════════════════════════════════════════════════ */
.sidebar {
  width:320px; flex-shrink:0;          /* не сжимается если мало места */
  display:flex; flex-direction:column;
  border-right:1px solid var(--border);
  background:rgba(8,9,13,0.85);
  backdrop-filter:blur(24px);          /* размываем то, что за панелью */
  overflow:hidden;
}
/* Верхняя часть сайдбара: логотип + поиск */
.sidebar-head { padding:22px 20px 0; flex-shrink:0; }

/* ════════════════════════════════════════════════════
   ЛОГОТИП
   ════════════════════════════════════════════════════ */
/* Обёртка логотипа — ссылка на главную */
.logo-wrap { display:flex; align-items:center; gap:11px; text-decoration:none; margin-bottom:24px; }
.logo-text { display:flex; flex-direction:column; line-height:1; font-family:'Syne',sans-serif; }
/* Верхняя строка логотипа "RECFM" */
.logo-top {
  font-size:20px; font-weight:800; letter-spacing:-0.5px;
  color:#fff;
  -webkit-text-fill-color:#fff;        /* для Safari */
  display:flex; align-items:center; gap:1px;
}
/* Красная мигающая точка ● между REC и FM */
.logo-dot {
  color:#ff2d55;
  -webkit-text-fill-color:#ff2d55;
  font-size:14px;
  margin: 0 1px;
  animation:rec-blink 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,45,85,0.8)); /* красное свечение */
}
/* Анимация мигания точки: полная яркость → тускло → обратно */
@keyframes rec-blink {
  0%,100% { opacity:1; filter:drop-shadow(0 0 6px rgba(255,45,85,0.8)); }
  50%      { opacity:0.25; filter:drop-shadow(0 0 2px rgba(255,45,85,0.2)); }
}
/* Часть "FM" в логотипе — приглушённая */
.logo-fm {
  color:rgba(240,242,248,0.35);
  -webkit-text-fill-color:rgba(240,242,248,0.35);
  font-weight:400;
}

/* Общая анимация моргания — используется для точки "В эфире" и индикатора воспроизведения */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ════════════════════════════════════════════════════
   ПОИСК СТАНЦИЙ
   ════════════════════════════════════════════════════ */
.search-box { position:relative; margin-bottom:14px; }
/* Поле ввода поиска */
.search-box input {
  width:100%; padding:10px 14px 10px 36px; /* левый отступ под иконку лупы */
  background:var(--glass); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:13px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.search-box input::placeholder { color:var(--sub); }
/* При фокусе — зелёная рамка */
.search-box input:focus { border-color:rgba(0,229,180,0.4); box-shadow:0 0 0 3px rgba(0,229,180,0.07); }
/* Иконка лупы слева внутри поля */
.search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.35; pointer-events:none; }

/* ════════════════════════════════════════════════════
   СПИСОК СТАНЦИЙ — прокручиваемый
   ════════════════════════════════════════════════════ */
.station-list { flex:1; overflow-y:auto; padding:0 8px 20px; }
/* Тонкий скроллбар */
.station-list::-webkit-scrollbar { width:3px; }
.station-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:2px; }

/* Одна строка станции в списке */
.station-item {
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:14px; cursor:pointer;
  transition:all .18s; position:relative; overflow:hidden; margin-bottom:2px;
  border:1px solid transparent; /* прозрачная рамка — место под активную */
}
/* При наведении мыши — слегка подсветить */
.station-item:hover { background:var(--glass2); }
/* Активная (играющая) станция — зелёная подсветка */
.station-item.active { background:rgba(0,229,180,0.07); border-color:rgba(0,229,180,0.18); }

/* Иконка/логотип станции (квадрат 52×52px) */
.si-icon {
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; color:#fff; overflow:hidden; position:relative;
}
/* Картинка логотипа станции (если загрузилась) */
.si-icon img { width:100%; height:100%; object-fit:contain; border-radius:12px; position:absolute; inset:0; z-index:2; }
/* Буквенная заглушка если картинка не загрузилась */
.si-icon .fb { font-size:13px; z-index:1; }

/* Текстовая часть строки станции */
.si-info { flex:1; min-width:0; }
/* Название станции — обрезается многоточием если не влезает */
.si-name { font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }

/* Анимированные полосочки — индикатор воспроизведения справа */
.si-bars { display:flex; align-items:flex-end; gap:2px; height:12px; flex-shrink:0; opacity:0; transition:opacity .3s; }
.si-bars.on { opacity:1; } /* класс .on добавляется когда станция играет */
.si-bar { width:2px; background:var(--c1); border-radius:1px; }
/* Три полоски прыгают поочерёдно (задержки 0 / 0.15 / 0.3 сек) */
.si-bars.on .si-bar:nth-child(1) { animation:sb .55s 0s infinite alternate; }
.si-bars.on .si-bar:nth-child(2) { animation:sb .55s .15s infinite alternate; }
.si-bars.on .si-bar:nth-child(3) { animation:sb .55s .3s infinite alternate; }
/* Анимация полоски: от 2px до 12px высотой */
@keyframes sb { from{height:2px} to{height:12px} }

/* Сообщение о загрузке / ошибке / пустом поиске */
.loading-msg { text-align:center; padding:40px 16px; color:var(--sub); font-size:12px; line-height:2; }
/* Вращающийся символ загрузки ◌ */
.spin { display:inline-block; font-size:20px; animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ════════════════════════════════════════════════════
   ПРАВАЯ ЧАСТЬ — ПЛЕЕР
   Занимает оставшееся место. Центрирует карточку плеера.
   ════════════════════════════════════════════════════ */
.player-main {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px; position:relative; overflow:hidden;
}

/* Круглое свечение за карточкой плеера.
   Цвет меняется в зависимости от выбранной станции (через JS). */
.player-glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,180,0.05) 0%,transparent 70%);
  pointer-events:none; transition:background 2s; /* плавная смена цвета 2 сек */
}

/* ════════════════════════════════════════════════════
   КАРТОЧКА ПЛЕЕРА — стеклянный прямоугольник по центру
   max-width:440px — не растягивается слишком широко.
   ════════════════════════════════════════════════════ */
.player-card {
  width:100%; max-width:440px;
  background:rgba(5,5,5,0.92);
  border:1px solid rgba(255,255,255,0.10); border-radius:28px;
  backdrop-filter:blur(40px); padding:36px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  position:relative; z-index:1;
  box-shadow:0 40px 80px rgba(0,0,0,0.7);
  transition:box-shadow .5s, border-color .5s;
}
/* Когда станция выбрана — зелёное свечение у карточки */
.player-card.active {
  box-shadow:0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.14);
}

/* ════════════════════════════════════════════════════
   ВИЗУАЛИЗАТОР (маленький, в карточке)
   Круглый контейнер 190×190px.
   ════════════════════════════════════════════════════ */
.viz-wrap { position:relative; width:190px; height:190px; flex-shrink:0; border-radius:50%; overflow:hidden; }
/* div внутри которого JS создаёт canvas-элемент */
#vizDiv { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; overflow:hidden; }
/* Принудительно скругляем canvas внутри */
#vizDiv canvas { border-radius:50% !important; }

/* ════════════════════════════════════════════════════
   ОБЛОЖКА АЛЬБОМА + СТРОКА С КНОПКОЙ PLAY
   Десктоп: обложка слева от кнопки play (Spotify-стиль).
   ════════════════════════════════════════════════════ */
.play-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.artwork-wrap {
  width:64px; height:64px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
  animation:artwork-in .35s cubic-bezier(.32,1,.32,1);
}
@keyframes artwork-in {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}
.artwork-img { width:100%; height:100%; object-fit:cover; display:block; }

/* ════════════════════════════════════════════════════
   КНОПКА ПОЛНОГО ЭКРАНА (⛶)
   Абсолютно позиционирована в правом верхнем углу карточки.
   ════════════════════════════════════════════════════ */
/* Кнопка свернуть плеер — только в узком/мобильном режиме */
.btn-collapse-player {
  display:none;
}

.btn-fullscreen {
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.06); color:rgba(240,242,248,0.5);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.btn-fullscreen:hover { background:rgba(255,255,255,0.12); color:#ffffff; }
/* На тачскрине (мобильные) — кнопку полного экрана скрываем */
@media (max-width:768px) { .btn-fullscreen, .desktop-only { display:none !important; } }

/* ════════════════════════════════════════════════════
   ПОЛНОЭКРАННЫЙ ВИЗУАЛИЗАТОР — оверлей поверх всего
   Скрыт по умолчанию. Показывается при добавлении класса .open.
   cursor:none — курсор мыши прячется (показывается при движении).
   ════════════════════════════════════════════════════ */
.viz-fullscreen {
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  cursor:none;
}
.viz-fullscreen.open { display:flex; }
/* Класс .showcursor добавляется при движении мыши (курсор появляется) */
.viz-fullscreen.showcursor { cursor:default; }
/* div для canvas полноэкранного визуализатора */
#vizDivFull { position:absolute; inset:0; width:100vw; height:100vh; }
#vizDivFull canvas { border-radius:0 !important; }

/* Нижняя полоса в полном экране: название станции + трек
   Градиент снизу вверх — для читаемости текста поверх визуализатора */
.vf-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:60px 48px 40px;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:space-between;
  pointer-events:none;
  opacity:1; transition:opacity .4s;
}
/* Большое название станции в полном экране */
.vf-name {
  font-family:'Syne',sans-serif; font-size:clamp(22px,3vw,42px); font-weight:800;
  /* clamp(мин, предпочтительный, макс) — адаптивный размер шрифта */
  color:#fff; letter-spacing:-1px; line-height:1.1;
  text-shadow:0 0 40px rgba(0,229,180,0.4); /* зелёное свечение у текста */
}
/* Название трека под станцией */
.vf-track { font-size:15px; color:rgba(255,255,255,0.65); margin-top:7px; letter-spacing:0.3px; }

/* Верхняя панель полного экрана: статус "В эфире" + подсказка + кнопка закрыть
   Скрыта по умолчанию — появляется при движении мыши (класс .showcursor) */
.vf-top {
  position:absolute; top:0; left:0; right:0;
  padding:28px 40px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.viz-fullscreen.showcursor .vf-top { opacity:1; pointer-events:auto; }

/* Блок "● В ЭФИРЕ" в верхнем левом углу полного экрана */
.vf-live { display:flex; align-items:center; gap:8px; }
/* Зелёная мигающая точка */
.vf-dot { width:8px; height:8px; border-radius:50%; background:var(--c1); box-shadow:0 0 10px var(--c1); animation:blink 1.5s ease-in-out infinite; }
/* Текст "В ЭФИРЕ" */
.vf-label { font-size:11px; letter-spacing:3px; color:rgba(255,255,255,0.5); text-transform:uppercase; }
/* Подсказка "Нажмите F или ESC для выхода" */
.vf-hint { font-size:11px; letter-spacing:2px; color:rgba(255,255,255,0.25); text-transform:uppercase; }
/* Кнопка × закрыть полный экран */
.vf-close {
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.15); cursor:pointer;
  background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s; backdrop-filter:blur(8px);
}
.vf-close:hover { background:rgba(255,255,255,0.15); color:#fff; }
/* Левый блок нижней панели (название + трек) */
.vf-left { flex:1; min-width:0; }

/* Кнопки смены пресета визуализатора */
.vf-preset-btns {
  display:flex; gap:8px; align-items:center;
  flex-shrink:0; margin-left:24px;
  pointer-events:none;
  opacity:0; transition:opacity .4s;
}
.viz-fullscreen.showcursor .vf-preset-btns { opacity:1; pointer-events:auto; }
.vf-preset-btn {
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
  backdrop-filter:blur(8px);
}
.vf-preset-btn:hover { background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.4); }

/* ════════════════════════════════════════════════════
   ИНФОРМАЦИЯ О СТАНЦИИ В КАРТОЧКЕ ПЛЕЕРА
   ════════════════════════════════════════════════════ */
.station-info { text-align:center; width:100%; }
/* Подпись "СЕЙЧАС В ЭФИРЕ" над названием */
/* Название станции — большой шрифт, обрезается если длинное */
.station-name {
  font-family:'Syne',sans-serif; font-weight:800; font-size:17px; line-height:1.15;
  letter-spacing:-0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .4s;
}
/* Когда станция выбрана — название становится зелёным */
.station-name.on { color:#ffffff; }
/* Строка с названием трека (мелкий текст под названием станции) */
.station-type { font-size:11px; color:var(--sub); margin-top:5px; letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Строка с треком + кнопки "скопировать" и "история" */
.track-row { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:5px; min-height:18px; }
.track-row .station-type { margin-top:0; }

/* Маленькая кнопка копирования трека */
.btn-copy {
  flex-shrink:0;
  width:22px; height:22px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.07); color:var(--sub);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, transform .15s;
  padding:0;
}
.btn-copy:hover { background:rgba(255,255,255,0.12); color:#ffffff; }
/* После нажатия копировать — кнопка briefly становится зелёной и увеличивается */
.btn-copy.copied { background:rgba(255,255,255,0.18); color:#ffffff; transform:scale(1.15); }

/* Маленькая кнопка истории треков (часы) */
.btn-history {
  flex-shrink:0; position:relative;
  width:22px; height:22px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.07); color:var(--sub);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s; padding:0;
}
.btn-history:hover { background:rgba(255,255,255,0.12); color:#ffffff; }
/* Когда попап открыт — кнопка остаётся подсвеченной */
.btn-history.active { background:rgba(255,255,255,0.12); color:#ffffff; }

/* ════════════════════════════════════════════════════
   ПОПАП ИСТОРИИ ТРЕКОВ
   Всплывает над кнопкой истории.
   Скрыт по умолчанию. Показывается при классе .open.
   ════════════════════════════════════════════════════ */
.history-popup {
  position:fixed;
  background:rgba(10,11,20,0.97); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:8px 0; min-width:230px;
  box-shadow:0 8px 32px rgba(0,0,0,0.7); z-index:999;
  display:none; flex-direction:column;
  backdrop-filter:blur(16px);
}
.history-popup.open { display:flex; }
/* Заголовок попапа "ПОСЛЕДНИЕ ТРЕКИ" */
.history-popup-title {
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.25); padding:2px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:4px;
}
/* Одна строка трека в истории */
.history-item { padding:7px 14px; cursor:pointer; transition:background .15s; }
.history-item:hover { background:rgba(255,255,255,0.06); }
/* Текст трека в строке истории */
.history-item-track {
  font-size:12px; color:rgba(255,255,255,0.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Текст когда история пустая */
.history-empty { padding:10px 14px; font-size:11px; color:rgba(255,255,255,0.2); text-align:center; }

/* ════════════════════════════════════════════════════
   СТАТУС-БАР — строка "● В ЭФИРЕ / ПАУЗА / ЗАГРУЗКА"
   ════════════════════════════════════════════════════ */
.status-bar { display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--sub); }
/* Маленькая точка индикатора слева от текста статуса */
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--sub); flex-shrink:0; transition:background .3s, box-shadow .3s; }
/* Когда играет — точка становится зелёной и мигает */
.live-dot.on { background:#ffffff; box-shadow:0 0 8px rgba(255,255,255,0.6); animation:blink 1.5s ease-in-out infinite; }

/* ════════════════════════════════════════════════════
   КНОПКА PLAY/PAUSE — круглая, градиент зелёный→фиолетовый
   Чтобы изменить размер — меняй width и height.
   ════════════════════════════════════════════════════ */
.btn-play {
  width:62px; height:62px; border-radius:14px; border:1px solid rgba(255,255,255,0.18); cursor:pointer;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(255,255,255,0.12);
  transition:transform .15s, box-shadow .15s, background .15s; flex-shrink:0;
}
.btn-play:hover { transform:scale(1.06); background:#ffffff; box-shadow:0 6px 28px rgba(255,255,255,0.22); }
.btn-play:active { transform:scale(0.94); background:rgba(255,255,255,0.85); }
/* Иконка — чёрная на белой кнопке */
.btn-play svg { fill:#000000; }

/* ════════════════════════════════════════════════════
   РЕГУЛЯТОР ГРОМКОСТИ — слайдер + иконка + число
   ════════════════════════════════════════════════════ */
.vol-row { display:flex; align-items:center; gap:10px; width:100%; }
.vol-icon { color:var(--sub); display:flex; align-items:center; flex-shrink:0; }
/* Стилизация слайдера (range input).
   --pct — CSS-переменная, задаётся через JS, показывает % заполнения.
   background: слева от бегунка — зелёный, справа — серый. */
input[type=range] {
  -webkit-appearance:none; appearance:none;
  height:3px; border-radius:2px; flex:1; outline:none; cursor:pointer;
  background:linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) var(--pct,10%), rgba(255,255,255,0.1) var(--pct,10%));
}
/* Кружок-бегунок на слайдере */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:#ffffff; cursor:pointer; box-shadow:0 0 8px rgba(255,255,255,0.4);
  transition:transform .15s;
}
/* При наведении бегунок увеличивается */
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.4); }
/* Число процентов справа от слайдера */
.vol-num { font-size:11px; color:var(--sub); width:26px; text-align:right; font-family:'Syne',sans-serif; }

/* ════════════════════════════════════════════════════
   МИНИ-БАР — свёрнутый плеер на мобиле
   ════════════════════════════════════════════════════ */
.mini-bar {
  display:none; /* скрыт на десктопе */
}

@media (max-width:768px) {
  /* Мини-бар — тонкая полоска снизу */
  .mini-bar {
    display:flex; align-items:center; gap:12px;
    position:fixed; bottom:0; left:0; right:0; z-index:101;
    padding:10px 16px max(12px, env(safe-area-inset-bottom));
    background:rgba(12,13,20,0.97);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-top:1px solid var(--border);
    cursor:pointer;
    transition:opacity .2s;
  }
  .mini-bar:active { opacity:0.8; }
  .mini-bar-icon {
    width:38px; height:38px; border-radius:10px;
    background:#111; flex-shrink:0; overflow:hidden; position:relative;
  }
  .mini-bar-icon img { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
  .mini-bar-info { flex:1; min-width:0; }
  .mini-bar-name {
    font-size:13px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mini-bar-track {
    font-size:11px; color:var(--sub);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-top:1px;
  }
  .mini-bar-play {
    width:36px; height:36px; border-radius:10px; border:none; cursor:pointer;
    background:#fff; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .mini-bar-play svg { fill:#000; }

  /* Плеер — выезжает снизу вверх */
  .player-main {
    position:fixed; left:0; right:0; z-index:200;
    bottom:0;
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.32,1,.32,1);
    flex:none; height:auto;
    padding:0;
    background:rgba(14,15,20,0.99);
    backdrop-filter:blur(32px);
    -webkit-backdrop-filter:blur(32px);
    border-radius:24px 24px 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,0.6);
    overflow:hidden;
  }
  /* Полоска-ручка убрана — вместо неё кнопка свернуть */
  .player-main::before { display:none; }
  /* Когда плеер открыт */
  .player-main.expanded {
    transform:translateY(0);
  }
  /* Карточка плеера — компактная, всё влезает на экран */
  .player-card {
    padding:36px 16px 16px;
    gap:10px; border-radius:0; max-width:100%;
  }
  /* Обложка на мобиле — скрыта */
  .artwork-wrap { display:none !important; }
  /* Кнопка свернуть — пилюля по центру верхушки плеера */
  .btn-collapse-player {
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:44px; height:24px; border:none; cursor:pointer;
    background:transparent; color:rgba(255,255,255,0.25);
    z-index:201; padding:0; transition:color .2s;
  }
  .btn-collapse-player:active { color:rgba(255,255,255,0.6); }

  .shell {
    flex-direction:column;
    height:100dvh;
    position:relative;
    overflow:hidden;
  }
  .bg-orbs { position:fixed; }
  .sidebar {
    width:100%;
    flex:1;
    min-height:0;
    border-right:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .sidebar-head { padding:16px 16px 0; flex-shrink:0; }
  .logo-wrap { margin-bottom:14px; }
  .station-list {
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:80px;
    box-sizing:border-box;
  }
  .player-glow { width:300px; height:300px; }
  .viz-wrap { display:none; }
  .station-name { font-size:15px; }
  .btn-play { width:50px; height:50px; border-radius:12px; }
  .btn-play svg { width:20px; height:20px; }
  .vol-row { gap:8px; }
  .status-bar { font-size:9.5px; }
  /* История треков на мобиле — модальное окно по центру */
  .history-popup {
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%);
    width:calc(100vw - 48px);
    max-width:360px;
    max-height:70vh;
    overflow-y:auto;
    min-width:0;
  }
  .history-item-track {
    white-space:normal;
    word-break:break-word;
    font-size:13px;
    line-height:1.4;
  }
}

/* ════════════════════════════════════════════════════
   АДАПТИВ ДЛЯ МОБИЛЬНЫХ (экраны ≤768px)
   ════════════════════════════════════════════════════ */

/* Для очень маленьких экранов ≤400px — ещё меньше отступы */
@media (max-width:400px) {
  .player-card { padding-left:12px; padding-right:12px; padding-bottom:16px; gap:12px; }
  .station-name { font-size:13px; }
}