.cll-library {
    max-width: 1100px;
    margin: 40px auto;
    font-family: inherit;
    color: #fff;
}

.cll-toolbar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.cll-search,
.cll-filter {
    background: #161616;
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 13px 15px;
    font-size: 14px;
}

.cll-pack {
    background: #111;
    border: 1px solid #292929;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}

.cll-pack-header {
    width: 100%;
    border: 0;
    background: #171717;
    color: #fff;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.cll-pack-header:hover {
    background: #202020;
}

.cll-pack-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cll-pack-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 7px;
}

.cll-pack-main h3 {
    margin: 0 0 5px;
    font-size: 17px;
}

.cll-pack-meta {
    color: #888;
    font-size: 12px;
}

.cll-pack-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cll-buy {
    display: inline-block;
    background: #fff;
    color: #111;
    padding: 9px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}

.cll-buy:hover {
    background: #ddd;
}

.cll-price {
    font-weight: 700;
}

.cll-arrow {
    font-size: 25px;
    transition: transform .2s ease;
}

.cll-pack.active .cll-arrow {
    transform: rotate(45deg);
}

.cll-pack-content {
    display: none;
    background: #0c0c0c;
}

.cll-pack.active .cll-pack-content {
    display: block;
}

.cll-pack-description {
    padding: 20px;
    border-bottom: 1px solid #292929;
    color: #aaa;
}

.cll-loop {
    display: grid;
    grid-template-columns: 1.3fr 2fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border-top: 1px solid #242424;
}

.cll-loop-info strong {
    display: block;
    margin-bottom: 7px;
}

.cll-loop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #888;
    font-size: 12px;
}

.cll-loop-meta span {
    background: #181818;
    padding: 4px 7px;
    border-radius: 4px;
}

.cll-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cll-tags span {
    color: #777;
    font-size: 11px;
}

.cll-player audio {
    width: 100%;
    max-width: 450px;
    height: 38px;
}

.cll-download-button {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 9px 13px;
    text-decoration: none;
    font-size: 12px;
}

.cll-download-button:hover {
    background: #fff;
    color: #111;
}

@media (max-width: 800px) {

    .cll-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .cll-loop {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cll-player audio {
        max-width: 100%;
    }

}

@media (max-width: 500px) {

    .cll-toolbar {
        grid-template-columns: 1fr;
    }

    .cll-pack-header {
        padding: 15px;
    }

    .cll-pack-main {
        gap: 10px;
    }

    .cll-pack-image img {
        width: 45px;
        height: 45px;
    }

    .cll-buy {
        padding: 7px 9px;
    }

}

.cll-library [hidden] { display: none !important; }
.cll-library .cll-toolbar { grid-template-columns: 2fr repeat(4,1fr); }
.cll-library .cll-player { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cll-library .cll-play { background:#fff; color:#111; border:0; border-radius:50%; width:40px; height:40px; flex-shrink:0; cursor:pointer; }
/* Decorative waveform-style seek track, not a measured waveform. */
.cll-library .cll-seek { --progress:0%; flex:1; min-width:90px; max-width:320px; cursor:pointer; accent-color:#fff; height:32px; background:repeating-linear-gradient(90deg,#666 0 2px,transparent 2px 5px); }
.cll-library .cll-time { color:#aaa; font-size:12px; }
.cll-library .cll-audio-error { width:100%; color:#ccc; font-size:12px; }
.cll-library :focus-visible { outline:2px solid #aaa; outline-offset:4px; }
.cll-library .cll-pack-main h3 { color:#fff; }
@media(max-width:900px) { .cll-library .cll-toolbar { grid-template-columns:1fr 1fr; } }
@media(max-width:500px) { .cll-library .cll-toolbar { grid-template-columns:1fr; } .cll-library .cll-pack-header { flex-wrap:wrap; gap:12px; } }
.cll-library .cll-seek { appearance:none; -webkit-appearance:none; border:0; border-radius:0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='32' viewBox='0 0 60 32'%3E%3Cpath stroke='%23777' stroke-width='2' d='M2 12v8M7 7v18M12 10v12M17 3v26M22 8v16M27 12v8M32 5v22M37 9v14M42 2v28M47 7v18M52 11v10M57 6v20'/%3E%3C/svg%3E") center / 60px 32px repeat-x; }
.cll-library .cll-seek::-webkit-slider-runnable-track { background:transparent; height:32px; }
.cll-library .cll-seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:32px; width:5px; background:#fff; border:0; border-radius:3px; }
.cll-library .cll-seek::-moz-range-track { background:transparent; height:32px; }
.cll-library .cll-seek::-moz-range-thumb { height:32px; width:5px; background:#fff; border:0; border-radius:3px; }