body {
    font-family: 'Inter', sans-serif;
    background-color: #121212;
    color: #E0E0E0;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.font-mono {
    font-family: 'Roboto Mono', monospace;
}
/* Стили для кастомного скроллбара */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1f1f1f;
}
::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* Анимация для активного жанра */
.genre-menu a.active::after {
    transform: scaleX(1);
}
.genre-menu a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #1DB954;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: center;
}
/* Стеклянные плитки станций (Glassmorphism) */
.station-card {
    background: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 0.75rem; /* 12px */
}
.station-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    background: rgba(45, 45, 45, 0.65);
}
.station-card.active {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.6), 0 0 8px rgba(0, 255, 255, 0.3);
    transform: translateY(-5px) scale(1.02);
}
/* Анимация для логотипа */
@keyframes logo-neon-pulse {
    0%, 100% {
        text-shadow: 0 0 4px #ff0000, 0 0 8px #ff4500;
    }
    50% {
        text-shadow: 0 0 8px #ff4500, 0 0 16px #ff8c00;
    }
}
.logo-animated {
    animation: logo-neon-pulse 3s ease-in-out infinite;
}
/* Стили для плеера и анимация кнопок */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #1DB954;
    cursor: pointer;
    border-radius: 50%;
}
.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #1DB954;
    cursor: pointer;
    border-radius: 50%;
}
#play-pause-btn, #next-btn, #prev-btn {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#play-pause-btn:active {
    transform: scale(0.9);
    box-shadow: 0 0 15px rgba(29, 185, 84, 0.5);
}
#next-btn:active, #prev-btn:active {
    transform: scale(0.85);
}
/* Кнопка "Наверх" */
#scroll-to-top {
    background: rgba(29, 185, 84, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    opacity: 0;
    transform: translateX(100px); /* Start off-screen */
}
#scroll-to-top.show {
    opacity: 1;
    transform: translateX(0);
}
#scroll-to-top:hover {
    background: rgba(29, 185, 84, 0.5);
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}
/* Класс для скрытия/показа */
.hidden {
    display: none;
}
/* --- СВЕТЛАЯ ТЕМА --- */
body.light-theme {
    background-color: #f0f2f5;
    color: #1c1e21;
}
.light-theme header {
    background-color: rgba(255, 255, 255, 0.8);
}
.light-theme footer {
     background-color: #ffffff;
     box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}
.light-theme .border-b.border-gray-800 {
    border-color: #e0e0e0;
}
.light-theme .logo-animated,
.light-theme .text-white,
.light-theme #player-station-name,
.light-theme h2#current-section-title {
    color: #1c1e21;
}
.light-theme .text-cyan-300 {
    color: #007bff;
    text-shadow: none;
}
.light-theme .logo-animated,
.light-theme .fa-broadcast-tower,
.light-theme span.text-sm.font-normal.ml-2 {
    text-shadow: none !important;
}
.light-theme .genre-menu a,
.light-theme #favorites-tab-btn,
.light-theme #theme-toggle-btn {
    color: #555;
}
.light-theme .genre-menu a:hover,
.light-theme #favorites-tab-btn:hover,
.light-theme #theme-toggle-btn:hover {
    color: #000;
}
.light-theme .genre-menu a.active {
    color: #1DB954;
}
.light-theme .station-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.light-theme .station-card:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.light-theme .station-card.active {
    border-color: #1DB954;
    box-shadow: 0 0 8px rgba(29, 185, 84, 0.4);
}
.light-theme .station-card h4 {
    color: #1c1e21;
}
.light-theme .station-card p,
.light-theme #player-station-genre,
.light-theme .fa-volume-down,
.light-theme .fa-volume-up,
.light-theme #prev-btn,
.light-theme #next-btn {
    color: #65676b;
}
.light-theme #prev-btn:hover,
.light-theme #next-btn:hover {
    color: #1c1e21;
}
.light-theme .volume-slider {
    background: #ccd0d5;
}
.light-theme #favorite-btn {
    color: #65676b;
}
.light-theme #favorite-btn:hover {
    color: #1DB954;
}
.light-theme #scroll-to-top {
    background: rgba(40, 40, 40, 0.8);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.light-theme #scroll-to-top:hover {
    background: rgba(20, 20, 20, 1);
}
.light-theme ::-webkit-scrollbar-track {
    background: #e9e9e9;
}
.light-theme ::-webkit-scrollbar-thumb {
    background: #b0b0b0;
}
.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #999;
}