:root[data-theme="win98"] {
    --bg:#008080; --bg2:#c0c0c0; --panel:#c0c0c0; --panel2:#dfdfdf; --panel3:#808080;
    --line:#808080; --text:#000; --muted:#222; --muted2:#404040;
    
    --accent:#000080; --accent2:#1084d0; --yellow:#ffff00; --glow:0,0,128;
    --halo:0,128,128;
    --page-bg: #008080;
    --sidebar-bg: #c0c0c0;
    --bar-bg: #c0c0c0;
    --card-bg: transparent;
    --card-active: transparent;
    --card-active-text: #fff;
    --panel-bg: #c0c0c0;
    --sidebar-grad-a: #c0c0c0; --sidebar-grad-b: #c0c0c0;
    --card-grad-a: transparent; --card-grad-b: transparent;
    --card-active-grad-a: transparent; --card-active-grad-b: transparent;
    --bar-grad-a: #c0c0c0;     --bar-grad-b: #c0c0c0;
    --play-icon: #000;
    --heart: #c00000;
    --card-inner-top: transparent;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9h10l-5 6z' fill='%23000'/%3E%3C/svg%3E");
    --chromeR: 0px;

    --w98-font: Tahoma, "MS Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
    --w98-title: linear-gradient(90deg, #000080, #1084d0);
    

    --w98-raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --w98-sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    --w98-window: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
    --w98-field: inset -1px -1px #fff, inset 1px 1px #808080;
    
    --w98-dither: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px;
}


:root[data-theme="win98"] *,
:root[data-theme="win98"] *::before,
:root[data-theme="win98"] *::after {
    border-radius: 0 !important;
    transition: none !important;
}

:root[data-theme="win98"] body {
    font-family: var(--w98-font);
    background: var(--page-bg);
}
:root[data-theme="win98"] .backdrop,
:root[data-theme="win98"] body::before { display: none; }



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


:root[data-theme="win98"] .sidebar {
    background: #c0c0c0;
    box-shadow: var(--w98-window);
    padding: 3px 5px 12px 3px;
}
:root[data-theme="win98"] .logo {
    margin: 0 0 10px;
    padding: 14px 12px 12px;
    background: var(--w98-title);
    border-bottom: 0;
}
:root[data-theme="win98"] .logo .logoMark { color: #fff; opacity: 1; }


:root[data-theme="win98"] .logo .logoAntenna { fill: #fff; }
:root[data-theme="win98"] .logo .logoBall { animation-name: w98LogoBall; }
@keyframes w98LogoBall {
    0%, 100% { fill: #fff; }
    50% { fill: #7fb2ff; }
}
:root[data-theme="win98"] .nav { gap: 2px; }
:root[data-theme="win98"] .navBtn {
    color: #000;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 9px 10px;
}
:root[data-theme="win98"] .navIcon { opacity: 1; }
:root[data-theme="win98"] .navBtn:hover,
:root[data-theme="win98"] .navBtn.active {
    color: #fff;
    background: #000080;
    box-shadow: none;
}

:root[data-theme="win98"] .mobileTab {
    background: #c0c0c0;
    color: #000;
    border: 0;
    box-shadow: var(--w98-raised);
}
:root[data-theme="win98"] .mobileTab.active { background: var(--w98-dither); box-shadow: var(--w98-sunken); }



:root[data-theme="win98"] .playlistTop {
    align-items: center;
    margin-bottom: 0;
    padding: 5px 5px 5px 8px;
    background: var(--w98-title);
    box-shadow: 0 0 0 3px #c0c0c0, 0 0 0 4px #dfdfdf, 1px 1px 0 4px #0a0a0a;
    position: relative;
    z-index: 1;
}
:root[data-theme="win98"] .playlistTop > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
:root[data-theme="win98"] .playlistTitle {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}
:root[data-theme="win98"] .playlistInfo {
    margin: 0;
    font-size: 12px;
    color: #c8dcff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-theme="win98"] .sectionInfoIcon { display: none; }




:root[data-theme="win98"] .stationGrid,
:root[data-theme="win98"] .searchPanel.active,
:root[data-theme="win98"] .settingsPanel.active,
:root[data-theme="win98"] .aboutPanel.active {
    margin-top: 4px;
    box-shadow: 0 0 0 3px #c0c0c0, 1px 1px 0 4px #0a0a0a, var(--w98-field);
}
:root[data-theme="win98"] .searchPanel.active,
:root[data-theme="win98"] .settingsPanel.active,
:root[data-theme="win98"] .aboutPanel.active {
    background: #c0c0c0;
    color: #000;
    border: 0;
    padding: 16px 14px 14px;
    margin-bottom: 18px;
}






:root[data-theme="win98"] .main:has(.settingsPanel.active, .aboutPanel.active) {
    display: grid;
    grid-template-columns: fit-content(100%);
    align-content: start;
}


:root[data-theme="win98"] .searchPanel.active ~ .stationGrid { margin-top: 18px; }


:root[data-theme="win98"] .stationGrid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    padding: 10px 6px;
    background: #fff;
}
:root[data-theme="win98"] .stationCard {
    min-height: 0;
    padding: 4px;
    color: #000;
}
:root[data-theme="win98"] .stationCardInner,
:root[data-theme="win98"] .stationCard:hover .stationCardInner,
:root[data-theme="win98"] .stationCard.active .stationCardInner {
    min-height: 118px;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 4px 6px;
    background: transparent;
    box-shadow: none;
    transform: none;
    border: 0;
    animation: none;
}
:root[data-theme="win98"] .stationMiniLogo {
    position: relative;
    width: 48px;
    height: 48px;
    flex: none;
    color: #000;
    background: transparent;
    box-shadow: none;
}
:root[data-theme="win98"] .stationMiniLogo .signalIcon { opacity: .55; width: 70%; height: 70%; }
:root[data-theme="win98"] .stationName {
    margin: 0;
    padding: 1px 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    width: auto;
    max-width: 100%;
}
:root[data-theme="win98"] .stationMeta,
:root[data-theme="win98"] .stationCard.active .stationMeta {
    margin: 0;
    color: #404040;
    opacity: 1;
    font-size: 11px;
}


:root[data-theme="win98"] .stationCard.active .stationName {
    color: #fff;
    background: #000080;
    outline: 1px dotted #ffff80;
}
:root[data-theme="win98"] .stationCard.active .stationMiniLogo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(rgba(0,0,128,.55) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
}
:root[data-theme="win98"] .stationCard:hover .stationName { text-decoration: underline; }

:root[data-theme="win98"] .favoriteBtn,
:root[data-theme="win98"] .cardInfoBtn {
    top: 2px;
    width: 22px;
    height: 22px;
    color: #404040;
}
:root[data-theme="win98"] .favoriteBtn { right: 2px; }
:root[data-theme="win98"] .cardInfoBtn { left: 2px; }
:root[data-theme="win98"] .favoriteBtn .heartIcon,
:root[data-theme="win98"] .cardInfoBtn svg { width: 14px; height: 14px; }
:root[data-theme="win98"] .cardInfoBtn:hover,
:root[data-theme="win98"] .stationCard.active .cardInfoBtn,
:root[data-theme="win98"] .stationCard.active .cardInfoBtn:hover { color: #000080; }

:root[data-theme="win98"] .stationGrid .empty {
    color: #000;
    background: transparent;
    border: 0;
    box-shadow: none;
}


:root[data-theme="win98"] .playerBar {
    background: #c0c0c0;
    box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
}

:root[data-theme="win98"] .barNow {
    height: 58px;
    padding: 4px 12px 4px 6px;
    background: var(--w98-dither);
    box-shadow: var(--w98-sunken);
}
:root[data-theme="win98"] .barLogo {
    width: 44px;
    height: 44px;
    background: #fff;
    box-shadow: var(--w98-field);
}
:root[data-theme="win98"] .barTitle {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
}
:root[data-theme="win98"] .barMeta { font-size: 12px; color: #000; }




:root[data-theme="win98"] .playerBar .circleBtn { width: 48px; height: 38px; }
:root[data-theme="win98"] .circleBtn {
    color: #000;
    background: #c0c0c0;
    box-shadow: var(--w98-raised);
    filter: none;
}
:root[data-theme="win98"] .circleBtn:hover { filter: none; }
:root[data-theme="win98"] .circleBtn:active { transform: none; box-shadow: var(--w98-sunken); }
:root[data-theme="win98"] .circleBtn svg { width: 18px; height: 18px; }
:root[data-theme="win98"] .playerBar .playIcon {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 14px;
    margin-left: 3px;
}
:root[data-theme="win98"] .playerBar .pauseIcon {
    width: 14px;
    height: 16px;
    grid-template-columns: 5px 5px;
    gap: 4px;
}



:root[data-theme="win98"] .volumeBar {
    padding: 6px 10px;
    box-shadow: var(--w98-field);
}
:root[data-theme="win98"] .volIcon { color: #000; }
:root[data-theme="win98"] .volumeBar input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #fff;
    box-shadow: var(--w98-sunken);
    cursor: pointer;
}
:root[data-theme="win98"] .volumeBar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 21px;
    border: 0;
    background: #c0c0c0;
    box-shadow: var(--w98-raised);
}
:root[data-theme="win98"] .volumeBar input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 21px;
    border: 0;
    border-radius: 0;
    background: #c0c0c0;
    box-shadow: var(--w98-raised);
}
:root[data-theme="win98"] .volText { font-size: 12px; color: #000; }




@media (min-width: 981px) {
    :root[data-theme="win98"] .vuMeter {
        left: 12px;
        right: auto;
        width: calc(var(--sidebarW) - 24px);
        height: calc(var(--playerH) - 32px);
        bottom: calc(var(--safeB) + 16px);
        opacity: 1;
        background: #c0c0c0;
        box-shadow: var(--w98-field);
        -webkit-mask-image: none;
        mask-image: none;
    }
}
@media (max-width: 980px) {
    :root[data-theme="win98"] .vuMeter { opacity: .3; }
}


:root[data-theme="win98"] .infoPopup,
:root[data-theme="win98"] .confirmPopup {
    color: #000;
    background: #c0c0c0;
    border: 0;
    box-shadow: var(--w98-window), 2px 2px 0 rgba(0,0,0,.25);
    padding: 3px 3px 12px;
}
:root[data-theme="win98"] .infoPopupHead,
:root[data-theme="win98"] .confirmTitle {
    margin: 0 0 14px;
    padding: 3px 3px 3px 6px;
    background: var(--w98-title);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
:root[data-theme="win98"] .infoPopupTitle { color: #fff; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
:root[data-theme="win98"] .infoPopup > :not(.infoPopupHead),
:root[data-theme="win98"] .confirmPopup > :not(.confirmTitle) { margin-left: 12px; margin-right: 12px; }
:root[data-theme="win98"] .closeInfoBtn {
    width: 22px;
    height: 20px;
    color: #000;
    background: #c0c0c0;
    box-shadow: var(--w98-raised);
}
:root[data-theme="win98"] .closeInfoBtn svg { width: 13px; height: 13px; }
:root[data-theme="win98"] .closeInfoBtn:active { box-shadow: var(--w98-sunken); }
:root[data-theme="win98"] .infoLogo { background: #fff; box-shadow: var(--w98-field); }



:root[data-theme="win98"] .settingsGroup,
:root[data-theme="win98"] .aboutCard {
    position: relative;
    margin-top: 10px;
    padding: 14px 8px 6px;
    color: #000;
    background: transparent;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px #fff, 1px 1px #fff;
}
:root[data-theme="win98"] .settingsGroupTitle,
:root[data-theme="win98"] .aboutCardTitle {
    position: absolute;
    top: -8px;
    left: 8px;
    margin: 0;
    padding: 0 4px;
    background: #c0c0c0;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
:root[data-theme="win98"] .settingsRow { padding: 10px 4px; }
:root[data-theme="win98"] .settingsRow + .settingsRow {
    border-top: 1px solid #808080;
    box-shadow: inset 0 1px #fff;
}
:root[data-theme="win98"] .settingsLabel { font-size: 13px; font-weight: 700; }
:root[data-theme="win98"] .settingsDesc { font-size: 12px; color: #404040; }
:root[data-theme="win98"] .aboutLogo { color: #000080; }
:root[data-theme="win98"] .aboutTagline { color: #000; }
:root[data-theme="win98"] .aboutNote { color: #000; }


:root[data-theme="win98"] .searchInput,
:root[data-theme="win98"] .ddBtn,
:root[data-theme="win98"] .ddSearch {
    color: #000;
    background-color: #fff;
    border: 0;
    box-shadow: var(--w98-sunken);
    font-family: var(--w98-font);
}
:root[data-theme="win98"] .ddChevron { color: #000; }
:root[data-theme="win98"] .ddPanel { background: #fff; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }
:root[data-theme="win98"] .ddItem { color: #000; }
:root[data-theme="win98"] .ddItem:hover,
:root[data-theme="win98"] .ddItem.selected { color: #fff; background: #000080; }
:root[data-theme="win98"] .searchField label,
:root[data-theme="win98"] .tagCloudLabel {
    color: #000;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

:root[data-theme="win98"] .refreshBtn,
:root[data-theme="win98"] .searchBtn,
:root[data-theme="win98"] .loadMoreBtn,
:root[data-theme="win98"] .dangerBtn,
:root[data-theme="win98"] .tagChip,
:root[data-theme="win98"] .aboutMail {
    color: #000;
    background: #c0c0c0;
    border: 0;
    box-shadow: var(--w98-raised);
    font-family: var(--w98-font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    filter: none;
}
:root[data-theme="win98"] .refreshBtn { padding: 4px 10px; }
:root[data-theme="win98"] .refreshBtn:active,
:root[data-theme="win98"] .searchBtn:active,
:root[data-theme="win98"] .loadMoreBtn:active,
:root[data-theme="win98"] .tagChip:active,
:root[data-theme="win98"] .aboutMail:active { transform: none; box-shadow: var(--w98-sunken); }
:root[data-theme="win98"] .tagChip:hover { color: #000; background: #c0c0c0; }
:root[data-theme="win98"] .tagMoreChip { box-shadow: none; text-decoration: underline; color: #000080; background: transparent; }
:root[data-theme="win98"] .searchBtn { font-weight: 700; }


:root[data-theme="win98"] .switchToggle,
:root[data-theme="win98"] .switchToggle.active {
    width: 18px;
    height: 18px;
    border: 0;
    background: #fff;
    box-shadow: var(--w98-sunken);
}
:root[data-theme="win98"] .switchThumb { display: none; }
:root[data-theme="win98"] .switchToggle.active::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


:root[data-theme="win98"] .toast {
    color: #000;
    background: #ffffe1;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,.3);
    font-family: var(--w98-font);
    font-size: 12px;
}


:root[data-theme="win98"] .main::-webkit-scrollbar { width: 16px; }
:root[data-theme="win98"] .main::-webkit-scrollbar-track { background: var(--w98-dither); }
:root[data-theme="win98"] .main::-webkit-scrollbar-thumb,
:root[data-theme="win98"] .ddList::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 0;
    box-shadow: var(--w98-raised);
}


:root[data-theme="win98"] .showcase { background: var(--page-bg); }
:root[data-theme="win98"] .showcaseLogo { background: #fff; box-shadow: var(--w98-window); }
:root[data-theme="win98"] .showcaseTitle,
:root[data-theme="win98"] .showcaseClock { color: #fff; text-shadow: 1px 1px 0 #003c3c; }
:root[data-theme="win98"] .showcaseMeta,
:root[data-theme="win98"] .showcaseHistory { color: #e6ffff; }
:root[data-theme="win98"] .showcaseNav { background: #c0c0c0; color: #000; box-shadow: var(--w98-raised); }


:root[data-theme="win98"] .sleepBtn,
:root[data-theme="win98"] .sleepCancel,
:root[data-theme="win98"] .sleepPreset {
    border: 0;
    background: #c0c0c0;
    color: #000;
    box-shadow: var(--w98-raised);
    font-family: var(--w98-font);
    font-size: 12px;
}
:root[data-theme="win98"] .sleepBtn:hover,
:root[data-theme="win98"] .sleepCancel:hover,
:root[data-theme="win98"] .sleepPreset:hover { background: #c0c0c0; color: #000; }
:root[data-theme="win98"] .sleepBtn:active,
:root[data-theme="win98"] .sleepCancel:active,
:root[data-theme="win98"] .sleepPreset:active { box-shadow: var(--w98-sunken); }
:root[data-theme="win98"] .sleepTimer.on .sleepBtn { color: #000080; font-weight: 700; }