@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');
/* ВРЕМЕННО: тест Chakra Petch. Родной шрифт — вернуть вместе с font-family ниже:
@import url('https://fonts.googleapis.com/css2?family=Podkova:wght@400;700&display=swap');
*/

:root {
    --playerH: 92px;
    --sidebarW: 162px;
    /* скругление внутреннего угла «корпуса»: панель + бар — одна Г-образная деталь */
    --chromeR: 18px;
}

/* ===================== ПАЛИТРА (ламповая тема, по умолчанию) ===================== */
:root {
    --bg:#1a1410; --bg2:#2a1e14; --panel:#2c2016; --panel2:#3a2b1d; --panel3:#221913;
    --line:rgba(255,220,170,.10); --text:#f5e9d5; --muted:#cdb794; --muted2:#97815f;
    --accent:#ff9838; --accent2:#ffb86b; --yellow:#ffd27a; --glow:255,152,56;
    --page-bg: #17110a;
    --sidebar-bg: #221812;
    --bar-bg: #221812;
    --card-bg: #291f15;
    --card-active: #e5922f;
    --card-active-text: #351f0c;
    --panel-bg: #2a1e14;
    /* градиенты/акценты DEPTH-блока */
    --sidebar-grad-a: #261b14; --sidebar-grad-b: #1e150f;
    --card-grad-a: #2e2318;    --card-grad-b: #251b11;
    --card-active-grad-a: #f0a03d; --card-active-grad-b: #d9862a;
    --bar-grad-a: #281c14;     --bar-grad-b: #1f1610;
    --play-icon: #2a1808;
    --heart: #ff7d68;
    --card-inner-top: rgba(255,220,170,.07);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdb794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== ПАЛИТРА: «Матрица» (зелёная хакерская) ===================== */
:root[data-theme="matrix"] {
    --bg:#0a0f0a; --bg2:#101a10; --panel:#111c12; --panel2:#182a19; --panel3:#0d150d;
    --line:rgba(80,255,140,.14); --text:#c9f5ce; --muted:#84c48e; --muted2:#568a5e;
    --accent:#22ff66; --accent2:#7dffab; --yellow:#b6ff66; --glow:34,255,102;
    --page-bg: #070c07;
    --sidebar-bg: #0c130c;
    --bar-bg: #0c130c;
    --card-bg: #101c14;
    --card-active: #1fdd5c;
    --card-active-text: #04220e;
    --panel-bg: #101a10;
    --sidebar-grad-a: #0e170e; --sidebar-grad-b: #090f09;
    --card-grad-a: #121f15;    --card-grad-b: #0d1710;
    --card-active-grad-a: #2bf06c; --card-active-grad-b: #17c04d;
    --bar-grad-a: #0f1a0f;     --bar-grad-b: #080e08;
    --play-icon: #04220e;
    --heart: #22ff66;
    --card-inner-top: rgba(140,255,170,.08);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384c48e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== ПАЛИТРА: контрастная чёрно-белая ===================== */
:root[data-theme="mono"] {
    --bg:#000; --bg2:#0d0d0d; --panel:#111; --panel2:#1a1a1a; --panel3:#080808;
    --line:rgba(255,255,255,.28); --text:#fff; --muted:#c9c9c9; --muted2:#8f8f8f;
    --accent:#fff; --accent2:#e6e6e6; --yellow:#fff; --glow:255,255,255;
    --page-bg: #000;
    --sidebar-bg: #0a0a0a;
    --bar-bg: #0a0a0a;
    --card-bg: #0f0f0f;
    --card-active: #f2f2f2;
    --card-active-text: #000;
    --panel-bg: #0d0d0d;
    --sidebar-grad-a: #101010; --sidebar-grad-b: #050505;
    --card-grad-a: #141414;    --card-grad-b: #0c0c0c;
    --card-active-grad-a: #fff; --card-active-grad-b: #dedede;
    --bar-grad-a: #111;        --bar-grad-b: #060606;
    --play-icon: #000;
    --heart: #fff;
    --card-inner-top: rgba(255,255,255,.12);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== ПАЛИТРА: ледяная (полярный циан) ===================== */
:root[data-theme="ice"] {
    --bg:#10141c; --bg2:#171d2a; --panel:#1a2130; --panel2:#232d40; --panel3:#131823;
    --line:rgba(170,215,255,.13); --text:#e8eef8; --muted:#a5b4cc; --muted2:#6f7f9c;
    --accent:#5fd1ff; --accent2:#9ce2ff; --yellow:#ffe08a; --glow:95,209,255;
    --page-bg: #0d1119;
    --sidebar-bg: #121826;
    --bar-bg: #121826;
    --card-bg: #1c2333;
    --card-active: #4fc3f0;
    --card-active-text: #082330;
    --panel-bg: #171d2a;
    --sidebar-grad-a: #161d2c; --sidebar-grad-b: #0f141f;
    --card-grad-a: #1f283a;    --card-grad-b: #191f2d;
    --card-active-grad-a: #63ccf5; --card-active-grad-b: #3cb2e2;
    --bar-grad-a: #182031;     --bar-grad-b: #0f141f;
    --play-icon: #082330;
    --heart: #6fd6ff;
    --card-inner-top: rgba(190,225,255,.09);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ===================== ПАЛИТРА: фиолетовая (неон) ===================== */
:root[data-theme="violet"] {
    --bg:#191d36; --bg2:#232849; --panel:#252b4f; --panel2:#303761; --panel3:#1d2240;
    --line:rgba(170,180,255,.12); --text:#eef0ff; --muted:#a9b0d8; --muted2:#767ea8;
    --accent:#ff2e7d; --accent2:#ff6fa5; --yellow:#ffd27a; --glow:255,46,125;
    --page-bg: #151830;
    --sidebar-bg: #171b33;
    --bar-bg: #171b33;
    --card-bg: #32385f;
    --card-active: #ff2e7d;
    --card-active-text: #33091c;
    --panel-bg: #232849;
    --sidebar-grad-a: #1c2140; --sidebar-grad-b: #151830;
    --card-grad-a: #363d68;    --card-grad-b: #2e355c;
    --card-active-grad-a: #ff4f92; --card-active-grad-b: #e42571;
    --bar-grad-a: #1d2242;     --bar-grad-b: #151830;
    --play-icon: #38102a;
    --heart: #ff2e7d;
    --card-inner-top: rgba(190,200,255,.10);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


* { box-sizing: border-box; }

/* Мелкое зерно поверх всего интерфейса — убирает «пластиковую» гладкость.
   Инлайновый SVG feTurbulence, внешних файлов нет. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .05;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

body {
    margin: 0;
    min-height: 100vh;
    /* Свет «лампы» сверху + виньетка по низу поверх базового цвета */
    background:
        radial-gradient(1100px 700px at 22% -12%, rgba(var(--glow), .13), transparent 62%),
        radial-gradient(900px 500px at 88% 0%, rgba(var(--glow), .05), transparent 55%),
        radial-gradient(140% 90% at 50% 118%, rgba(0,0,0,.42), transparent 58%),
        var(--page-bg);
    background-attachment: fixed;
    color: var(--text);
    /* ВРЕМЕННО: тест Chakra Petch вместо "Podkova", serif.
       Кириллицы у Chakra Petch нет — русский текст падает на системный гротеск. */
    font-family: "Chakra Petch", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    overflow: hidden;
}

button,
input {
    font: inherit;
}

.shell {
    height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebarW) 1fr;
}

.sidebar {
    background: var(--sidebar-bg);
    padding: 26px 14px;
}

/* Стык сайдбара с контентом. Сплошную границу здесь ставить нельзя — она
   упрётся в дугу внутреннего угла и разрежет корпус. Поэтому два слоя:
   волосяная линия, которая ярче всего вверху (там же, где «лампа» светит
   на фон) и растворяется книзу, и мягкое затемнение, уходящее в контент. */
.sidebar::after {
    content: "";
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: calc(var(--playerH) + var(--chromeR));
    left: calc(var(--sidebarW) - 1px);
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(var(--glow), .20) 0,
        var(--line) 18%,
        rgba(255,255,255,.04) 55%,
        transparent 94%);
}

.sidebar::before {
    content: "";
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: calc(var(--playerH) + var(--chromeR));
    left: var(--sidebarW);
    width: 14px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
}

/* Тень бара — только над контентом: на сайдбар она заходить не должна,
   иначе поперёк корпуса ложится тёмная полоса и стык виден снова. */
.shell::before {
    content: "";
    position: fixed;
    z-index: 19;
    left: var(--sidebarW);
    right: 0;
    bottom: var(--playerH);
    height: 28px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.3));
}

/* Внутренний угол: квадрат корпуса, из которого вырезана четверть круга. */
.shell::after {
    content: "";
    position: fixed;
    z-index: 21;
    left: var(--sidebarW);
    bottom: var(--playerH);
    width: var(--chromeR);
    height: var(--chromeR);
    pointer-events: none;
    background: radial-gradient(circle var(--chromeR) at 100% 0,
        transparent 0 calc(var(--chromeR) - .5px),
        var(--bar-grad-a) var(--chromeR));
}

.logo {
    font-size: 28px;
    line-height: .86;
    font-weight: 700;
    margin: 0 14px 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.logo span { display: block; }
.logo .logoMark {
    display: block;
    width: 100%;
    height: auto;
    color: var(--text);
    opacity: .92;
}
.logo .pink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: rgba(var(--glow), .14);
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .16em;
}

.logo .pink::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: liveBlink 2.4s ease-in-out infinite;
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .logo .pink::before { animation: none; }
}

.nav {
    display: grid;
    gap: 10px;
}

.navBtn {
    width: 100%;
    border: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navIcon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .85;
}

.navBtn.active {
    color: #fff;
    background: rgba(var(--glow),.18);
    box-shadow: inset 3px 0 0 var(--accent);
}

.navBtn:hover { background: rgba(255,255,255,.06); }

.mobileTabs { display: none; }

.main {
    min-width: 0;
    height: 100%;
    overflow: auto;
    padding: 34px 34px 120px;
}

.main::-webkit-scrollbar { width: 12px; }
.main::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.24);
    border: 4px solid var(--bg2);
    border-radius: 99px;
}

.playlistTop {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.playlistTitle {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.playlistInfo {
    color: var(--muted2);
    font-size: 13px;
    margin-top: 4px;
}

.refreshBtn {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.07);
    color: var(--text);
    border-radius: 26px;
    padding: 8px 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.btnIcon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Заглушка-нота: размер задаётся от контейнера (barLogo / miniLogo / infoLogo) */
.noteIcon {
    width: 42%;
    height: 42%;
}

.favoriteBtn .heartIcon {
    width: 17px;
    height: 17px;
    display: block;
}

.closeInfoBtn svg {
    width: 20px;
    height: 20px;
}

.refreshBtn:hover { background: rgba(255,255,255,.12); }

.searchPanel {
    display: none;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    padding: 20px;
}

.searchPanel.active { display: block; }

.searchFields {
    display: grid;
    /* Форма занимает всю ширину, поэтому масштаб внутри поднят (ниже,
       блоком .searchPanel): иначе набранное слово в широком поле выглядит
       мелким, хотя кегль не менялся. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

/* select.searchSelect — специфичность выше .searchInput, чей шорткат
   background (ниже по файлу) иначе затирает background-image со стрелкой */
select.searchSelect {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 34px;
}

.searchSelect option {
    background: var(--panel);
    color: var(--text);
}

/* Специфичность выше, чем у .searchInput (width:100%), который идёт ниже по файлу */
.settingsRow .themeSelect {
    width: auto;
    min-width: 200px;
    flex-shrink: 0;
}

/* ===== Кастомная выпадалка (заменяет нативный select) ===== */
.dd {
    position: relative;
    min-width: 0;
}

.settingsRow .dd {
    flex: 0 0 auto;
    min-width: 200px;
}

.ddBtn {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0,0,0,.16);
    color: var(--text);
    font-size: 14px;
    padding: 0 12px 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.ddBtn:hover { border-color: rgba(var(--glow),.4); }
.dd.open .ddBtn { border-color: rgba(var(--glow),.55); }

.ddLabel {
    flex: 1;
    min-width: 0;   /* разрешить сжатие — иначе длинный текст распирает кнопку */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddChevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .15s ease;
}

.dd.open .ddChevron { transform: rotate(180deg); }

.ddPanel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 45;
    display: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    overflow: hidden;
}

.dd.open .ddPanel { display: block; }

.ddSearch {
    width: calc(100% - 16px);
    margin: 8px 8px 2px;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(0,0,0,.2);
    color: var(--text);
    font-size: 13px;
    padding: 0 10px;
    outline: none;
}

.ddSearch:focus { border-color: rgba(var(--glow),.45); }

.ddList {
    max-height: 300px;
    overflow: auto;
    padding: 6px;
}

.ddList::-webkit-scrollbar { width: 10px; }
.ddList::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border: 3px solid var(--panel);
    border-radius: 99px;
}

.ddItem {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddItem:hover { background: rgba(var(--glow),.18); }
.ddItem.selected { background: rgba(var(--glow),.3); }

.ddEmpty {
    color: var(--muted);
    padding: 10px 12px;
    font-size: 13px;
}

.searchField { min-width: 0; }

.searchField label {
    display: block;
    color: var(--muted2);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.searchInput {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(0,0,0,.16);
    color: var(--text);
    font-size: 14px;
    padding: 0 14px;
    outline: none;
}

.searchInput:focus {
    border-color: rgba(var(--glow),.55);
}

.searchBtn,
.loadMoreBtn {
    border: 1px solid rgba(var(--glow),.38);
    background: rgba(var(--glow),.24);
    color: var(--text);
    border-radius: 12px;
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.searchBtn:hover,
.loadMoreBtn:hover { background: rgba(var(--glow),.32); }

.searchBtn {
    background: linear-gradient(180deg, var(--card-active-grad-a), var(--card-active-grad-b));
    border-color: transparent;
    color: var(--card-active-text);
}

.searchBtn:hover {
    background: linear-gradient(180deg, var(--card-active-grad-a), var(--card-active-grad-b));
    filter: brightness(1.08);
}

.tagCloud { margin-top: 4px; }
.tagCloud:empty { display: none; }

.tagCloudLabel {
    color: var(--muted2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 10px 2px 8px;
}

.tagCloudChips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tagCloudChips.collapsed .tagChip.hidden { display: none; }

.tagChip {
    border: 1px solid transparent;
    background: rgba(255,255,255,.05);
    color: var(--muted2);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.tagChip:hover {
    background: rgba(var(--glow),.22);
    border-color: rgba(var(--glow),.4);
    color: var(--text);
}

.tagMoreChip {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--muted);
}

/* ---- масштаб внутри панели поиска ----
   Крупнее, чем те же элементы в настройках: там строка списка, здесь — форма
   во всю ширину раздела, и мелкий контроль в ней теряется. Всё scoped на
   .searchPanel, чтобы селекты в настройках остались прежними. */
.searchPanel { padding: 24px; }

.searchPanel .searchField label {
    font-size: 12.5px;
    margin-bottom: 8px;
}

.searchPanel .searchInput,
.searchPanel .ddBtn {
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
}

.searchPanel .searchInput { padding: 0 18px; }
.searchPanel .ddBtn { padding: 0 14px 0 18px; }

.searchPanel .searchBtn {
    min-height: 52px;
    border-radius: 14px;
    padding: 0 28px;
    font-size: 14px;
}

.searchPanel .tagCloudLabel {
    font-size: 12px;
    margin: 16px 2px 10px;
}

.searchPanel .tagCloudChips { gap: 9px; }

.searchPanel .tagChip {
    font-size: 13px;
    padding: 8px 16px;
}

.loadMoreWrap {
    display: none;
    justify-content: center;
    margin: 18px 0 0;
}

.loadMoreWrap.active { display: flex; }

/* ---- Settings ---- */
.settingsPanel {
    display: none;
    max-width: 1280px;
}

.settingsPanel.active { display: block; }

/* Две колонки — но колонками идут ГРУППЫ, а не отдельные строки: иначе
   непонятно, читать вниз или поперёк. Внутри группы порядок однозначный. */
.settingsGroups {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.settingsCol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 1180px) {
    .settingsGroups { flex-direction: column; }
    .settingsCol { width: 100%; }
}

/* Тот же материал, что у панели поиска: это тоже органы управления,
   а не содержимое — значит ниша, а не выступающая карточка. */
.settingsGroup {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(0,0,0,.20);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.34),
        0 1px 0 var(--card-inner-top);
    padding: 6px 20px 10px;
}

.settingsGroupTitle {
    margin: 16px 4px 4px;
    color: var(--muted2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.settingsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 4px;
    cursor: default;
}

.settingsRow + .settingsRow { border-top: 1px solid var(--line); }

.settingsRowText { min-width: 0; }

.settingsLabel {
    font-weight: 700;
    font-size: 16px;
}

.settingsDesc {
    color: var(--muted2);
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.4;
}

/* Контролы крупнее, но заметно скромнее, чем в поиске: здесь это строка
   списка, а не форма во всю ширину раздела. */
.settingsPanel .searchInput,
.settingsPanel .ddBtn {
    min-height: 46px;
    font-size: 15px;
}

.settingsPanel .settingsNote { font-size: 13px; }

.switchToggle {
    flex-shrink: 0;
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.08);
    padding: 0;
    cursor: pointer;
}

.switchThumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--muted);
}

.switchToggle.active {
    background: var(--accent);
    border-color: var(--accent);
}

.switchToggle.active .switchThumb {
    left: 24px;
    /* Не белым: в контрастной теме акцент сам белый, и белый бегунок на нём
       пропадал — тумблер выглядел сплошной таблеткой. Берём цвет, которым
       тема рисует значки поверх акцента. */
    background: var(--card-active-text);
}

.stationGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0;
    margin: 0;
}

.stationCard {
    position: relative;
    display: flex;
    width: 100%;
    /* высоты хватает на три строки названия — тогда ряды одинаковы по всей
       сетке, а не только внутри одного ряда */
    min-height: 212px;
    border: 0;
    border-radius: 24px;
    padding: 8px;
    cursor: pointer;
    color: var(--text);
    background: transparent;
    text-align: center;
}

.stationCardInner {
    position: relative;
    /* тянемся на всю высоту кнопки: без этого панель в карточке с коротким
       названием оказывалась ниже соседей по ряду */
    flex: 1;
    min-height: 196px;
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.03);
    padding: 18px 13px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.stationCard.active .stationCardInner {
    background: var(--card-active);
}

.stationCard.active .stationName {
    color: var(--card-active-text);
}

.stationCard.active .stationMeta {
    color: var(--card-active-text);
    opacity: .78;
}

.stationMiniLogo,
.barLogo {
    background: rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    font-weight: 700;
}

.stationMiniLogo {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    color: #fff;
    font-size: 22px;
}

.stationMiniLogo img,
.barLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stationName {
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.stationMeta {
    width: 100%;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.favoriteBtn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.58);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: transform .12s ease, color .12s ease;
}

.favoriteBtn:hover,
.favoriteBtn.active {
    color: var(--heart);
}

.favoriteBtn:active { transform: scale(.9); }

.cardInfoBtn {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.42);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: transform .12s ease, color .12s ease;
}

.cardInfoBtn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.cardInfoBtn:hover { color: var(--accent2); }
.cardInfoBtn:active { transform: scale(.9); }

.stationCard.active .cardInfoBtn { color: rgba(53,31,12,.55); }
.stationCard.active .cardInfoBtn:hover { color: var(--card-active-text); }

.empty {
    color: var(--muted);
    background: rgba(255,255,255,.06);
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 16px;
}

.playerBar {
    position: fixed;
    /* от самого левого края: бар и сайдбар — одна деталь, стыка между ними нет */
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--playerH);
    background: var(--bar-bg);
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 24px;
    /* position: fixed выше уже делает бар опорой для абсолютных полос */
    overflow: hidden;
    align-items: center;
    padding: 14px 28px 14px calc(var(--sidebarW) + 28px);
}

.barNow {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.barLogo {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    flex: 0 0 auto;
	cursor: pointer;
}

.barTitle {
    color: var(--accent);
    margin-top: -3px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barMeta {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transport {
    display: flex;
    align-items: center;
    gap: 12px;
}

.circleBtn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.circleBtn:hover { filter: brightness(1.08); }
.circleBtn:active,
button:active { transform: scale(.985); }
.circleBtn:active { transform: scale(.92); }


.playBarBtn {
    background: var(--accent);
}

.playIcon {
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 21px solid var(--play-icon);
    display: block;
    margin-left: 4px;
}

.pauseIcon {
    width: 20px;
    height: 22px;
    display: grid;
    grid-template-columns: 6px 6px;
    gap: 6px;
	margin-left: 1px;
}

.pauseIcon::before,
.pauseIcon::after {
    content: "";
    display: block;
    border-radius: 2px;
    background: var(--play-icon);
}

.infoOverlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.55);
}

.infoOverlay.active { display: grid; }

.infoPopup {
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: var(--panel-bg);
    padding: 22px;
}

.infoPopupHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.infoPopupTitle {
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.03em;
}

.closeInfoBtn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: var(--text);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    line-height: 1;
}

.infoMain {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.infoLogo {
    width: 150px;
    height: 150px;
    border-radius: 22px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.1);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--muted);
    font-size: 48px;
    font-weight: 700;
}

.infoLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infoStationName {
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
    margin-bottom: 16px;
}

.infoRows {
    display: grid;
    gap: 0;
}

.infoRow {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.infoRow:last-child {
    border-bottom: 0;
}

.infoLabel {
    color: var(--muted2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.infoValue {
    color: var(--text);
    font-size: 16px;
    word-break: break-word;
}

.infoValue.muted { color: var(--muted); }

.infoTags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.infoTag {
    display: inline-flex;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 5px 11px;
    color: var(--muted);
    font-size: 14px;
}

/* Громкость в плеер-баре (только ПК; на мобиле — в настройках) */
.volumeBar {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.volumeBar input { min-width: 0; accent-color: var(--accent); }

.volIcon { color: var(--muted); }

.volIcon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Громкость (в настройках) */
.volumeCtl {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 260px;
    min-width: 140px;
}

.volumeCtl input {
    flex: 1;
    min-width: 0;
    accent-color: var(--accent);
    height: 22px;
}

.volText {
    width: 44px;
    text-align: right;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    flex-shrink: 0;
}

/* Опасная кнопка (выключение) — фиксированный красный во всех темах */
.dangerBtn {
    border: 1px solid rgba(255,96,96,.4);
    background: rgba(255,70,70,.14);
    color: #ff8f86;
    border-radius: 26px;
    padding: 9px 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.dangerBtn:hover {
    background: rgba(255,70,70,.24);
    border-color: rgba(255,96,96,.6);
}

/* Попап подтверждения */
.confirmPopup {
    max-width: 420px;
    text-align: left;
}

.confirmTitle {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

.confirmText {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.confirmBtns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 980px) {
    :root {
        --sidebarW: 0px;
        --playerH: 84px;
    }

    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .shell::before, .shell::after { display: none; }

    .mobileTabs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin-bottom: 14px;
    }

    .mobileTab {
        border: 1px solid var(--line);
        background: rgba(255,255,255,.07);
        color: var(--muted);
        border-radius: 18px;
        padding: 10px 3px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tabIcon {
        width: 19px;
        height: 19px;
        display: block;
    }

    .mobileTab.active {
        color: #fff;
        background: rgba(var(--glow),.28);
        border-color: rgba(var(--glow),.45);
    }

    .searchFields { grid-template-columns: minmax(0, 1fr); }
    .searchBtn { width: 100%; }

    .playerBar {
        height: var(--playerH);
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 10px 14px;
        align-items: center;
        border-top: 1px solid var(--line);
    }

    .playerBar::before { left: 0; }

    .barNow { gap: 11px; }
    .barLogo { width: 50px; height: 50px; }
    .barTitle { font-size: 17px; line-height: 1.15; margin-top: 0; margin-bottom: 4px; }
    .barMeta { font-size: 12px; }
    .transport { gap: 10px; }
    .circleBtn { width: 50px; height: 50px; }

    .volumeBar { display: none; }

    .volumeCtl {
        flex: 1 1 auto;
        max-width: 240px;
    }

    .volText {
        width: auto;
        min-width: 38px;
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    body { overflow: auto; }
    .shell { height: auto; }
    .main { overflow: visible; padding: 18px 10px calc(var(--playerH) + 18px); }
    .stationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stationCard { min-height: 190px; padding: 0; }
    .stationCardInner { min-height: 190px;}
    .barTitle { font-size: 16px; }
    .circleBtn { width: 50px; height: 50px; }
    .infoOverlay { padding: 10px; }
    .infoPopup { border-radius: 24px; padding: 16px; }
    .infoMain { grid-template-columns: 1fr; }
    .infoLogo { width: 112px; height: 112px; border-radius: 18px; }
    .infoStationName { font-size: 26px; }
    .infoRow { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Состояние перехода (станция «настраивается») ---- */
@keyframes rpiSpin { to { transform: rotate(360deg); } }

@keyframes rpiPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.stationCard.switching .stationCardInner {
    background: var(--card-bg);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Спиннер — псевдоэлемент самой кнопки Info: кольцо задаётся через inset
   от её краёв, поэтому геометрически всегда концентрично иконке. */
.stationCard.switching .cardInfoBtn::after {
    content: "";
    position: absolute;
    inset: 5px;   /* 30px кнопки − 5px с каждой стороны = кольцо 20×20 */
    border: 2px solid rgba(255,255,255,.28);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rpiSpin .8s linear infinite;
    pointer-events: none;
}

.stationCard.switching .stationMeta {
    color: var(--accent2);
    animation: rpiPulse 1s ease-in-out infinite;
}

.barMeta.switching {
    color: var(--accent2);
    animation: rpiPulse 1s ease-in-out infinite;
}

.barLogo.switching {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 12px;
}


/* ============ DEPTH: тёплый свет, тени и «ламповые» свечения ============ */
.sidebar {
    /* градиент приходит к началу бара его же цветом — на стыке шва нет */
    background: linear-gradient(180deg,
        var(--sidebar-grad-a) 0,
        var(--bar-grad-a) calc(100% - var(--playerH)));
}

.logo .pink {
    text-shadow: 0 0 14px rgba(var(--glow), .55);
}

.navBtn.active { box-shadow: inset 3px 0 0 var(--accent); }

/* Панель поиска — не карточка, а утопленная в фон ниша: карточки выступают
   (тень наружу), форма вдавлена (тень внутрь). Разводим их материалом, а не
   только тоном, иначе при близких цветах они снова сольются. */
.searchPanel {
    background: rgba(0,0,0,.20);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.34),
        0 1px 0 var(--card-inner-top);
}

.stationCardInner {
    background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b));
    box-shadow:
        0 4px 14px rgba(0,0,0,.28),
        inset 0 1px 0 var(--card-inner-top);
    transition: transform .14s ease, box-shadow .14s ease;
}

.stationCard:hover .stationCardInner {
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px rgba(0,0,0,.38),
        inset 0 0 0 2px rgba(var(--glow),.45),
        inset 0 1px 0 var(--card-inner-top);
}

.stationCard.active .stationCardInner {
    background: linear-gradient(180deg, var(--card-active-grad-a), var(--card-active-grad-b));
    box-shadow:
        0 6px 22px rgba(var(--glow),.28),
        inset 0 1px 0 rgba(255,255,255,.22);
    animation: none;
}

.stationMiniLogo { box-shadow: inset 0 2px 6px rgba(0,0,0,.22); }

.playerBar {
    background: linear-gradient(180deg, var(--bar-grad-a), var(--bar-grad-b));
}

/* «Нить накала» по верху бара: тлеет на паузе, разгорается при игре */
.playerBar::before {
    content: "";
    position: absolute;
    /* строго внутри бара: у него теперь overflow: hidden из-за полос */
    top: 0;
    left: calc(var(--sidebarW) + var(--chromeR));
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--glow), .55) 30%,
        rgba(var(--glow), .55) 70%,
        transparent);
    opacity: .22;
    transition: opacity .8s ease;
    pointer-events: none;
}

@keyframes lampBreath {
    0%, 100% { opacity: .55; }
    50% { opacity: .95; }
}

.playerBar.playing::before {
    opacity: .85;
    animation: lampBreath 3.2s ease-in-out infinite;
}

.barLogo { box-shadow: inset 0 2px 6px rgba(0,0,0,.22); }

.playBarBtn {
    background: linear-gradient(180deg, var(--accent2), var(--accent));
    box-shadow: 0 0 16px rgba(var(--glow),.4), 0 3px 10px rgba(0,0,0,.3);
}

.playerBar.playing .playBarBtn {
    box-shadow: 0 0 24px rgba(var(--glow),.55), 0 3px 10px rgba(0,0,0,.3);
}

.volumeBar { box-shadow: none; }

.refreshBtn,
.mobileTab {
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.searchPanel {
    box-shadow: 0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,220,170,.05);
}

/* ---- VU-метр: цифровой эквалайзер (сегментированные LED-полоски) ---- */
/* Индикатор — фоновый слой плеер-бара: тянется от левого края во всю ширину
   под содержимым, поэтому места в вёрстке не занимает и ничего не двигает. */
.vuMeter {
    position: absolute;
    /* от левого края окна: бар — цельная деталь, обрывать полосы по сайдбару незачем */
    left: 0;
    right: 0;
    bottom: 0;
    /* на пике полосы подходят вплотную к нити накала, но не наезжают на неё:
       сама нить 2px по верхней кромке плюс пара пикселей воздуха */
    height: calc(100% - 4px);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    /* слева отступ ровно в просвет между полосами (gap): вплотную к кромке
       первая полоса читалась как обрезанная, а не как часть ряда */
    padding: 0 0 0 2px;
    opacity: .3;
    pointer-events: none;
    z-index: 0;
    /* к правому краю уводим в прозрачность, чтобы не спорить с громкостью */
    -webkit-mask-image: linear-gradient(90deg, #000 0 76%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 76%, transparent 100%);
}

/* содержимое бара — поверх индикатора */
.playerBar > *:not(.vuMeter) {
    position: relative;
    z-index: 1;
}

.vuBar {
    flex: 1 1 auto;
    min-width: 2px;
    height: var(--ih);
    border-radius: 1px;
    background: repeating-linear-gradient(
        to top,
        var(--accent) 0 3px,
        transparent 3px 4px
    );
    background-position: bottom;
    /* "падение" вниз при остановке — плавный переход height, когда её
       больше не перебивает анимация джиттера. */
    transition: height .6s cubic-bezier(.22, .9, .3, 1);
    /* еле заметное шумовое дрожание на дне — постоянно, отдельным свойством
       (transform), чтобы не конфликтовать с transition/анимацией height. */
    animation-name: vuNoise;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: calc(var(--ad) * .9);
    animation-delay: var(--dl);
}

@keyframes vuNoise {
    0%   { transform: scaleY(.7); }
    50%  { transform: scaleY(1.3); }
    100% { transform: scaleY(.7); }
}

.vuMeter.playing .vuBar {
    height: var(--bh);
    animation-name: vuJitter;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: calc(var(--ad) * .55);
    animation-delay: var(--dl);
}

@keyframes vuJitter {
    0%   { height: calc(var(--bh) * .55); transform: scaleY(1); }
    30%  { height: calc(var(--bh) * 1.25); transform: scaleY(1); }
    55%  { height: calc(var(--bh) * .7); transform: scaleY(1); }
    80%  { height: calc(var(--bh) * 1.1); transform: scaleY(1); }
    100% { height: calc(var(--bh) * .55); transform: scaleY(1); }
}

@media (max-width: 640px) {

}

/* ---- флаги стран (flag-icons, SVG — не зависят от emoji-шрифта ОС) ---- */
.fi {
    vertical-align: middle;
    border-radius: 2px;
    margin-right: 2px;
    margin-top: -2px;
}

/* ================= WEB-версия: дополнения ================= */

/* Живой индикатор: высоту полосок задаёт Web Audio (--bh из JS), поэтому
   анимация-имитация выключается, остаётся быстрый transition. */
.vuMeter.live.playing .vuBar {
    height: var(--bh);
    animation: none;
    transition: height .05s linear;
}

.settingsNote {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: .2px;
}

.settingsBtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.switchToggle.disabled,
.switchToggle:disabled {
    opacity: .45;
    pointer-events: none;
}

/* Всплывающее сообщение (экспорт/импорт избранного и прочие подсказки) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 104px;
    z-index: 60;
    transform: translate(-50%, 12px);
    max-width: min(90vw, 420px);
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.active {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 640px) {
    .toast { bottom: 130px; }
    .settingsBtns { justify-content: flex-start; }
}

/* Кубик рядом с play: включить случайную станцию, не заходя в раздел */
.shuffleBtn {
    width: 44px;
    height: 44px;
    background: var(--panel2);
    border: 1px solid var(--line);
    color: var(--muted);
}

.shuffleBtn svg {
    width: 20px;
    height: 20px;
}

.shuffleBtn:hover {
    color: var(--accent2);
    border-color: var(--accent2);
}

@media (max-width: 900px) {
    .shuffleBtn { width: 40px; height: 40px; }
    .shuffleBtn svg { width: 18px; height: 18px; }
}

/* Индикатор уехал в правый край бара; на узких экранах места ему нет */
@media (max-width: 900px) {
    .vuMeter { opacity: .22; }
}

/* Громкость в настройках нужна только там, где её нет в плеер-баре:
   до 900 px .volumeBar скрыт, шире — регулятор и так под рукой. */
@media (min-width: 901px) {
    .settingsRow.volumeRow { display: none; }
}

/* Пустое избранное с кнопкой импорта: во всю ширину сетки, в столбик */
.empty.withAction {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
}

.emptyHint {
    color: var(--muted2);
    font-size: 12.5px;
}