.library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    gap: 0;
    align-items: start;
    transition: grid-template-columns .45s cubic-bezier(.2,.8,.2,1), gap .45s ease;
}

.library-layout.player-open {
    grid-template-columns: minmax(0, 70fr) minmax(300px, 30fr);
    gap: 22px;
}

.track-list {
    min-width: 0;
    transition: box-shadow .4s ease;
}

.track-row {
    grid-template-columns: minmax(220px, 1fr) minmax(130px, 190px) 110px 100px 80px 82px;
}

.track-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.track-actions form {
    margin: 0;
}

.track-actions button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #403b4c;
    border-radius: 50%;
    background: #241a35;
    color: #d9d4df;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.track-actions button:hover {
    transform: translateY(-2px);
}

.track-play:hover {
    border-color: #ff2d95 !important;
    background: rgba(255, 45, 149,.16) !important;
    color: #ff2d95 !important;
}

.track-delete:hover {
    border-color: #ff536d !important;
    color: #ff536d !important;
}

.audio-player {
    position: sticky;
    top: 18px;
    min-width: 0;
    padding: 34px 28px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: radial-gradient(circle at 50% 12%,rgba(255, 45, 149,.16),transparent 35%),#170f26;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transform: translateX(45px) scale(.96);
    overflow: hidden;
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .35s;
}

.player-open .audio-player {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.player-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid #403b4c;
    border-radius: 50%;
    background: #241a35;
    color: #aaa5b4;
    font-size: 22px;
    cursor: pointer;
}

.player-art {
    width: 170px;
    height: 170px;
    margin: 8px auto 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(#ff2d95,#7b32ef,#22d3ee,#ff2d95);
    box-shadow: 0 0 45px rgba(255, 45, 149,.2);
}

.player-art::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: repeating-radial-gradient(circle,#1e1530 0 8px,#120c1c 9px 12px);
}

.player-art span {
    width: 48px;
    height: 48px;
    z-index: 1;
    border-radius: 50%;
    background: #ff2d95;
}

.player-art i {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #170f26;
}

.player-art.playing {
    animation: player-spin 5s linear infinite;
}

@keyframes player-spin {
    to { transform: rotate(360deg); }
}

.audio-player h3 {
    margin: 12px 0 7px;
    font: 600 24px Inter;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player > p {
    color: #858092;
    font-size: 12px;
}

.player-timeline {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-top: 27px;
    color: #858092;
    font: 500 10px JetBrains Mono;
}

.player-timeline input,
.player-volume input {
    width: 100%;
    accent-color: #ff2d95;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
}

.player-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid #403b4c;
    border-radius: 50%;
    background: #241a35;
    color: #fff;
    cursor: pointer;
}

.player-controls .player-toggle {
    width: 60px;
    height: 60px;
    border: 0;
    background: linear-gradient(135deg,#ff2d95,#9d32ef);
    box-shadow: 0 8px 30px rgba(255, 45, 149,.3);
    font-size: 20px;
}

.player-volume {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    gap: 12px;
    color: #858092;
    font: 500 10px JetBrains Mono;
}

@media (max-width: 1200px) {
    .library-layout.player-open {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 850px) {
    .library-layout,
    .library-layout.player-open {
        display: block;
    }

    .audio-player {
        position: fixed;
        z-index: 100;
        left: 16px;
        right: 16px;
        bottom: 16px;
        top: auto;
        transform: translateY(110%);
    }

    .player-open .audio-player {
        transform: translateY(0);
    }
}