/* pages/library.css
   Split from the original monolithic styles.css.
   Rules kept in original source order to preserve the cascade.
   250 rules. */

#license-modal-header {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--line);
}

#license-modal-header h2 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

#license-modal-header p {
    margin-bottom: 0;
    color: var(--text-mid);
}

#license-modal-body {
    padding: 2rem 2.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.library-page {
    padding-top: 80px;
    min-height: 100vh;
    background-color: var(--ink-800);
}

.filters-toggle {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink-900);
    color: var(--text-hi);
    border: none;
    padding: 1rem 0.75rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.filters-toggle::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--text-hi);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.filters-toggle:hover::after {
    opacity: 1;
    visibility: visible;
}

.filters-toggle:hover {
    background: var(--ink-700);
    padding-right: 1rem;
}

@media (max-width: 768px) {
    .filters-toggle::after {
        left: 50%;
        top: auto;
        bottom: calc(100% + 10px);
        transform: translateX(-50%);
    }

    .filters-toggle::after {
        content: "Toggle filters sticky behavior";
    }

}

.filters-toggle i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.library-page.filters-collapsed .filters-toggle i {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .filters-toggle {
        display: none;
    }

    .mobile-filter-button {
        display: flex;
    }

    .mobile-filter-panel {
        display: block;
    }

    .mobile-filter-header {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .filters-row {
        display: none;
    }

    .mobile-filter-panel .filters-row {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .mobile-filter-panel .custom-filter {
        width: 100%;
    }

    .mobile-filter-panel .custom-filter-dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 70vh;
        transform: translateY(100%);
        border-radius: 20px 20px 0 0;
        transition: transform 0.3s ease;
        margin: 0;
        padding: 1rem;
    }

    .mobile-filter-panel .custom-filter-options {
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }

    .search-box {
        min-width: 0;
        flex: 1;
    }

    .mobile-filter-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

}

.custom-filter-wrapper {
    display: flex;
    flex-direction: column;
}

.custom-tags-display {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 200px;
    margin-top: 0.75rem;
    transition: max-height 0.3s ease-in-out;
}

.custom-tags-display.collapsed {
    max-height: 38px;
    overflow: hidden;
}

.custom-tags-display.expanded {
    max-height: 200px;
    overflow-y: auto;
}

.show-more-tags {
    background: transparent;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
    text-align: left;
    width: auto;
}

.show-more-tags:hover {
    text-decoration: underline;
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filters-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-box button {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-hi);
    cursor: pointer;
}

.library-content {
    padding: 3rem 0;
}

.track-card {
    background: var(--ink-800);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(4, 8, 18, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.track-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.track-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
}

.track-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 12, 20, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.track-image:hover::before {
    opacity: 1;
}

.track-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.track-image:hover img {
    transform: scale(1.05);
}

.track-info {
    padding: 1.5rem;
}

.track-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-hi);
}

.track-artist {
    color: var(--text-hi);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.track-date {
    color: var(--text-mid);
    font-size: 0.8rem;
}

.player-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.now-playing {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 200px;
}

.player-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.progress-container {
    width: 100%;
    padding: 0 1rem;
}

.progress-bar {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin-bottom: 0.5rem;
    transition: height 0.2s ease;
}

.progress-bar:hover {
    height: 8px;
}

.progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--ink-900);
    border-radius: 3px;
    transition: width 0.1s linear, background-color 0.2s ease;
}

.progress-bar:hover .progress {
    background: var(--gold);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 160px;
    position: relative;
}

.volume-btn {
    background: none;
    border: none;
    color: var(--text-hi);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.volume-btn:hover {
    color: var(--gold);
    background: rgba(240, 172, 63, 0.1);
}

.volume-slider {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s ease;
}

.volume-slider:hover {
    height: 8px;
}

.volume-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
}

.volume-level {
    width: 100%;
    height: 100%;
    background: var(--ink-900);
    transition: width 0.1s linear, background-color 0.2s ease;
}

.volume-slider:hover .volume-level {
    background: var(--gold);
}

.time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-mid);
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
    .player-content {
        grid-template-columns: 1fr auto;
    }

    .now-playing {
        grid-column: 1 / -1;
        margin-bottom: 1rem;
    }

}

@media (max-width: 768px) {
    .player-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .player-controls {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .play-pause {
        margin: 0 auto;
    }

    .volume-control {
        justify-content: center;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

}

.view-toggle {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--ink-800);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(4, 8, 18, 0.45);
}

.view-button {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-mid);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-button:hover {
    background: rgba(7, 12, 20, 0.05);
    color: var(--text-hi);
}

.tracks-container {
    margin-bottom: 3rem;
}

.tracks-container.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.tracks-container.grid-view .track-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: 0;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(4, 8, 18, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tracks-container.grid-view .track-card:hover {
    transform: translateY(-4px);
    border-color: var(--line);
    box-shadow: 0 8px 16px rgba(4, 8, 18, 0.45);
}

.tracks-container.grid-view .track-main-content {
    padding: 1.5rem;
    background: var(--ink-800);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tracks-container.grid-view .track-info-bottom {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.tracks-container.grid-view .track-categories {
    margin-bottom: 0;
}

.tracks-container.grid-view .track-text-info {
    margin-bottom: 0.5rem;
}

.tracks-container.grid-view .track-text-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-hi);
}

.tracks-container.grid-view .track-artist {
    color: var(--text-mid);
    opacity: 0.9;
}

.tracks-container.grid-view .category-row {
    background: var(--line);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.tracks-container.grid-view .category-select {
    background-color: var(--ink-800);
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.track-info-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.tracks-container.grid-view .track-info-top {
    display: block;
}

.track-text-info {
    min-width: 0;
}

.track-text-info h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.tracks-container.grid-view .track-text-info h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.track-text-info p {
    margin: 0.25rem 0 0;
}

.track-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.tracks-container.list-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tracks-container.list-view .track-card {
    display: grid;
    grid-template-columns: 80px auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem;
    background: var(--ink-800);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(4, 8, 18, 0.45);
    border: 1px solid var(--line);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tracks-container.list-view .track-card .track-main-content,
.tracks-container.list-view .track-card .track-info-top {
    display: contents;
}

.tracks-container.list-view .track-card .track-info-bottom {
    order: 1;
    grid-column: 2 / -1;
    margin-top: 1rem;
    padding: 1rem;
    border-top: none;
    background: var(--line);
    border-radius: 8px;
}

.tracks-container.list-view .track-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(4, 8, 18, 0.45);
    border-color: var(--line);
}

.tracks-container.list-view .track-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

.tracks-container.list-view .track-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
}

.tracks-container.list-view .track-info h3 {
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .view-toggle {
        display: none;
    }

    .tracks-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .track-card {
        display: grid !important;
        grid-template-columns: 60px 1fr auto !important;
        gap: 1rem !important;
        align-items: center !important;
        padding: 1rem !important;
        background: var(--ink-800) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 4px rgba(4, 8, 18, 0.45) !important;
    }

    .track-image {
        width: 60px !important;
        height: 60px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .track-info {
        padding: 0 !important;
        min-width: 0 !important;
    }

    .track-text-info h3 {
        font-size: 1rem !important;
        margin: 0 0 0.25rem 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .track-artist {
        font-size: 0.9rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .track-categories {
        display: none !important;
    }

    .track-info-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .track-info-bottom {
        display: none !important;
    }

    .track-date {
        font-size: 0.8rem !important;
        margin: 0 !important;
        opacity: 0.7 !important;
    }

}

.audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.audio-player[style*="display: block"] {
    transform: translateY(0);
}

.track-image-container {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.current-track-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-pause {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--ink-900);
    border: none;
    color: var(--text-hi);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-pause i {
    font-size: 1.2rem;
    margin-left: 2px;
}

.play-pause:hover {
    transform: scale(1.05);
    background: var(--ink-700);
}

.custom-filter {
    position: relative;
    min-width: 200px;
}

.custom-filter-toggle {
    width: 100%;
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--ink-800);
    cursor: pointer;
    text-align: left;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    height: 41px;
}

.custom-filter-toggle:hover {
    border-color: var(--gold);
}

.custom-filter-toggle i {
    position: absolute;
    right: 1rem;
    transition: transform 0.3s ease;
}

.custom-filter-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 100%;
    background: var(--ink-800);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--line);
    display: none;
    z-index: 1001;
    flex-direction: column;
}

.custom-filter-selected-section {
    padding: 0.75rem;
    border-bottom: 1px solid var(--line);
    display: none;
}

.custom-filter-selected-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-filter-selected-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.custom-filter-search {
    padding: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.custom-filter-search-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.9rem;
}

.custom-filter-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.custom-filter-option {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.custom-filter-option:hover {
    background-color: rgba(240, 172, 63, 0.1);
}

.custom-filter-option input[type="checkbox"] {
    margin-right: 0.5rem;
}

.custom-filter-option-name {
    font-size: 0.9rem;
}

.custom-filter-actions {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    border-top: 1px solid var(--line);
}

.custom-filter-clear,
.custom-filter-apply {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.custom-filter-clear {
    background-color: transparent;
    color: var(--text-mid);
}

.custom-filter-clear:hover {
    background-color: rgba(108, 117, 125, 0.1);
}

.custom-filter-apply {
    background-color: var(--gold);
    color: var(--text-hi);
}

.custom-filter-apply:hover {
    background-color: var(--gold-bright);
}

.custom-filter-options::-webkit-scrollbar {
    width: 6px;
}

.custom-filter-options::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 3px;
}

.custom-filter-options::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 3px;
}

.custom-filter-options::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .custom-filter {
        width: 100%;
    }

    .custom-filter-dropdown {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 320px;
        max-height: 80vh;
        display: none;
    }

    .custom-filter-options {
        flex: 1;
        max-height: none;
    }

}

.track-moods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.tracks-container.list-view .track-moods {
    margin: 0;
}

@media (max-width: 768px) {
    .track-moods {
        margin-bottom: 0.25rem;
    }

}

.track-categories {
    margin-bottom: 0.5rem;
}

.category-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-selector {
    flex-shrink: 0;
}

.category-select {
    padding: 0.4rem 1.5rem 0.4rem 0;
    border: none;
    font-size: 0.9rem;
    background: transparent;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.category-select[data-showing="moods"] {
    color: var(--gold);
}

.category-select[data-showing="genres"] {
    color: var(--gold);
}

.category-select[data-showing="usages"] {
    color: var(--ok);
}

.category-select[data-showing="characteristics"] {
    color: var(--gold-deep);
}

.category-select[data-showing="instruments"] {
    color: var(--text-hi);
}

.category-select[data-showing="energy"] {
    color: var(--danger);
}

.category-select:hover {
    opacity: 0.8;
}

.category-select:focus {
    outline: none;
    opacity: 0.8;
}

.category-select option {
    font-weight: normal;
    color: var(--text-hi);
    background: var(--ink-800);
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 28px;
    align-items: center;
    flex: 1;
}

.category-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.no-tags {
    color: var(--text-mid);
    font-size: 0.85rem;
    font-style: italic;
}

.category-tag:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

@media (max-width: 768px) {
    .category-row {
        gap: 0.75rem;
    }

    .category-select {
        padding: 0.3rem 1.8rem 0.3rem 0.6rem;
        font-size: 0.85rem;
        background-size: 0.9rem;
        min-width: 100px;
    }

    .category-tag {
        padding: 0.2rem 0.6rem;
        font-size: 0.8rem;
    }

}

.mobile-filter-button {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--ink-900);
    color: var(--text-hi);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

.mobile-filter-button:hover {
    background: var(--ink-700);
}

.mobile-filter-button i {
    font-size: 1.2rem;
}

.mobile-filter-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85vh;
    background: var(--ink-800);
    z-index: 1000;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.mobile-filter-header {
    display: none;
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--ink-800);
    z-index: 2;
    border-radius: 20px 20px 0 0;
}

.mobile-filter-header h3 {
    font-size: 1.2rem;
    color: var(--text-hi);
    margin: 0;
}

.mobile-filter-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-hi);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.mobile-filter-close:hover {
    background: var(--line);
}

.mobile-filter-close i {
    font-size: 1.4rem;
}

.mobile-filter-content {
    padding: 1rem;
}

.mobile-filter-panel .custom-filter-wrapper {
    width: 100%;
}

.mobile-filter-panel .custom-filter-toggle {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ink-800);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.mobile-filter-panel .custom-filter-dropdown {
    padding: 1rem;
    background: var(--ink-800);
}

.mobile-filter-panel .custom-filter-selected-section {
    padding: 1rem;
    margin: -1rem -1rem 1rem -1rem;
    border-bottom: 1px solid var(--line);
}

.mobile-filter-panel .custom-filter-search {
    padding: 0 0 1rem 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

.mobile-filter-panel .custom-filter-search-input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1rem;
}

.mobile-filter-panel .custom-filter-options {
    padding: 0;
    margin-bottom: 1rem;
}

.mobile-filter-panel .custom-filter-option {
    padding: 0.8rem;
    border-radius: 8px;
}

.mobile-filter-panel .custom-filter-option:hover {
    background: var(--line);
}

.mobile-filter-panel .custom-filter-actions {
    padding: 1rem;
    margin: 0 -1rem -1rem -1rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    background: var(--ink-800);
    position: sticky;
    bottom: 0;
}

.search-box {
    min-width: 0;
    flex: 1;
}

.mobile-filter-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .filters-toggle {
        display: none;
    }

    .mobile-filter-button {
        display: flex;
    }

    .mobile-filter-panel {
        display: block;
    }

    .mobile-filter-header {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .filters-row {
        display: none;
    }

    .mobile-filter-panel .filters-row {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .mobile-filter-panel .custom-filter-wrapper {
        width: 100%;
    }

    .mobile-filter-panel .custom-filter-toggle {
        width: 100%;
        padding: 1rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 1rem;
        background: var(--ink-800);
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }

    .mobile-filter-panel .custom-filter-dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 70vh;
        transform: translateY(100%);
        border-radius: 20px 20px 0 0;
        transition: transform 0.3s ease;
        margin: 0;
        padding: 1rem;
        background: var(--ink-800);
    }

    .mobile-filter-panel .custom-filter-selected-section {
        padding: 1rem;
        margin: -1rem -1rem 1rem -1rem;
        border-bottom: 1px solid var(--line);
    }

    .mobile-filter-panel .custom-filter-search {
        padding: 0 0 1rem 0;
        border-bottom: 1px solid var(--line);
        margin-bottom: 1rem;
    }

    .mobile-filter-panel .custom-filter-search-input {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 1rem;
    }

    .mobile-filter-panel .custom-filter-options {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        padding: 0;
        margin-bottom: 1rem;
    }

    .mobile-filter-panel .custom-filter-option {
        padding: 0.8rem;
        border-radius: 8px;
    }

    .mobile-filter-panel .custom-filter-option:hover {
        background: var(--line);
    }

    .mobile-filter-panel .custom-filter-actions {
        padding: 1rem;
        margin: 0 -1rem -1rem -1rem;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        background: var(--ink-800);
        position: sticky;
        bottom: 0;
    }

    .search-box {
        min-width: 0;
        flex: 1;
    }

    .mobile-filter-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

}

.player-close {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--line);
    color: var(--text-hi);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.player-close:hover {
    background: var(--line);
}

.player-close i {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .player-close {
        display: flex;
    }

    .player-content {
        padding-top: 1rem;
        position: relative;
    }

    .audio-player {
        padding: 0.5rem 0 1rem 0;
    }

    .now-playing {
        padding-right: 2rem;
    }

}

.track-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.track-title-link:hover {
    color: var(--gold);
}

.track-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.track-title-link:hover {
    color: var(--gold);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    padding: 20px 0;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
}

.pagination a,
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-mid);
    background-color: var(--ink-700);
    transition: all 0.3s ease;
    font-weight: 500;
    min-width: 45px;
    height: 45px;
    box-sizing: border-box;
}

.pagination a:hover {
    background-color: var(--ink-900);
    color: var(--text-hi);
}

.pagination a i {
    font-size: 0.8em;
}

.pagination a.prev-page i {
    margin-right: 8px;
}

.pagination a.next-page i {
    margin-left: 8px;
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination span {
    background-color: transparent;
    border: none;
    padding: 10px 5px;
    min-width: auto;
}

.library-layout-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    align-items: flex-start;
}

.library-sidebar {
    background: var(--ink-850);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid var(--line);
    position: sticky;
    top: 110px;
}

.sidebar-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.sidebar-header h3 {
    font-size: 1.5rem;
    color: var(--text-hi);
    margin: 0;
}

.library-sidebar .filter-form {
    gap: 1.5rem;
}

.library-sidebar .search-box {
    width: 100%;
    min-width: 0;
}

.library-sidebar .search-box input {
    padding: 0.8rem 2.5rem 0.8rem 1rem;
}

.library-sidebar .filters-row {
    flex-direction: column;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.library-sidebar .custom-filter {
    width: 100%;
    min-width: 0;
}

.library-sidebar .custom-filter-toggle {
    background-color: var(--ink-800);
}

.library-sidebar .custom-filter-dropdown {
    position: static;
    border: none;
    box-shadow: none;
    display: none;
    padding: 1rem 0 0 0;
    width: 100%;
}

.library-sidebar .custom-filter-toggle i {
    transition: transform 0.3s ease;
}

.library-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    gap: 1.5rem;
}

.library-main-header .search-box {
    flex-grow: 1;
    max-width: 450px;
}

.results-count {
    color: var(--text-mid);
    font-size: 0.9rem;
    white-space: nowrap;
}

.library-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .library-layout-container {
        grid-template-columns: 1fr;
    }

    .library-sidebar {
        display: none;
    }

}

@media (min-width: 1025px) {
    .mobile-filter-button {
        display: none;
    }

}

@media (max-width: 768px) {
    .mobile-filter-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .mobile-filter-button i {
        margin-right: 0.5rem;
    }

}

.library-content {
    padding: 0;
}


/* ======================================================================
   LIBRARY — implementation of Library.dc.html (Claude Design project).
   Appended last. NOTE ON SPECIFICITY: the legacy rules above include
   `.tracks-container.grid-view .track-card` (0,2,0), which beat a plain
   `.track-card` selector and kept forcing the old flex card. Rules here
   are written at >= that weight, and the grid template lives in ONE
   custom property so the header strip and the rows can never drift.
   ====================================================================== */

.library-page {
    background: #0A1733;
    padding-top: 0;
    /* one source of truth for the row grid — header strip + every card */
    /* play · art · track · waveform · tags · licence */
    --track-cols: 40px 56px minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 116px;
    --track-gap: 20px;
    --track-pad: 20px;
}

/* ---------------- page header ---------------- */
/* The filter form is the page wrapper now; the legacy `.filter-form`
   rule (display:flex; gap:1rem) put a 1rem band of the lighter
   .library-page navy between the header and the results. */
.library-page > .filter-form {
    display: block;
    gap: 0;
}

.library-page .library-header {
    background: linear-gradient(180deg, #060D1F 0%, #0A1733 100%);
    border-bottom: none;
    /* design: padding 170px top / 54px bottom. body already offsets the 72px
       nav, so the remaining top space is 170 - 72 = 98px. */
    padding: 98px 0 54px;
    text-align: left;              /* components.css centres this — undo it */
    color: var(--text-hi);
}
.library-page .library-header .container { text-align: left; }
.library-page .library-header .kicker { display: block; margin-bottom: 20px; }
.library-page .library-header h1 {
    /* Design scale: clamp(44px, 5.5vw, 76px). Guessing a vw coefficient that
       keeps this on one line was what made it too small before — the real
       text width depends on font metrics I can't compute in CSS. So this is
       the design's size, and fitHeadline() in library.js measures the
       rendered line after webfonts settle and only shrinks it if it actually
       overflows. */
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: none;
    white-space: nowrap;
}
@media (max-width: 600px) {
    /* below this the single line is too small to read — let it wrap */
    .library-page .library-header h1 {
        white-space: normal;
        font-size: clamp(30px, 7.6vw, 40px);
    }
}
.library-page .library-header p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-mid);
    max-width: 56ch;
    margin: 0 0 34px;
}

/* ---------------- search (now in the header, per the design) ---------- */
.library-page .search-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 0 30px;
}
.library-page .search-box input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 16px 26px;
    font-size: 15px;
    /* explicit rather than inherited — legacy .search-box input rules sit
       between this and the base reset */
    font-family: var(--font-body);
    color: var(--text-hi);
    outline: none;
    transition: border-color var(--t-fast), background var(--t-fast);
}
/* the design sets no ::placeholder rule, so it renders as a faded version
   of the field's own light colour — not the dark muted blue used elsewhere */
.library-page .search-box input::placeholder { color: rgba(244, 246, 251, 0.5); }
.library-page .search-box input:focus {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: none;
}

/* ---------------- filters: the design's chip rack ---------------------
   Every value is visible (no dropdowns). Facets run 8-62 options, so each
   row scrolls horizontally on its own with faded edges hinting at more.
   -------------------------------------------------------------------- */
.library-page .library-sidebar {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    max-width: none;
}
.library-page .filters-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    margin: 0;
}
.library-page .filter-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
}
.library-page .filter-row-label {
    font-size: 10.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.3;
}

/* the scrolling rail */
.library-page .filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 8px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    /* fade the right edge so it reads as "more this way" */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.library-page .filter-chips::-webkit-scrollbar { height: 4px; }
.library-page .filter-chips::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: none;
}
.library-page .filter-chips::-webkit-scrollbar-track { background: transparent; }

/* one chip */
.library-page .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12.5px;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 8px 17px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #C6D0E4;
    white-space: nowrap;
    transition: all 0.2s;
    user-select: none;
}
.library-page .chip:hover { border-color: var(--gold); color: var(--gold); }
/* the checkbox drives state but is never seen */
.library-page .chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* selected — inverts to paper, exactly like the design's active chip.
   :has() covers the server-rendered state; .is-on is kept in sync by JS
   for the instant feedback before the AJAX refresh lands. */
.library-page .chip.is-on,
.library-page .chip:has(input[type="checkbox"]:checked) {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink-950);
}
/* unreachable under the current filters — visible but not clickable, so the
   rack doubles as a map of what actually combines with what */
.library-page .chip.is-off {
    opacity: 0.28;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-faint);
}
.library-page .chip.is-off:hover { border-color: rgba(255, 255, 255, 0.1); color: var(--text-faint); }

.library-page .chip:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* legacy dropdown scaffolding is unused by the rack */
.library-page .custom-filter,
.library-page .custom-filter-toggle,
.library-page .custom-filter-dropdown,
.library-page .custom-tags-display,
.library-page .show-more-tags { display: none; }

/* ---------------- results bar ---------------- */
.library-results-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 26px 0 10px;
}
.library-results-bar .results-count { font-size: 13px; color: var(--text-faint); }
.tag-view-control { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tag-view-label {
    font-size: 10.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-faint);
}
#global-tag-view {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    color: var(--text-hi);
    outline: none;
    cursor: pointer;
}
#global-tag-view option { color: var(--text-hi); background: #0D1C3E; }
.library-page .mobile-filter-button { display: none; }

/* ---------------- rows ---------------- */
.library-page .library-content { padding: 0 0 40px; }

.library-page .track-columns {
    display: grid;
    grid-template-columns: var(--track-cols);
    gap: var(--track-gap);
    align-items: center;
    padding: 14px var(--track-pad);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.library-page .track-columns .col-right { text-align: right; }

/* container is a plain stack; kill every legacy grid/flex variant */
.library-page .tracks-container,
.library-page .tracks-container.grid-view,
.library-page .tracks-container.list-view {
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin-bottom: 2rem;
}

/* 0,3,0 — comfortably above `.tracks-container.grid-view .track-card` */
.library-page .tracks-container .track-card,
.library-page .tracks-container.grid-view .track-card,
.library-page .tracks-container.list-view .track-card {
    display: grid;
    grid-template-columns: var(--track-cols);
    gap: var(--track-gap);
    align-items: center;
    flex-direction: row;
    padding: 16px var(--track-pad);
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: background 0.25s;
}
.library-page .tracks-container .track-card:hover {
    background: rgba(255, 255, 255, 0.045);
    transform: none;
    box-shadow: none;
}
.library-page .tracks-container .track-card.playing { background: rgba(159, 187, 234, 0.07); }

/* col 1 — artwork disc / play control */
/* col 1 — the play control
 *
 * Its own column, beside the artwork rather than on top of it. Nocturne's rule
 * for imagery is that a photograph is treated and never overlaid, and the song
 * page had already separated these two — its stylesheet still carries the
 * comment "it used to be absolutely placed over the cover art".
 *
 * Shaped like that one, at list size: a paper fill with an ink glyph, going to
 * the accent when you touch it. Same control, same meaning, two screens. */
.library-page .tracks-container .track-card .track-play {
    display: flex;
    align-items: center;
    justify-content: center;
}
.library-page .tracks-container .track-card .play-button {
    position: static;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-950);
    font-size: 11px;
    cursor: pointer;
    opacity: 1;
    transform: none;
    box-shadow: none;
    transition: background 0.2s, transform 0.2s;
}
/* The glyph needs its colour and size stated, not inherited.
 *
 * components.css:422 sets `.play-button i { font-size: 1.5rem; color:
 * var(--text-hi) }` — near-white, from when this button sat over dark cover
 * art. On a paper-filled button that is a white triangle on a white disc, which
 * is to say a plain white circle, at 24px inside a 34px button.
 *
 * song.css:738 carries this exact warning, in these words, from the last time
 * somebody made this button pale. */
.library-page .tracks-container .track-card .play-button i {
    color: var(--ink-950);
    /* !important only because the rule it is answering used one:
       components.css:576, inside a max-width:768px block, sets
       `font-size: 1rem !important` on this glyph, and !important is not
       something specificity can outrank. Same for the 40px button below. */
    font-size: 11px !important;
    line-height: 1;
}
@media (max-width: 768px) {
    .library-page .tracks-container .track-card .play-button {
        width: 34px !important;
        height: 34px !important;
    }
}
/* The triangle is left-heavy; nudge it back to the optical centre. */
.library-page .tracks-container .track-card .play-button .fa-play { margin-left: 2px; }
.library-page .tracks-container .track-card .play-button .fa-pause { margin-left: 0; }
.library-page .tracks-container .track-card .play-button:hover { background: var(--gold); }
.library-page .tracks-container .track-card .play-button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.library-page .tracks-container .track-card.playing .play-button { background: var(--gold); }

/* col 2 — the artwork, and nothing else
 *
 * Square, because album art is square and a circular crop throws away its
 * corners. Nothing is drawn over it: it is the one picture on the row and the
 * only thing that tells one track from another at a glance. */
.library-page .tracks-container .track-card .track-image {
    position: relative;
    width: 44px;
    height: 44px;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--ink-700);
    cursor: pointer;
    transition: border-color 0.2s;
}
.library-page .tracks-container .track-card:hover .track-image { border-color: rgba(255, 255, 255, 0.28); }
.library-page .tracks-container .track-card.playing .track-image { border-color: var(--gold); }
.library-page .tracks-container .track-card .track-image img,
.library-page .tracks-container .track-card .track-image .placeholder-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: grid;
    place-items: center;
    color: var(--text-faint);
    font-size: 0.85rem;
    border-radius: 0;
}

/* col 2 — title + artists */
.library-page .tracks-container .track-card .track-text-info { min-width: 0; padding: 0; }
.library-page .tracks-container .track-card .playable-title { margin: 0; font-size: 16px; line-height: 1.3; }
.library-page .tracks-container .track-card .track-title-link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-hi);
    border-bottom: 1px solid transparent;
}
.library-page .tracks-container .track-card .track-title-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.library-page .tracks-container .track-card .track-artist {
    font-size: 12.5px;
    color: var(--text-low);
    margin: 4px 0 0;
    letter-spacing: 0.06em;
}

/* col 3 — waveform + time */
.library-page .tracks-container .track-card .waveform-container {
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}
.library-page .tracks-container .track-card .waveform { height: 32px; width: 100%; }

/* A track with no stored waveform. Drawing one would mean downloading the whole
   file on page load just to look at it, so the player is built when the track
   is played instead — see initAudioPlayer in pages/library.js. Until then this
   is the resting line, which reads as "nothing here yet" rather than as a
   player that failed to load. */
.library-page .tracks-container .track-card .waveform-deferred .waveform {
    background: linear-gradient(to bottom,
        transparent calc(50% - 1px), var(--line-strong, rgba(255, 255, 255, 0.14)) calc(50% - 1px),
        var(--line-strong, rgba(255, 255, 255, 0.14)) calc(50% + 1px), transparent calc(50% + 1px));
}
.library-page .tracks-container .track-card .waveform-time {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* col 4 — tags */
.library-page .tracks-container .track-card .track-categories {
    min-width: 0;
    padding: 0;
    border: none;
    margin: 0;
}
.library-page .tracks-container .track-card .category-selector,
.library-page .tracks-container .track-card .category-select { display: none; }
.library-page .tracks-container .track-card .category-row { display: block; }
.library-page .tracks-container .track-card .category-tags { gap: 6px; flex-wrap: wrap; }
.library-page .tracks-container .track-card .category-tags:not([style*="display: none"]) { display: flex; }
.library-page .tracks-container .track-card .category-tag,
.library-page .tracks-container .track-card .no-tags {
    font-size: 11.5px;
    color: var(--text-mid) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.library-page .tracks-container .track-card .no-tags {
    color: var(--text-faint) !important;
    border-style: dashed;
}

/* col 5 — license CTA */
.library-page .tracks-container .track-card .license-button {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-950);
    background: var(--paper);
    border: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 999px;
    transition: background 0.2s;
}
.library-page .tracks-container .track-card .license-button:hover {
    background: var(--gold);
    color: var(--ink-950);
}

/* legacy card scaffolding the row layout doesn't use */
.library-page .tracks-container .track-card .track-main-content,
.library-page .tracks-container .track-card .track-info-top,
.library-page .tracks-container .track-card .track-info-bottom { display: contents; }
.library-page .tracks-container .track-card .track-date { display: none; }

/* ---------------- empty state ---------------- */
.library-page .tracks-container > p {
    padding: 80px 20px;
    text-align: center;
    color: var(--text-low);
    font-size: 16px;
}

/* ---------------- player bar ---------------- */
.audio-player {
    background: rgba(10, 23, 51, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -18px 56px rgba(4, 8, 18, 0.6);
}
.audio-player .current-track-title { color: var(--text-hi); font-weight: 600; }
.audio-player .current-track-artist { color: var(--text-low); }
.audio-player .play-pause { background: var(--paper); color: var(--ink-950); border: none; }
.audio-player .play-pause:hover { background: var(--gold); }
.audio-player .progress { background: var(--gold); }

/* ---------------- pagination ---------------- */
.pagination a {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #C6D0E4;
    transition: all 0.2s;
}
.pagination a:hover { border-color: var(--gold); color: var(--gold); }
.pagination a.current {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink-950);
    font-weight: 500;
}

/* ---------------- license modal ---------------- */
#license-modal .modal-content,
.license-modal .modal-content {
    background: #0D1C3E;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
}
#license-modal-title { font-family: var(--font-serif); font-size: 34px; line-height: 1.1; }
#license-modal-subtitle { font-size: 13px; color: var(--text-low); }
.license-option-price { font-family: var(--font-serif); font-size: 26px; color: var(--text-hi); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
    .library-page { --track-cols: 38px 48px minmax(0, 1.3fr) minmax(0, 1.5fr) 104px; }
    /* By name, not by position. This was `> div:nth-child(4)`, which meant the
       header labels were addressed by counting — so adding a column at the
       front silently moved this from "Moods" to "Waveform" and hid the wrong
       one. The cell already had an id for the tag switcher to write into. */
    .library-page .track-columns > #tag-column-heading { display: none; }
    .library-page .tracks-container .track-card .track-categories { display: none; }
}
@media (max-width: 760px) {
    .library-page { --track-cols: 34px 44px minmax(0, 1fr) 92px; --track-gap: 10px; --track-pad: 4px; }
    .library-page .track-columns { display: none; }
    .library-page .tracks-container .track-card .waveform-container { display: none; }
    .library-page .library-header { padding: 48px 0 32px; }
    .tag-view-control { margin-left: 0; }
}

/* ============================================================================
   Licence popup — ported from the modal block in Library.dc.html
   Last layer in the file, so it wins over the older skin above without
   !important. The rows themselves come from includes/license-list-partial.php,
   which the song page also renders, so only the popup chrome lives here.
   ========================================================================= */

#license-modal.license-popup .modal-content {
    background: #0D1C3E;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    max-width: 640px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
    padding: 44px 48px;
    box-sizing: border-box;
    margin: auto;
    animation: modalIn .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

#license-modal.license-popup #license-modal-header {
    /* border-bottom and 2rem padding come from the pre-redesign #license-modal-header
       rule at the top of this file; both are wrong for this panel. */
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 6px;
    padding: 0;
    border: none;
}
#license-modal.license-popup #license-modal-header .kicker {
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
}
#license-modal.license-popup #license-modal-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: var(--text-hi);
    margin: 0;
}
#license-modal.license-popup #license-modal-subtitle {
    font-size: 13px;
    color: var(--text-faint);
    margin: 6px 0 0;
}

/* In the flow, not pinned to the corner. */
#license-modal.license-popup .close-btn {
    position: static;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    color: #C6D0E4;
    font-size: 16px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
#license-modal.license-popup .close-btn:hover { border-color: var(--gold); color: var(--gold); }

#license-modal.license-popup #license-modal-body {
    margin-top: 26px;
    padding: 0;
    max-height: none;    /* the panel scrolls; a nested scroller left dead space */
    overflow: visible;
}

/* The category tabs sit on the dark panel here, not on paper. */
#license-modal.license-popup .license-selector {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
#license-modal.license-popup .license-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: none;
    padding: 0 0 2px;
    margin-bottom: 22px;
    border: none;
}
#license-modal.license-popup .license-tabs::-webkit-scrollbar { display: none; }
#license-modal.license-popup .license-tab {
    flex: 0 0 auto;          /* never squeeze a label onto two lines */
    white-space: nowrap;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    padding: 7px 17px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #C6D0E4;
    cursor: pointer;
    transition: all .2s;
}
#license-modal.license-popup .license-tab:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
#license-modal.license-popup .license-tab.active {
    background: var(--text-hi);
    border-color: var(--text-hi);
    color: var(--ink-950);
}
#license-modal.license-popup .license-tab-content { padding: 0; }
#license-modal.license-popup .license-panel { display: none; flex-direction: column; }
#license-modal.license-popup .license-panel.active { display: flex; }

/* One row per licence, separated by a rule rather than boxed as cards. */
#license-modal.license-popup .license-option {
    display: block;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
}
#license-modal.license-popup .license-option:hover { background: none; transform: none; box-shadow: none; }

#license-modal.license-popup .license-promo {
    background: rgba(159, 187, 234, 0.08);
    color: var(--text-mid);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    margin: 16px 0 0;
    border: none;
    border-radius: 0;
}
#license-modal.license-popup .license-promo strong { color: var(--text-hi); font-weight: 600; }
#license-modal.license-popup .license-promo a { color: var(--gold); border-bottom: 1px solid var(--gold); text-decoration: none; }

#license-modal.license-popup .license-option-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 0;
}
#license-modal.license-popup .license-option-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-hi);
    margin: 0 0 6px;
}
#license-modal.license-popup .license-option-info p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-mid);
    max-width: 44ch;
    margin: 0;
}
#license-modal.license-popup .license-option-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    padding: 0;
    border: none;
}
#license-modal.license-popup .license-option-price > span {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--text-hi);
}
#license-modal.license-popup .license-option-price button,
#license-modal.license-popup .license-option-price .license-owned-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
    border: 1px solid var(--text-hi);
    background: var(--text-hi);
    color: var(--ink-950);
}
#license-modal.license-popup .license-option-price button:hover { background: var(--gold); border-color: var(--gold); }
#license-modal.license-popup .license-option-price .license-owned-btn {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold);
}
#license-modal.license-popup .license-option-price .license-owned-btn:hover { background: rgba(159, 187, 234, 0.12); }
#license-modal.license-popup .license-option-price .license-incart-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink-950);
}
#license-modal.license-popup .license-option-price button:disabled {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-faint);
    cursor: default;
}

#license-modal.license-popup .license-note {
    font-size: 11.5px;
    color: var(--text-faint);
    text-align: right;
    padding: 0 0 18px;
    margin: -12px 0 0;
}

#license-modal.license-popup .more-details-container { border: none; margin: 0; padding: 0 0 18px; }
#license-modal.license-popup .more-details-toggle {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    color: var(--text-faint);
    cursor: pointer;
}
#license-modal.license-popup .more-details-toggle:hover { color: var(--gold); }
#license-modal.license-popup .more-details-container.active .more-details-toggle i { transform: rotate(180deg); }
#license-modal.license-popup .more-details-content {
    padding: 12px 0 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-mid);
    background: none;
    border: none;
}
#license-modal.license-popup .preview-agreement-link {
    color: var(--gold);
    border-bottom: 1px solid rgba(159, 187, 234, 0.5);
    text-decoration: none;
    font-size: 13px;
}
#license-modal.license-popup .license-preview-row { margin-top: 15px; }

#license-modal.license-popup .license-popup-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}
#license-modal.license-popup .license-popup-note {
    font-size: 13px;
    color: var(--text-faint);
    line-height: 1.6;
    margin: 0;
}
#license-modal.license-popup .license-popup-note span { color: var(--text-mid); }
#license-modal.license-popup .license-popup-note a { color: var(--gold); border-bottom: 1px solid var(--gold); text-decoration: none; }
#license-modal.license-popup .license-popup-checkout {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-hi);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    text-decoration: none;
    white-space: nowrap;
}
#license-modal.license-popup .license-popup-checkout:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 620px) {
    #license-modal.license-popup .modal-content { padding: 32px 22px; max-height: 92vh; }
    #license-modal.license-popup #license-modal-title { font-size: 28px; }
    #license-modal.license-popup .license-option-body { grid-template-columns: 1fr; gap: 14px; }
    #license-modal.license-popup .license-option-price { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    #license-modal.license-popup .license-note { text-align: left; }
    #license-modal.license-popup .license-popup-foot { flex-direction: column; align-items: flex-start; }
}