@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
    src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
    src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
    src: url("/static/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root[data-theme="dash"] {
    
    --ink: #121212;         
    --ink-2: #6e6e73;       
    --ink-3: #a1a1a6;       
    --canvas: #e6e6e6;      
    --surface: #ffffff;     
    --fill: #f2f2f2;        
    --frame: #1c1c1e;       
    --frame-2: #2c2c2e;     
    --frame-ink: #c7c7cc;   
    --brand: #d2282d;       
    --brand-ink: #ffffff;   
    --lilac: #9e90f2;
    --r-panel: 28px;
    --r-card: 24px;
    --r-ctl: 14px;
    --r-pill: 999px;
    --lift: 0 12px 28px -14px rgba(0,0,0,.22);
    --focus: 0 0 0 2px var(--ink);

    
    --bg: var(--canvas); --bg2: var(--surface); --panel: var(--surface); --panel2: var(--fill); --panel3: var(--canvas);
    --line: rgba(0,0,0,.07); --text: var(--ink); --muted: var(--ink-2); --muted2: var(--ink-3);
    --accent: var(--brand); --accent2: var(--lilac); --yellow: var(--brand); --glow: 210,40,45;
    --halo: 0,0,0;
    --page-bg: var(--frame);
    --sidebar-bg: var(--frame);
    --bar-bg: var(--frame);
    --card-bg: var(--surface);
    --card-active: var(--brand);
    --card-active-text: var(--brand-ink);
    --panel-bg: var(--surface);
    --sidebar-grad-a: var(--frame); --sidebar-grad-b: var(--frame);
    --card-grad-a: var(--surface); --card-grad-b: var(--surface);
    --card-active-grad-a: var(--brand); --card-active-grad-b: var(--brand);
    --bar-grad-a: var(--frame); --bar-grad-b: var(--frame);
    --play-icon: var(--brand-ink);
    --heart: var(--lilac);
    --card-inner-top: transparent;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --chromeR: 0px;
}

:root[data-theme="dash"] body {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--frame);
    color: var(--ink);
}

:root[data-theme="dash"] body::before,
:root[data-theme="dash"] .backdrop,
:root[data-theme="dash"] .sidebar::before,
:root[data-theme="dash"] .sidebar::after,
:root[data-theme="dash"] .shell::before,
:root[data-theme="dash"] .shell::after,
:root[data-theme="dash"] .playerBar::before { display: none; }





:root[data-theme="dash"] .main {
    align-self: start;
    height: calc(100vh - var(--barH) - 12px);
    margin: 12px 12px 0 0;
    padding: 32px 32px 40px;
    border-radius: var(--r-panel);
    background: var(--canvas);
}
:root[data-theme="dash"] .main::-webkit-scrollbar { width: 12px; }
:root[data-theme="dash"] .main::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.16);
    border: 4px solid var(--canvas);
    border-radius: var(--r-pill);
}


:root[data-theme="dash"] .sidebar { background: var(--frame); padding: 32px 16px; }
:root[data-theme="dash"] .logo { border-bottom: 0; margin: 0 8px 32px; padding-bottom: 0; }
:root[data-theme="dash"] .logo .logoMark { color: #fff; opacity: 1; }
:root[data-theme="dash"] .nav { gap: 8px; }
:root[data-theme="dash"] .navBtn {
    padding: 12px 16px;
    border-radius: var(--r-pill);
    color: var(--frame-ink);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
:root[data-theme="dash"] .navIcon { width: 20px; height: 20px; opacity: 1; }
:root[data-theme="dash"] .navBtn:hover { color: #fff; background: var(--frame-2); }
:root[data-theme="dash"] .navBtn.active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: none;
    font-weight: 600;
}

:root[data-theme="dash"] .mobileTab { background: var(--surface); color: var(--ink); border: 0; border-radius: var(--r-pill); }
:root[data-theme="dash"] .mobileTab.active { background: var(--frame); color: #fff; }


:root[data-theme="dash"] .playlistTop { align-items: flex-end; margin-bottom: 24px; }
:root[data-theme="dash"] .playlistTitle {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-transform: none;
    color: var(--ink);
}
:root[data-theme="dash"] .playlistInfo { margin-top: 8px; font-size: 13px; color: var(--ink-2); }



:root[data-theme="dash"] .refreshBtn,
:root[data-theme="dash"] .loadMoreBtn,
:root[data-theme="dash"] .aboutMail {
    padding: 12px 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}
:root[data-theme="dash"] .refreshBtn:hover,
:root[data-theme="dash"] .loadMoreBtn:hover { background: var(--surface); box-shadow: var(--lift); }
:root[data-theme="dash"] .searchBtn,
:root[data-theme="dash"] .searchBtn:hover {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    filter: none;
}


:root[data-theme="dash"] :is(.settingsGroup, .aboutCard, .searchPanel) :is(.refreshBtn, .loadMoreBtn, .aboutMail),
:root[data-theme="dash"] :is(.settingsGroup, .aboutCard, .searchPanel) :is(.refreshBtn, .loadMoreBtn):hover {
    background: var(--fill);
    box-shadow: none;
}

:root[data-theme="dash"] .dangerBtn,
:root[data-theme="dash"] .dangerBtn:hover {
    padding: 12px 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: #fdeceb;
    color: #d33a2c;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
:root[data-theme="dash"] .refreshBtn:focus-visible,
:root[data-theme="dash"] .loadMoreBtn:focus-visible,
:root[data-theme="dash"] .searchBtn:focus-visible { outline: none; box-shadow: var(--focus); }


:root[data-theme="dash"] .stationGrid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 16px;
}
:root[data-theme="dash"] .stationCard { min-height: 0; padding: 0; color: var(--ink); }
:root[data-theme="dash"] .stationCardInner {
    min-height: 208px;
    padding: 24px 16px 16px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
:root[data-theme="dash"] .stationCard:hover .stationCardInner {
    transform: translateY(-2px);
    box-shadow: var(--lift);
}
:root[data-theme="dash"] .stationCard.active .stationCardInner {
    background: var(--brand);
    box-shadow: none;
}
:root[data-theme="dash"] .stationCard:focus-visible { outline: none; }
:root[data-theme="dash"] .stationCard:focus-visible .stationCardInner { box-shadow: var(--focus); }
:root[data-theme="dash"] .stationMiniLogo {
    width: 72px;
    height: 72px;
    border-radius: var(--r-ctl);
    background: var(--fill);
    color: var(--ink-3);
    box-shadow: none;
}

:root[data-theme="dash"] .stationCard.active .stationMiniLogo { background: rgba(255,255,255,.16); color: var(--brand-ink); }
:root[data-theme="dash"] .stationMiniLogo .signalIcon { opacity: .6; }
:root[data-theme="dash"] .stationName {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}
:root[data-theme="dash"] .stationMeta,
:root[data-theme="dash"] .stationCard.active .stationMeta {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-2);
    opacity: 1;
}
:root[data-theme="dash"] .stationCard.active .stationMeta { color: rgba(255,255,255,.78); }
:root[data-theme="dash"] .favoriteBtn,
:root[data-theme="dash"] .cardInfoBtn {
    top: 12px;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: var(--fill);
    color: var(--ink-2);
}
:root[data-theme="dash"] .favoriteBtn { right: 12px; }
:root[data-theme="dash"] .cardInfoBtn { left: 12px; }
:root[data-theme="dash"] .favoriteBtn .heartIcon { width: 16px; height: 16px; }
:root[data-theme="dash"] .cardInfoBtn:hover { color: var(--ink); }
:root[data-theme="dash"] .favoriteBtn.active { color: var(--lilac); }
:root[data-theme="dash"] .stationCard.active .favoriteBtn,
:root[data-theme="dash"] .stationCard.active .favoriteBtn.active,
:root[data-theme="dash"] .stationCard.active .cardInfoBtn,
:root[data-theme="dash"] .stationCard.active .cardInfoBtn:hover { background: rgba(255,255,255,.18); color: var(--brand-ink); }

:root[data-theme="dash"] .empty {
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    color: var(--ink-2);
    padding: 24px;
}


:root[data-theme="dash"] .playerBar { background: var(--frame); box-shadow: none; }
:root[data-theme="dash"] .barLogo { width: 48px; height: 48px; border-radius: var(--r-ctl); background: var(--frame-2); color: var(--frame-ink); }
:root[data-theme="dash"] .barTitle { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
:root[data-theme="dash"] .barMeta { color: var(--ink-3); font-size: 13px; }
:root[data-theme="dash"] .circleBtn {
    background: var(--frame-2);
    color: #fff;
    box-shadow: none;
    filter: none;
}
:root[data-theme="dash"] .circleBtn:hover { background: #3a3a3c; }
:root[data-theme="dash"] .playBarBtn,
:root[data-theme="dash"] .playBarBtn:hover { background: var(--brand); }



:root[data-theme="dash"] .playerBar .circleBtn { width: 48px; height: 48px; }
:root[data-theme="dash"] .playerBar .playBarBtn { width: 56px; height: 56px; }
:root[data-theme="dash"] .volIcon { color: var(--frame-ink); }
:root[data-theme="dash"] .volumeBar input { accent-color: var(--brand); }
:root[data-theme="dash"] .volText { color: var(--ink-3); font-size: 13px; }


:root[data-theme="dash"] .searchPanel,
:root[data-theme="dash"] .settingsGroup,
:root[data-theme="dash"] .aboutCard {
    border: 0;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: none;
}
:root[data-theme="dash"] .settingsGroup { padding: 8px 24px 16px; }
:root[data-theme="dash"] .aboutCard { padding: 24px; }
:root[data-theme="dash"] .settingsGroupTitle,
:root[data-theme="dash"] .aboutCardTitle {
    margin: 16px 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--ink);
}
:root[data-theme="dash"] .aboutCardTitle { margin-top: 0; }
:root[data-theme="dash"] .settingsRow { padding: 16px 0; }
:root[data-theme="dash"] .settingsRow + .settingsRow { border-top: 1px solid var(--line); }
:root[data-theme="dash"] .settingsLabel { font-size: 15px; font-weight: 600; }
:root[data-theme="dash"] .settingsDesc { font-size: 13px; color: var(--ink-2); }
:root[data-theme="dash"] .aboutLogo { color: var(--ink); }
:root[data-theme="dash"] .aboutTagline { font-size: 17px; color: var(--ink-2); }
:root[data-theme="dash"] .aboutNote { color: var(--ink-2); }


:root[data-theme="dash"] .searchInput,
:root[data-theme="dash"] .ddBtn,
:root[data-theme="dash"] .ddSearch {
    border: 0;
    border-radius: var(--r-ctl);
    background-color: var(--fill);
    color: var(--ink);
    box-shadow: none;
}
:root[data-theme="dash"] .searchInput:focus,
:root[data-theme="dash"] .ddSearch:focus,
:root[data-theme="dash"] .dd.open .ddBtn,
:root[data-theme="dash"] .ddBtn:focus-visible { outline: none; box-shadow: var(--focus); }
:root[data-theme="dash"] .ddBtn:hover { border-color: transparent; }
:root[data-theme="dash"] .searchInput::placeholder { color: var(--ink-3); }
:root[data-theme="dash"] .ddChevron { color: var(--ink); }
:root[data-theme="dash"] .ddPanel {
    border: 0;
    border-radius: var(--r-ctl);
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
}
:root[data-theme="dash"] .ddItem { border-radius: var(--r-ctl); color: var(--ink); }
:root[data-theme="dash"] .ddItem:hover { background: var(--fill); }
:root[data-theme="dash"] .ddItem.selected { background: var(--brand); color: var(--brand-ink); }
:root[data-theme="dash"] .searchField label,
:root[data-theme="dash"] .tagCloudLabel {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
}
:root[data-theme="dash"] .tagChip {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--fill);
    color: var(--ink);
    font-weight: 500;
}
:root[data-theme="dash"] .tagChip:hover { background: var(--ink); color: #fff; border-color: transparent; }
:root[data-theme="dash"] .tagMoreChip { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }


:root[data-theme="dash"] .switchToggle { border: 0; background: #e3e3e6; }
:root[data-theme="dash"] .switchToggle.active { background: var(--ink); }
:root[data-theme="dash"] .switchThumb,
:root[data-theme="dash"] .switchToggle.active .switchThumb { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }


:root[data-theme="dash"] .infoOverlay { background: rgba(20,20,22,.4); backdrop-filter: blur(6px); }
:root[data-theme="dash"] .infoPopup,
:root[data-theme="dash"] .confirmPopup {
    border: 0;
    border-radius: var(--r-panel);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

:root[data-theme="dash"] .infoPopupTitle {
    color: var(--ink-2);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
}
:root[data-theme="dash"] .infoStationName {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}
:root[data-theme="dash"] .closeInfoBtn { background: var(--fill); color: var(--ink); }


:root[data-theme="dash"] .infoTag {
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--fill);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}
:root[data-theme="dash"] .infoLogo { border-radius: var(--r-ctl); background: var(--fill); }

:root[data-theme="dash"] .toast {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--frame);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}


:root[data-theme="dash"] .showcase { background: var(--frame); }
:root[data-theme="dash"] .showcaseTitle { color: #fff; font-weight: 700; letter-spacing: -.03em; }
:root[data-theme="dash"] .showcaseMeta { color: var(--ink-3); }
:root[data-theme="dash"] .showcaseClock { color: #fff; font-weight: 600; letter-spacing: -.02em; }
:root[data-theme="dash"] .showcaseHistory { color: var(--ink-2); }
:root[data-theme="dash"] .showcaseLogo { border-radius: var(--r-panel); background: var(--frame-2); }
:root[data-theme="dash"] .showcaseNav { background: var(--frame-2); color: #fff; }



:root[data-theme="dash"] .showcaseBrandMark { color: #fff; }
:root[data-theme="dash"] .sleepBtn,
:root[data-theme="dash"] .sleepCancel,
:root[data-theme="dash"] .sleepPreset {
    border: 0;
    border-radius: var(--r-pill);
    background: var(--frame-2);
    color: var(--frame-ink);
}
:root[data-theme="dash"] .sleepBtn:hover,
:root[data-theme="dash"] .sleepCancel:hover,
:root[data-theme="dash"] .sleepPreset:hover { background: #3a3a3c; color: #fff; }
:root[data-theme="dash"] .sleepTimer.on .sleepBtn { color: var(--brand); }


@media (max-width: 980px) {
    
    :root[data-theme="dash"] .main {
        height: calc(100vh - var(--barH) - 8px);
        height: calc(100dvh - var(--barH) - 8px);
        margin: 8px 8px 0;
        padding: 24px 16px 32px;
        border-radius: var(--r-card);
    }
    :root[data-theme="dash"] .playlistTitle { font-size: 32px; }
    :root[data-theme="dash"] .stationGrid {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        gap: 12px;
    }
}







@media (max-width: 640px) {
    :root[data-theme="dash"] .main {
        height: auto;
        min-height: calc(100vh - 16px);
        min-height: calc(100dvh - 16px);
        margin: 8px;
        padding: 24px 16px calc(var(--barH) + 24px);
    }
}