.releases-page {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 26px 0 78px;
    color: #e1e1e1;
}

.releases-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 260px) minmax(160px, 210px) 44px auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}

.releases-toolbar label {
    min-width: 0;
    margin: 0;
}

.releases-search {
    position: relative;
}

.releases-search > i {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    color: #5f7a76;
    transform: translateY(-50%);
}

.releases-toolbar input,
.releases-toolbar select {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #425563;
    border-radius: 9px;
    background: #11151a;
    color: #e1e1e1;
}

.releases-toolbar input {
    padding-left: 40px;
}

.releases-toolbar button,
.releases-toolbar > a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #5f7a76;
    border-radius: 9px;
    background: #11151a;
    color: #2ad2c9;
    text-decoration: none;
}

.releases-toolbar input:focus,
.releases-toolbar select:focus,
.releases-toolbar button:focus-visible,
.releases-toolbar > a:focus-visible {
    border-color: #2ad2c9;
    outline: 2px solid rgba(42, 210, 201, .2);
    outline-offset: 2px;
}

.releases-back-link,
.release-card-footer a {
    color: #2ad2c9;
    text-decoration: none;
}

.releases-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #5f7a76;
    border-radius: 10px;
    white-space: nowrap;
}

.releases-back-link:hover,
.release-card-footer a:hover {
    color: #ff8d6d;
}

.releases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.release-card {
    overflow: hidden;
    border: 1px solid #5f7a76;
    border-radius: 16px;
    background: #0c0f12;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.release-card:hover {
    transform: translateY(-4px);
    border-color: #2ad2c9;
    box-shadow: 0 14px 32px #050607;
}

.release-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #425563;
}

.release-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.release-card:hover .release-card-media img {
    transform: scale(1.025);
}

.release-play {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #2ad2c9;
    border-radius: 50%;
    background: #050607;
    color: #e1e1e1;
}

.release-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #2ad2c9;
    font-size: 2rem;
}

.release-card-body {
    display: flex;
    min-height: 174px;
    flex-direction: column;
    padding: 16px;
}

.release-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #c6c9ca;
    font-size: .72rem;
}

.release-card-meta span {
    overflow: hidden;
    color: #01a982;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-card h2 {
    margin: 9px 0 5px;
    font-size: 1.05rem;
    line-height: 1.25;
}

.release-card h2 a {
    color: #e1e1e1;
    text-decoration: none;
}

.release-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #c6c9ca;
    font-size: .82rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.release-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #425563;
    font-size: .8rem;
    font-weight: 800;
}

.release-card-footer .release-card-action {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(42, 210, 201, .55);
    border-radius: 50%;
    background: rgba(42, 210, 201, .06);
    color: #2ad2c9;
    font-size: .9rem;
    line-height: 1;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.release-card-footer .release-card-action:hover {
    border-color: #01a982;
    background: rgba(1, 169, 130, .14);
    color: #2ad2c9;
}

.release-card-footer .release-card-action:focus-visible {
    outline: 2px solid #2ad2c9;
    outline-offset: 3px;
}

.release-card-footer .release-youtube {
    border-color: rgba(255, 141, 109, .7);
    background: rgba(255, 141, 109, .07);
    color: #ff8d6d !important;
}

html[data-theme="dark"] body.music-body .releases-back-link,
html[data-theme="dark"] body.music-body .release-card h2,
html[data-theme="dark"] body.music-body .release-card h2 a,
html[data-theme="dark"] body.music-body .release-card-footer a {
    color: #e1e1e1 !important;
    -webkit-text-fill-color: #e1e1e1 !important;
}

html[data-theme="dark"] body.music-body .release-card p,
html[data-theme="dark"] body.music-body .release-card-meta,
html[data-theme="dark"] body.music-body .release-card-meta time {
    color: #c6c9ca !important;
    -webkit-text-fill-color: #c6c9ca !important;
}

html[data-theme="dark"] body.music-body .release-card-meta span {
    color: #2ad2c9 !important;
    -webkit-text-fill-color: #2ad2c9 !important;
}

html[data-theme="dark"] body.music-body .release-youtube,
html[data-theme="dark"] body.music-body .release-youtube i {
    color: #ff8d6d !important;
    -webkit-text-fill-color: #ff8d6d !important;
}

html[data-theme="light"] body.music-body .releases-page {
    color: #172033 !important;
}

html[data-theme="light"] body.music-body .release-card,
html[data-theme="light"] body.music-body .releases-empty {
    border-color: #c6c9ca !important;
    background: #e7ecef !important;
    color: #172033 !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.music-body .releases-toolbar input,
html[data-theme="light"] body.music-body .releases-toolbar select,
html[data-theme="light"] body.music-body .releases-toolbar button,
html[data-theme="light"] body.music-body .releases-toolbar > a {
    border-color: #c6c9ca !important;
    background: #e7ecef !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

html[data-theme="light"] body.music-body .release-card:hover {
    border-color: #01a982 !important;
    background: #edf2f4 !important;
    box-shadow: 0 12px 26px rgba(66, 85, 99, .14) !important;
}

html[data-theme="light"] body.music-body .releases-empty h2,
html[data-theme="light"] body.music-body .release-card h2,
html[data-theme="light"] body.music-body .release-card h2 a,
html[data-theme="light"] body.music-body .release-card-footer a,
html[data-theme="light"] body.music-body .releases-back-link {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

html[data-theme="light"] body.music-body .releases-empty p,
html[data-theme="light"] body.music-body .release-card p,
html[data-theme="light"] body.music-body .release-card-meta,
html[data-theme="light"] body.music-body .release-card-meta time {
    color: #425563 !important;
    -webkit-text-fill-color: #425563 !important;
}

html[data-theme="light"] body.music-body .release-card-meta span {
    color: #008567 !important;
    -webkit-text-fill-color: #008567 !important;
}

html[data-theme="light"] body.music-body .release-card-footer,
html[data-theme="light"] body.music-body .releases-back-link {
    border-color: #5f7a76 !important;
}

.release-youtube {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #ff8d6d;
    border-radius: 50%;
    color: #ff8d6d !important;
}

.releases-empty {
    padding: 62px 20px;
    border: 1px dashed #425563;
    border-radius: 16px;
    background: #0c0f12;
    text-align: center;
}

.releases-empty > i {
    color: #5f7a76;
    font-size: 2rem;
}

.releases-empty h2 {
    margin: 14px 0 6px;
    color: #e1e1e1;
    font-size: 1.3rem;
}

.releases-empty p {
    margin: 0;
    color: #c6c9ca;
}

@media (max-width: 1200px) {
    .releases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .releases-toolbar { grid-template-columns: 1fr 1fr 44px auto; }
    .releases-search { grid-column: 1 / -1; }
    .releases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .releases-page { width: calc(100% - 24px); padding-top: 22px; }
    .releases-toolbar { grid-template-columns: 1fr 44px auto; }
    .releases-toolbar label { grid-column: 1 / -1; }
    .releases-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .release-card,
    .release-card-media img { transition: none; }
    .release-card:hover { transform: none; }
}