/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}

body {
    background-color: #181818;
    color: #e0e0e0;
    line-height: 1.6;
}

header {
    background: linear-gradient(135deg, #2a2a2a, #ef4444);
    color: #fff;
    text-align: center;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

header .header-icon {
    width: 32px;
    height: 32px;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

header a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
    font-weight: bold;
    transition: color 0.3s;
}

header a:hover {
    color: #ef4444;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Топ-4 треков */
.top-tracks {
    margin-bottom: 2rem;
}

.top-tracks h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-align: center;
}

.top-tracks .no-tracks-placeholder {
    text-align: center;
    color: #b3b3b3;
    font-size: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #282828;
    border-radius: 8px;
}

/* Свежие релизы */
.new-releases {
    margin-bottom: 2rem;
}

.new-releases h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-align: center;
}

.new-releases .no-releases-placeholder {
    text-align: center;
    color: #b3b3b3;
    font-size: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background: #282828;
    border-radius: 8px;
}

.new-releases .release-card:not(.upcoming) {
    border: 2px solid #4CAF50;
    box-shadow: 0 0 15px #4CAF50, 0 0 30px #4CAF50;
}

/* Витрина предстоящих релизов */
.upcoming-releases {
    margin-bottom: 2rem;
}

.upcoming-releases h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-align: center;
}

/* Витрина артистов */
.artist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.artist-card {
    display: flex;
    background: #282828;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    flex-direction: row;
}

.artist-profile {
    flex: 1;
    padding: 1.5rem;
    text-align: center;
}

.artist-profile img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.artist-profile h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.artist-profile p {
    color: #b3b3b3;
    margin-bottom: 0.5rem;
}

.artist-releases {
    flex: 1;
    padding: 1.5rem;
    background: #202020;
}

.release-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
    margin-top: 1rem;
}

.releases .release-grid {
    grid-template-columns: repeat(3, 1fr);
}

.release-card {
    background: #303030;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s;
}

.release-card:hover {
    transform: translateY(-5px);
}

.release-card[data-top-month="true"] {
    border: 2px solid #FF9800;
    box-shadow: 0 0 15px #FF9800, 0 0 30px #FF9800;
}

.release-card.upcoming {
    border: 2px solid #ef4444;
    box-shadow: 0 0 15px #ef4444, 0 0 30px #ef4444;
}

.releases .release-card[data-latest="true"]:not(.upcoming):not([data-top-month="true"]) {
    border: 2px solid #4CAF50;
    box-shadow: 0 0 15px #4CAF50, 0 0 30px #4CAF50;
}

.release-card img {
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.release-card h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.release-card p {
    color: #b3b3b3;
    font-size: 0.9rem;
}

.play-btn {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0.5rem 0;
    color: #ef4444;
    font-size: 1.2rem;
}

.play-btn:hover {
    color: #f87171;
}

.all-releases-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: #ef4444;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.all-releases-btn:hover {
    background: #b91c1c;
}

.bandlink-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    color: #ef4444;
    text-decoration: none;
}

.bandlink-icon {
    width: 41px;
    height: 41px;
    margin-right: 0.5rem;
}

.bandlink-text {
    font-size: 1rem;
    font-weight: bold;
}

a {
    color: #ef4444;
    text-decoration: none;
}

a:hover {
    color: #f87171;
}

/* Фото артиста в artist_releases.php */
.artist-photo {
    max-width: 100px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Аудиоплеер */
.audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #282828;
    padding: 1rem;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.audio-player.hidden {
    display: none;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 800px;
    width: 100%;
    flex-wrap: wrap;
}

.player-cover {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

#prev-btn, #play-pause-btn, #next-btn, #repeat-btn, #close-player-btn, .close-label-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #ef4444;
}

#prev-btn:hover, #play-pause-btn:hover, #next-btn:hover, #repeat-btn:hover, #close-player-btn:hover, .close-label-btn:hover {
    color: #f87171;
}

.close-label-btn {
    font-weight: bold;
    text-transform: uppercase;
}

.repeat-one {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: #fff;
}

#track-title {
    flex: 1;
    font-size: 1rem;
}

#track-title .track-artist, #track-title .track-title {
    color: #fff;
}

#track-title .track-artist:hover, #track-title .track-title:hover {
    color: #f87171;
}

#progress-bar, #volume-bar {
    width: 100px;
    cursor: pointer;
}

#progress-bar {
    flex: 2;
}

#track-time {
    font-size: 0.9rem;
    color: #b3b3b3;
    white-space: nowrap;
}

/* Информация об артисте */
.artist-info {
    text-align: center;
    margin-bottom: 2rem;
}

.artist-info h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.artist-info p {
    color: #b3b3b3;
    font-size: 1rem;
}

/* Фиксированный футер для artist_releases.php */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    z-index: 999;
    text-align: center;
}

.fixed-footer .back-btn {
    background: #ef4444;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background 0.3s;
}

.fixed-footer .back-btn:hover {
    background: #b91c1c;
}

/* Админка */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: #282828;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #3a3a3a;
}

th {
    background: #ef4444;
    color: #fff;
}

td .bandlink-container {
    justify-content: start;
}

form {
    background: #282828;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    margin: 2rem auto;
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #fff;
}

form input, form select, form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    background: #202020;
    color: #e0e0e0;
}

form select[multiple] {
    height: 100px;
}

form textarea {
    height: 100px;
}

form button {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}

form button:hover {
    background: #b91c1c;
}

.login-form {
    max-width: 400px;
    margin: 5rem auto;
}

.error {
    color: #ff4d4d;
    margin-bottom: 1rem;
}

.success {
    color: #4caf50;
    margin-bottom: 1rem;
}

/* Футер */
footer {
    text-align: center;
    padding: 1rem;
    background: #202020;
    color: #b3b3b3;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

footer a {
    color: #ef4444;
}

footer a:hover {
    color: #f87171;
}

/* Адаптивность */
@media (max-width: 768px) {
    .artist-card {
        flex-direction: column;
    }

    .artist-profile, .artist-releases {
        flex: none;
        width: 100%;
    }

    .artist-profile img {
        max-width: 150px;
    }

    .release-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .releases .release-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .release-card img {
        max-width: 100px;
    }

    .artist-photo {
        max-width: 80px;
    }

    header {
        flex-direction: column;
        gap: 0.5rem;
    }

    header .header-icon {
        width: 24px;
        height: 24px;
    }

    header h1 {
        font-size: 2rem;
    }

    header a {
        display: block;
        margin: 0.5rem 0;
    }

    .artist-info h2 {
        font-size: 1.5rem;
    }

    .artist-info p {
        font-size: 0.9rem;
    }

    .top-tracks h2, .new-releases h2, .upcoming-releases h2 {
        font-size: 1.5rem;
    }

    .player-controls {
        gap: 0.3rem;
    }

    .player-cover {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .artist-profile img {
        max-width: 120px;
    }

    .release-grid {
        grid-template-columns: 1fr;
    }

    .releases .release-grid {
        grid-template-columns: 1fr;
    }

    .release-card img {
        max-width: 80px;
    }

    .release-card h5 {
        font-size: 1rem;
    }

    .release-card p {
        font-size: 0.8rem;
    }

    .play-btn {
        font-size: 1rem;
    }

    .all-releases-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    .bandlink-icon {
        width: 32px;
        height: 32px;
    }

    .bandlink-text {
        font-size: 0.9rem;
    }

    .artist-photo {
        max-width: 60px;
    }

    .audio-player {
        padding: 0.5rem;
    }

    .player-controls {
        gap: 0.3rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .player-cover {
        width: 30px;
        height: 30px;
    }

    #track-title {
        font-size: 0.9rem;
    }

    #progress-bar {
        width: 60px;
    }

    #volume-bar {
        display: none;
    }

    #prev-btn, #play-pause-btn, #next-btn, #repeat-btn, #close-player-btn, .close-label-btn {
        font-size: 1rem;
    }

    .close-label-btn {
        font-size: 0.7rem;
    }

    #track-time {
        font-size: 0.8rem;
    }

    .repeat-one {
        font-size: 0.6rem;
    }

    .fixed-footer .back-btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    .top-tracks .no-tracks-placeholder, .new-releases .no-releases-placeholder {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
}

/* Plyr кастомизация */
.plyr {
    max-width: 100%;
    margin: 0 auto;
}

.plyr__control--overlaid {
    background: #ef4444;
}

.plyr--audio .plyr__controls {
    background: #282828;
    color: #fff;
}

.plyr__control {
    color: #ef4444;
}

.plyr__control:hover {
    color: #f87171;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 800px;
    width: 100%;
    flex-wrap: wrap;
}

.player-cover {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}

#track-title {
    flex: 1;
    font-size: 1rem;
}

#track-title .track-artist, #track-title .track-title {
    color: #fff;
}

#track-title .track-artist:hover, #track-title .track-title:hover {
    color: #f87171;
}

#close-player-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #ef4444;
}

#close-player-btn:hover {
    color: #f87171;
}

@media (max-width: 480px) {
    .player-controls {
        gap: 0.5rem;
    }

    .player-cover {
        width: 40px;
        height: 40px;
    }

    .plyr {
        font-size: 0.8rem;
    }

    #track-title {
        font-size: 0.9rem;
    }

    #close-player-btn {
        font-size: 1rem;
    }
}