/* ============================================================
   DeejaysFlow Sets — Frontend CSS  v1.4.0
   Dark tema + Camelot badge boje — bez max-width (Blocksy wrapper)
   ============================================================ */

/* ---------- CSS VARIABLES ---------- */
.djsets-page {
    --djsets-bg:          linear-gradient(135deg, #2d1b4e 0%, #1a1035 100%);
    --djsets-card-bg:     rgba(20, 15, 40, 0.75);
    --djsets-card-border: rgba(244, 162, 97, 0.25);
    --djsets-accent:      #F4A261;
    --djsets-accent2:     #E76F51;
    --djsets-text:        #ede4d8;
    --djsets-text-dim:    rgba(237, 228, 216, 0.5);
    --djsets-row-border:  rgba(244, 162, 97, 0.1);
    --djsets-row-hover:   rgba(244, 162, 97, 0.07);
    --djsets-radius:      16px;
    --djsets-blur:        blur(20px);
    --djsets-meta-bg:     rgba(255, 255, 255, 0.04);
    --djsets-meta-border: rgba(244, 162, 97, 0.18);
}

/* ---------- PAGE WRAPPER ----------
   Nema max-width — Blocksy content wrapper kontrolira širinu.
   Padding sa strana daje "disanje" unutar wrappera. */
.djsets-page {
    background: var(--djsets-bg);
    padding: 28px 40px;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

.djsets-set-wrap {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- LEFT: COVER COLUMN ---------- */
.djsets-cover-col {
    flex-shrink: 0;
    width: clamp(200px, 22vw, 340px);
    position: sticky;
    top: 20px;
    align-self: flex-start;
    padding-top: 22px;
}

.djsets-cover-img-wrap {
    border-radius: var(--djsets-radius);
    overflow: hidden;
    border: 1px solid var(--djsets-card-border);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    aspect-ratio: 1 / 1;
}

.djsets-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.djsets-cover-placeholder {
    aspect-ratio: 1 / 1;
    background: var(--djsets-card-bg);
    border: 1px solid var(--djsets-card-border);
    border-radius: var(--djsets-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--djsets-text-dim);
    backdrop-filter: var(--djsets-blur);
    -webkit-backdrop-filter: var(--djsets-blur);
}

/* ---------- META INFO BOX ---------- */
.djsets-cover-meta-box {
    margin-top: 14px;
    background: var(--djsets-meta-bg);
    border: 1px solid var(--djsets-meta-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.djsets-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--djsets-text-dim);
    line-height: 1.45;
}

.djsets-meta-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244,162,97,.12);
    border: 1px solid rgba(244,162,97,.22);
    border-radius: 6px;
    margin-top: 0;
}

.djsets-meta-icon i {
    color: var(--djsets-accent);
    font-size: 10px;
}

.djsets-meta-divider {
    height: 1px;
    background: var(--djsets-meta-border);
    margin: 2px 0;
}

.djsets-meta-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.djsets-meta-cam-dot {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.6;
}

.djsets-meta-more {
    font-size: 10px;
    color: var(--djsets-text-dim);
    padding: 1px 4px;
}

/* ---------- RIGHT: TRACKLIST COLUMN ---------- */
.djsets-tracklist-col {
    flex: 1;
    min-width: 0;
    background: var(--djsets-card-bg);
    border: 1px solid var(--djsets-card-border);
    border-radius: var(--djsets-radius);
    backdrop-filter: var(--djsets-blur);
    -webkit-backdrop-filter: var(--djsets-blur);
    overflow: hidden;
}

/* ---------- SET HEADER ---------- */
.djsets-set-header {
    padding: 22px 24px 0;
}

.djsets-set-title {
    margin: 0 0 14px;
    font-size: clamp(20px, 3.5vw, 30px);
    font-weight: 800;
    color: var(--djsets-accent);
    line-height: 1.2;
    letter-spacing: -.4px;
}

/* ---------- FRONTEND SORT ROW ---------- */
.djsets-fe-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.djsets-fe-sort-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--djsets-text-dim);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.djsets-fe-sort-label i {
    color: var(--djsets-accent);
    font-size: 11px;
}

.djsets-fe-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(244,162,97,.08);
    border: 1px solid rgba(244,162,97,.25);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 11px;
    font-weight: 600;
    color: var(--djsets-text-dim);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    letter-spacing: .2px;
}

.djsets-fe-sort-btn i {
    font-size: 10px;
    opacity: .8;
}

.djsets-fe-sort-btn:hover {
    background: rgba(244,162,97,.18);
    border-color: rgba(244,162,97,.6);
    color: var(--djsets-text);
}

.djsets-fe-sort-btn.active {
    background: rgba(244,162,97,.22);
    border-color: var(--djsets-accent);
    color: var(--djsets-accent);
    box-shadow: 0 0 8px rgba(244,162,97,.2);
}

/* Download txt button slightly distinct */
.djsets-fe-download-txt {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.15);
}

.djsets-fe-download-txt:hover {
    background: rgba(244,162,97,.14);
    border-color: rgba(244,162,97,.5);
}

/* Fav button in sort row — same dimensions, different active color */
.djsets-fe-sort-btn.djsets-fav-btn {
    min-width: 42px;
    justify-content: center;
}

.djsets-fe-sort-btn.djsets-fav-btn.active {
    background: rgba(255,107,138,.15);
    border-color: rgba(255,107,138,.5);
    color: #ff6b8a;
    box-shadow: 0 0 8px rgba(255,107,138,.15);
}

.djsets-fav-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.djsets-set-divider {
    height: 1px;
    background: var(--djsets-card-border);
}

/* ---------- TRACK LIST ---------- */
.djsets-track-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Scroll after 10 tracks — ~10 × 74px ≈ 740px */
.djsets-track-list--scroll {
    max-height: 888px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(244,162,97,.35) transparent;
}

.djsets-track-list--scroll::-webkit-scrollbar {
    width: 5px;
}
.djsets-track-list--scroll::-webkit-scrollbar-track {
    background: transparent;
}
.djsets-track-list--scroll::-webkit-scrollbar-thumb {
    background: rgba(244,162,97,.35);
    border-radius: 3px;
}
.djsets-track-list--scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(244,162,97,.6);
}

/* ---------- DOWNLOAD BUTTON ---------- */
.djsets-cover-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 16px;
    background: rgba(244,162,97,.12);
    border: 1px solid rgba(244,162,97,.35);
    border-radius: 10px;
    color: var(--djsets-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .12s;
    width: 100%;
    box-sizing: border-box;
}

.djsets-cover-download i {
    font-size: 13px;
    flex-shrink: 0;
}

.djsets-cover-download:hover {
    background: rgba(244,162,97,.22);
    border-color: var(--djsets-accent);
    color: var(--djsets-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

.djsets-no-tracks {
    padding: 48px 28px;
    text-align: center;
    color: var(--djsets-text-dim);
}

.djsets-no-tracks i {
    font-size: 36px;
    margin-bottom: 12px;
    display: block;
    opacity: .4;
}

.djsets-no-tracks p {
    margin: 0;
    font-size: 14px;
}

/* ---------- SINGLE TRACK ROW ---------- */
.djsets-track-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--djsets-row-border);
    transition: background .15s;
}

.djsets-track-row:last-child {
    border-bottom: none;
}

.djsets-track-row:hover {
    background: var(--djsets-row-hover);
}

/* ---------- TRACK COVER THUMBNAIL (veći) ---------- */
.djsets-track-cover {
    width: 108px;
    height: 108px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--djsets-card-border);
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.djsets-track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.djsets-track-cover-ph {
    color: var(--djsets-text-dim);
    font-size: 20px;
    opacity: .45;
}

/* ---------- TRACK NUMBER ---------- */
.djsets-track-num {
    font-size: 13px;
    color: var(--djsets-text-dim);
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: .6;
}

/* ---------- TRACK INFO COLUMN ---------- */
.djsets-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.djsets-track-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--djsets-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

/* ---------- ARTIST ROW ---------- */
.djsets-meta-artist {
    font-size: 13px;
    color: var(--djsets-text-dim);
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.35;
}

.djsets-meta-artist i {
    font-size: 12px;
    color: var(--djsets-accent);
    opacity: .7;
    flex-shrink: 0;
}

/* ---------- BADGES ROW ---------- */
.djsets-track-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 3px;
}

/* inline meta (unused in template but kept for potential reuse) */
.djsets-track-meta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 3px;
}

.djsets-track-meta-text {
    font-size: 11px;
    color: var(--djsets-text-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.djsets-track-meta-sep {
    color: var(--djsets-text-dim);
    opacity: .4;
    font-size: 11px;
}

/* ---------- BADGES ---------- */
.djsets-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}

.djsets-badge i { font-size: 9px; }

.djsets-badge-key {
    background: rgba(244,162,97,.15);
    border-color: rgba(244,162,97,.4);
    color: var(--djsets-accent);
}

.djsets-badge-bpm {
    background: rgba(231,111,81,.15);
    border-color: rgba(231,111,81,.4);
    color: var(--djsets-accent2);
}

.djsets-badge-energy {
    background: transparent;
    border-color: rgba(255,255,255,.12);
    color: var(--djsets-text-dim);
    min-width: 36px;
    font-variant-numeric: tabular-nums;
}

.djsets-energy-icon {
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

/* Low  1–3 */
.djsets-badge-energy.energy-low  {
    border-color: rgba(116,185,255,.3);
    color: #74b9ff;
    background: rgba(116,185,255,.08);
}
/* Mid  4–6 */
.djsets-badge-energy.energy-mid  {
    border-color: rgba(253,203,110,.3);
    color: #fdcb6e;
    background: rgba(253,203,110,.08);
}
/* High 7–10 */
.djsets-badge-energy.energy-high {
    border-color: rgba(255,118,117,.3);
    color: #ff7675;
    background: rgba(255,118,117,.08);
}

/* ---------- COPY BUTTON ---------- */
.djsets-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--djsets-text-dim);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
    flex-shrink: 0;
    line-height: 1;
}

.djsets-track-row:hover .djsets-copy-btn {
    opacity: 1;
}

.djsets-copy-btn:hover {
    background: rgba(244,162,97,.15);
    color: var(--djsets-accent);
    opacity: 1;
}

/* download txt button distinct style */
.djsets-fe-download-txt {
    margin-left: auto;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: var(--djsets-text-dim) !important;
}

.djsets-fe-download-txt:hover {
    background: rgba(244,162,97,.15) !important;
    border-color: var(--djsets-accent) !important;
    color: var(--djsets-accent) !important;
}
.djsets-badge-cam.cam-1a,  .djsets-meta-cam-dot.cam-1a  { background:rgba(255, 82, 82,.18); border-color:rgba(255, 82, 82,.5); color:#ff5252; }
.djsets-badge-cam.cam-1b,  .djsets-meta-cam-dot.cam-1b  { background:rgba(255,121,121,.18); border-color:rgba(255,121,121,.5); color:#ff7979; }
.djsets-badge-cam.cam-2a,  .djsets-meta-cam-dot.cam-2a  { background:rgba(255,111, 30,.18); border-color:rgba(255,111, 30,.5); color:#ff6f1e; }
.djsets-badge-cam.cam-2b,  .djsets-meta-cam-dot.cam-2b  { background:rgba(255,145, 80,.18); border-color:rgba(255,145, 80,.5); color:#ff9150; }
.djsets-badge-cam.cam-3a,  .djsets-meta-cam-dot.cam-3a  { background:rgba(255,171,  0,.18); border-color:rgba(255,171,  0,.5); color:#ffab00; }
.djsets-badge-cam.cam-3b,  .djsets-meta-cam-dot.cam-3b  { background:rgba(255,196, 60,.18); border-color:rgba(255,196, 60,.5); color:#ffc43c; }
.djsets-badge-cam.cam-4a,  .djsets-meta-cam-dot.cam-4a  { background:rgba(204,220,  0,.18); border-color:rgba(204,220,  0,.5); color:#ccdc00; }
.djsets-badge-cam.cam-4b,  .djsets-meta-cam-dot.cam-4b  { background:rgba(220,237, 70,.18); border-color:rgba(220,237, 70,.5); color:#dced46; }
.djsets-badge-cam.cam-5a,  .djsets-meta-cam-dot.cam-5a  { background:rgba( 68,215, 68,.18); border-color:rgba( 68,215, 68,.5); color:#44d744; }
.djsets-badge-cam.cam-5b,  .djsets-meta-cam-dot.cam-5b  { background:rgba(102,232,102,.18); border-color:rgba(102,232,102,.5); color:#66e866; }
.djsets-badge-cam.cam-6a,  .djsets-meta-cam-dot.cam-6a  { background:rgba(  0,214,143,.18); border-color:rgba(  0,214,143,.5); color:#00d68f; }
.djsets-badge-cam.cam-6b,  .djsets-meta-cam-dot.cam-6b  { background:rgba( 50,230,170,.18); border-color:rgba( 50,230,170,.5); color:#32e6aa; }
.djsets-badge-cam.cam-7a,  .djsets-meta-cam-dot.cam-7a  { background:rgba(  0,210,210,.18); border-color:rgba(  0,210,210,.5); color:#00d2d2; }
.djsets-badge-cam.cam-7b,  .djsets-meta-cam-dot.cam-7b  { background:rgba( 50,225,225,.18); border-color:rgba( 50,225,225,.5); color:#32e1e1; }
.djsets-badge-cam.cam-8a,  .djsets-meta-cam-dot.cam-8a  { background:rgba(  0,176,255,.18); border-color:rgba(  0,176,255,.5); color:#00b0ff; }
.djsets-badge-cam.cam-8b,  .djsets-meta-cam-dot.cam-8b  { background:rgba( 64,196,255,.18); border-color:rgba( 64,196,255,.5); color:#40c4ff; }
.djsets-badge-cam.cam-9a,  .djsets-meta-cam-dot.cam-9a  { background:rgba( 41,121,255,.18); border-color:rgba( 41,121,255,.5); color:#2979ff; }
.djsets-badge-cam.cam-9b,  .djsets-meta-cam-dot.cam-9b  { background:rgba( 82,155,255,.18); border-color:rgba( 82,155,255,.5); color:#529bff; }
.djsets-badge-cam.cam-10a, .djsets-meta-cam-dot.cam-10a { background:rgba(101, 31,255,.18); border-color:rgba(101, 31,255,.5); color:#651fff; }
.djsets-badge-cam.cam-10b, .djsets-meta-cam-dot.cam-10b { background:rgba(139, 80,255,.18); border-color:rgba(139, 80,255,.5); color:#8b50ff; }
.djsets-badge-cam.cam-11a, .djsets-meta-cam-dot.cam-11a { background:rgba(213,  0,249,.18); border-color:rgba(213,  0,249,.5); color:#d500f9; }
.djsets-badge-cam.cam-11b, .djsets-meta-cam-dot.cam-11b { background:rgba(228, 80,255,.18); border-color:rgba(228, 80,255,.5); color:#e450ff; }
.djsets-badge-cam.cam-12a, .djsets-meta-cam-dot.cam-12a { background:rgba(245,  0, 87,.18); border-color:rgba(245,  0, 87,.5); color:#f50057; }
.djsets-badge-cam.cam-12b, .djsets-meta-cam-dot.cam-12b { background:rgba(255, 64,129,.18); border-color:rgba(255, 64,129,.5); color:#ff4081; }

/* ---------- RESPONSIVE ---------- */

/* Tablet */
@media (max-width: 900px) {
    .djsets-set-wrap { gap: 24px; }
    .djsets-cover-col { width: 200px; }
    .djsets-fe-sort-row { gap: 5px; }
    .djsets-fe-sort-btn { padding: 3px 9px; font-size: 10px; }
}

/* Mobile — full stack: cover → download → tracklist */
@media (max-width: 640px) {
    .djsets-page { padding: 16px 6px; }
    .djsets-set-wrap {
        flex-direction: column;
        gap: 14px;
        width: 100%;
        overflow-x: hidden;
    }

    /* Cover col: image centered + gumb ispod */
    .djsets-cover-col {
        width: 100%;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .djsets-cover-img-wrap,
    .djsets-cover-placeholder {
        width: 100%;
        flex-shrink: 0;
    }

    .djsets-cover-download {
        width: 100%;
        box-sizing: border-box;
        padding: 11px 16px;
        font-size: 13px;
    }

    /* Meta box ispod gumba */
    .djsets-cover-meta-box {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        gap: 8px;
        margin-top: 0;
    }

    /* Tracklist full width */
    .djsets-tracklist-col {
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
    }

    .djsets-set-header { padding: 14px 12px 0; }
    .djsets-set-title { font-size: 17px; margin-bottom: 10px; }

    .djsets-fe-sort-row {
        gap: 4px;
        flex-wrap: wrap;
    }

    .djsets-fe-sort-label { width: 100%; margin-bottom: 2px; }
    .djsets-fe-sort-btn { padding: 4px 8px; font-size: 10px; }
    .djsets-fe-download-txt { margin-left: 0; font-size: 10px; }

    .djsets-track-row {
        padding: 8px 10px;
        gap: 8px;
    }

    .djsets-track-cover { width: 42px; height: 42px; }

    .djsets-track-num { min-width: 18px; font-size: 11px; }
    .djsets-track-name { font-size: 12px; }
    .djsets-meta-artist { font-size: 11px; }
    .djsets-badge { padding: 2px 6px; font-size: 10px; }
    .djsets-track-meta-text { font-size: 10px; }

    /* copy btn uvijek vidljiv na mobu */
    .djsets-copy-btn { opacity: 0.5; }
}


/* ============================================================
   DJ SETS LIST — [djsets_lista] shortcode
   ============================================================ */

.djsets-list-wrap {
    --djsets-bg:          linear-gradient(135deg, #2d1b4e 0%, #1a1035 100%);
    --djsets-card-bg:     rgba(20, 15, 40, 0.45);
    --djsets-card-border: rgba(244, 162, 97, 0.3);
    --djsets-accent:      #F4A261;
    --djsets-accent2:     #E76F51;
    --djsets-text:        #ede4d8;
    --djsets-text-dim:    rgba(237, 228, 216, 0.55);
    --djsets-row-border:  rgba(244, 162, 97, 0.12);
    --djsets-blur:        blur(20px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

/* ---------- CARD ---------- */
.djsets-card {
    display: flex;
    align-items: stretch;
    background: var(--djsets-card-bg);
    border: 2px solid var(--djsets-card-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    backdrop-filter: var(--djsets-blur);
    -webkit-backdrop-filter: var(--djsets-blur);
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.djsets-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0,0,0,.5);
    border-color: var(--djsets-accent);
}

/* ---------- COVER 1:1 ---------- */
.djsets-card-cover {
    flex-shrink: 0;
    width: 160px;
    position: relative;
    overflow: hidden;
}

.djsets-card-cover-link {
    display: block;
    width: 100%;
    height: 100%;
}

.djsets-card-cover img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.djsets-card-cover-ph {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--djsets-text-dim);
    opacity: .4;
    background: rgba(255,255,255,.02);
}

/* ---------- INFO PANEL ---------- */
.djsets-card-info {
    flex: 1;
    min-width: 0;
    padding: 14px 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- TOP: title + subtitle ---------- */
.djsets-card-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.djsets-card-title-link {
    text-decoration: none;
    color: inherit;
}

.djsets-card-title-link:hover .djsets-card-title {
    color: #fff;
}

.djsets-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--djsets-accent);
    line-height: 1.2;
    letter-spacing: -.3px;
    word-break: break-word;
}

.djsets-card-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--djsets-text-dim);
    font-family: inherit;
}

.djsets-card-sub-date,
.djsets-card-sub-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.djsets-card-sub-date i,
.djsets-card-sub-item i {
    font-size: 10px;
    color: var(--djsets-accent);
    opacity: .7;
}

.djsets-card-sub-sep {
    color: var(--djsets-accent);
    opacity: .4;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

/* ---------- MID: camelot keys full width ---------- */
.djsets-card-cams-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    flex: 1;
}

/* ---------- BOTTOM: download buttons ---------- */
.djsets-card-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--djsets-row-border);
}

.djsets-card-dl-btns {
    display: flex;
    gap: 7px;
}

/* Looks like djsets-cover-download but compact, not full-width */
.djsets-card-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(244,162,97,.10);
    border: 1px solid rgba(244,162,97,.4);
    border-radius: 10px;
    color: var(--djsets-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, border-color .18s, transform .12s;
}

.djsets-card-dl-btn i { font-size: 12px; flex-shrink: 0; }

.djsets-card-dl-btn:hover {
    background: rgba(244,162,97,.22);
    border-color: var(--djsets-accent);
    color: var(--djsets-accent);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ---------- PAGINATION ---------- */
.djsets-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 24px 0 10px;
}

.djsets-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 9px;
    background: rgba(20, 12, 44, 0.7);
    border: 1px solid rgba(244,162,97,.2);
    color: rgba(237,228,216,.55);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.djsets-page-btn:hover:not(.active):not(.djsets-page-disabled):not(.djsets-page-ellipsis) {
    background: rgba(244,162,97,.13);
    border-color: rgba(244,162,97,.55);
    color: #F4A261;
    text-decoration: none;
    transform: translateY(-1px);
}

.djsets-page-btn.active {
    background: linear-gradient(135deg, rgba(244,162,97,.28) 0%, rgba(244,162,97,.14) 100%);
    border-color: #F4A261;
    color: #F4A261;
    cursor: default;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(244,162,97,.2);
}

.djsets-page-arrow { min-width: 38px; }
.djsets-page-disabled { opacity: .22; cursor: default; pointer-events: none; }
.djsets-page-ellipsis {
    background: transparent;
    border-color: transparent;
    color: rgba(237,228,216,.28);
    cursor: default;
    pointer-events: none;
    min-width: 24px;
    font-size: 15px;
}

.djsets-list-empty {
    color: rgba(237,228,216,.5);
    font-size: 14px;
    text-align: center;
    padding: 30px;
}

/* Mobile card */
@media (max-width: 500px) {
    .djsets-card { flex-direction: column; }
    .djsets-card-cover { width: 100%; }
    .djsets-card-cover img { aspect-ratio: 1 / 1; width: 100%; }
    .djsets-card-info { padding: 12px 14px 10px; }
    .djsets-card-title { font-size: 17px; }
}

/* ============================================================
   FAVORITI
   ============================================================ */

/* --- Single post: fav btn u sort rowu --- */
.djsets-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .18s;
}

.djsets-fav-btn i {
    transition: color .18s, transform .18s;
}

.djsets-fav-btn.active i {
    color: #ff6b8a;
}

.djsets-fav-btn:not(.active):hover i {
    color: #ff6b8a;
    transform: scale(1.2);
}

.djsets-fav-btn.loading {
    opacity: .5;
    pointer-events: none;
}

.djsets-fav-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 12px;
}

/* --- Archive card: srce overlay na cover --- */
.djsets-card-cover {
    position: relative;
}

.djsets-card-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s, border-color .15s;
    z-index: 2;
    flex-direction: column;
    gap: 1px;
}

.djsets-card-fav-btn i {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    transition: color .18s, transform .18s;
    line-height: 1;
}

.djsets-card-fav-btn .djsets-fav-count {
    font-size: 9px;
    color: rgba(255,255,255,.6);
    line-height: 1;
}

.djsets-card-fav-btn:hover {
    background: rgba(0,0,0,.75);
    border-color: rgba(255,107,138,.5);
    transform: scale(1.1);
}

.djsets-card-fav-btn:hover i {
    color: #ff6b8a;
}

.djsets-card-fav-btn.active {
    background: rgba(255,107,138,.2);
    border-color: rgba(255,107,138,.6);
}

.djsets-card-fav-btn.active i {
    color: #ff6b8a;
}

.djsets-card-fav-btn.active .djsets-fav-count {
    color: #ff6b8a;
}


/* ============================================================
   FILTER BAR
   ============================================================ */
.djsets-filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 14px; margin-bottom: 14px;
    background: rgba(244,162,97,.08); border: 1px solid rgba(244,162,97,.3);
    border-radius: 10px; font-size: 12px;
}
.djsets-filter-bar-label { color: rgba(237,228,216,.5); display: flex; align-items: center; gap: 5px; }
.djsets-filter-bar-artist { font-weight: 700; color: #F4A261; }
.djsets-filter-bar-clear {
    margin-left: auto; color: rgba(237,228,216,.45); text-decoration: none;
    font-size: 11px; display: flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(237,228,216,.15); transition: all .15s;
}
.djsets-filter-bar-clear:hover { color:#e74c3c; border-color:rgba(231,76,60,.4); background:rgba(231,76,60,.08); text-decoration:none; }

/* ============================================================
   SM-SET-CARD — bez slike, čisti dizajn
   ============================================================ */
.djsets-list-wrap {
    --c-accent:  #F4A261;
    --c-accent2: #E76F51;
    --c-bg:      rgb(16 9 36 / 68%);
    --c-border:  rgba(244, 162, 97, 0.2);
    --c-border-h:rgba(244, 162, 97, 0.55);
    --c-dim:     rgba(237, 228, 216, 0.5);
    --c-line:    rgba(244, 162, 97, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.sm-set-card {
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 3px 16px rgba(0,0,0,.35);
    transition: box-shadow .18s, border-color .18s, transform .15s;
    padding: 16px 20px 14px;
    gap: 10px;
    position: relative;
}
.sm-set-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(244,162,97,0) 0%, rgba(244,162,97,.35) 50%, rgba(244,162,97,0) 100%);
}
.sm-set-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-border-h);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
}

/* ── HEAD: naslov + datum/meta u jednom redu ── */
.sm-set-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sm-set-card__title-wrap { flex: 1; min-width: 0; }
.sm-set-card__title-link { display: block; text-decoration: none; color: inherit; }
.sm-set-card__title-link:hover .sm-set-card__title { color: #fff; }
.sm-set-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #F4A261;
    line-height: 1.3;
    letter-spacing: -.3px;
    word-break: break-word;
}
.sm-set-card__meta-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 2px;
}
.sm-set-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--c-dim);
    font-weight: 500;
}
.sm-set-card__meta-item i { font-size: 10px; color: #F4A261; opacity: .65; }
.sm-set-card__meta-sep { color: rgba(244,162,97,.3); }

/* ── DIVIDER ── */
.sm-set-card__divider {
    height: 1px;
    background: var(--c-line);
    margin: 0 -20px;
}

/* ── KEYS: cam + key pillovi ── */
.sm-set-card__keys-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.sm-set-card__key-group { display: inline-flex; align-items: center; gap: 4px; }
.sm-set-card__key-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: rgba(237,228,216,.28); flex-shrink: 0;
}
.sm-set-card__key-label--key { color: rgba(100,200,255,.32); }

/* ── ARTISTS ── */
.sm-set-card__artists-wrap {}
.sm-set-card__artists-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sm-set-card__artist-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(237,228,216,.12);
    color: rgba(237,228,216,.58);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.sm-set-card__artist-tag:hover,
.sm-set-card__artist-tag--on {
    background: rgba(244,162,97,.12);
    border-color: rgba(244,162,97,.45);
    color: #F4A261;
    text-decoration: none;
}
.sm-set-card__artists-more {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(244,162,97,.5);
    cursor: pointer;
    transition: color .12s;
}
.sm-set-card__artists-more:hover { color: #F4A261; }

/* ── ACTIONS ── */
.sm-set-card__actions-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--c-line);
}
.sm-set-card__keys-in-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.sm-set-card__action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.sm-set-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s;
}
.sm-set-card__btn--dl  { background: rgba(244,162,97,.09); border: 1px solid rgba(244,162,97,.35); color: #F4A261; }
.sm-set-card__btn--txt { background: rgba(231,111,81,.09); border: 1px solid rgba(231,111,81,.35); color: #E76F51; }
.sm-set-card__btn:hover { background: rgba(244,162,97,.2); border-color: #F4A261; color: #F4A261; transform: translateY(-1px); }
.sm-set-card__btn i { font-size: 12px; flex-shrink: 0; }

/* Key pill */
.djsets-meta-key-dot {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(100,200,255,.08);
    color: rgba(100,200,255,.75);
    border: 1px solid rgba(100,200,255,.2);
    letter-spacing: .3px;
}

/* Mobile */
/* ============================================================
   VIEW TOGGLE TOOLBAR
   ============================================================ */
.djsets-view-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 16px;
    background: rgba(20, 12, 44, 0.7);
    border: 1px solid rgba(244, 162, 97, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.djsets-view-count {
    font-size: 12px;
    color: rgba(237,228,216,.45);
    font-weight: 600;
    letter-spacing: .3px;
    margin-right: auto;
}
.djsets-view-count strong {
    color: #F4A261;
    font-weight: 800;
}
.djsets-view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(244,162,97,.15);
    border-radius: 9px;
    padding: 4px;
}
.djsets-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(237,228,216,.35);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.djsets-view-btn:hover {
    color: #F4A261;
    background: rgba(244,162,97,.1);
}
.djsets-view-btn.active {
    background: linear-gradient(135deg, rgba(244,162,97,.28) 0%, rgba(244,162,97,.14) 100%);
    color: #F4A261;
    box-shadow: 0 2px 8px rgba(244,162,97,.2), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   GRID VIEW — 3 kolone
   ============================================================ */
.djsets-list-wrap.djsets-view-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* Grid kartica — kompaktna, vertikalna */
.djsets-view-grid .sm-set-card {
    padding: 14px 16px 13px;
    gap: 8px;
}

/* Grid head: naslov puna širina, meta ispod */
.djsets-view-grid .sm-set-card__head {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
.djsets-view-grid .sm-set-card__title {
    font-size: 16px;
    line-height: 1.35;
}
.djsets-view-grid .sm-set-card__meta-wrap {
    padding-top: 0;
    flex-shrink: 1;
}
.djsets-view-grid .sm-set-card__meta-item { font-size: 12px; }

/* Grid artists: kompaktne oznake */
.djsets-view-grid .sm-set-card__artist-tag {
    font-size: 9.5px;
    padding: 2px 7px;
}

/* Grid actions: keys gore, gumbi kompaktni */
.djsets-view-grid .sm-set-card__actions-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.djsets-view-grid .sm-set-card__keys-in-actions { width: 100%; flex-wrap: wrap; }
.djsets-view-grid .sm-set-card__action-btns { width: 100%; gap: 6px; }
.djsets-view-grid .sm-set-card__btn {
    flex: 1;
    justify-content: center;
    font-size: 10.5px;
    padding: 6px 8px;
    gap: 5px;
}
.djsets-view-grid .sm-set-card__btn span { display: none; }
.djsets-view-grid .sm-set-card__btn i { font-size: 13px; }
.djsets-view-grid .sm-set-card__btn--dl::after  { content: 'ArtCover'; font-size: 10.5px; }
.djsets-view-grid .sm-set-card__btn--txt::after { content: '.txt Set';  font-size: 10.5px; }

/* Grid responsive */
@media (max-width: 900px) {
    .djsets-list-wrap.djsets-view-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .djsets-list-wrap.djsets-view-grid { grid-template-columns: 1fr; }
    .djsets-view-toolbar { margin-bottom: 8px; }
}



/* --- MOBILE: do 560px --- */
@media (max-width: 560px) {

    /* List */
    .djsets-list-wrap { gap: 8px; }

    /* Card */
    .sm-set-card {
        padding: 13px 14px 12px;
        gap: 8px;
        border-radius: 12px;
    }
    .sm-set-card__divider { margin: 0 -14px; }

    /* Head: naslov cijela širina, meta ispod */
    .sm-set-card__head {
        flex-direction: column;
        gap: 4px;
    }
    .sm-set-card__meta-wrap {
        flex-shrink: 1;
        padding-top: 0;
    }
    .sm-set-card__title { font-size: 15px; line-height: 1.3; }
    .sm-set-card__meta-item { font-size: 10.5px; }

    /* Artists */
    .sm-set-card__artist-tag { font-size: 9.5px; padding: 2px 7px; }

    /* Actions: sve u kolonu */
    .sm-set-card__actions-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .sm-set-card__keys-in-actions {
        width: 100%;
    }
    .sm-set-card__action-btns {
        width: 100%;
        justify-content: stretch;
    }
    .sm-set-card__btn {
        flex: 1;
        justify-content: center;
        font-size: 11px;
        padding: 7px 10px;
    }
}

/* --- TABLET: 561px–900px --- */
@media (min-width: 561px) and (max-width: 900px) {
    .sm-set-card { padding: 14px 16px 13px; gap: 9px; }
    .sm-set-card__title { font-size: 16px; }
    .sm-set-card__meta-item { font-size: 11px; }

    /* Actions: keys wrap ako treba */
    .sm-set-card__actions-wrap { flex-wrap: wrap; }
    .sm-set-card__keys-in-actions { flex-wrap: wrap; }
    .sm-set-card__action-btns { flex-shrink: 0; }
}

/* --- DESKTOP: 901px+ --- */
@media (min-width: 901px) {
    .sm-set-card__head { flex-wrap: nowrap; }
    .sm-set-card__meta-wrap { flex-shrink: 0; }
    .sm-set-card__action-btns { flex-shrink: 0; }
}












/* ============================================================
   PAGE LAYOUT — sidebar + main
   ============================================================ */
.djsets-page-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.djsets-sidebar {
    flex-shrink: 0;
    width: 440px;
    position: sticky;
    top: 24px;
    background: rgb(16 9 36 / 72%);
    border: 1px solid rgba(244,162,97,.2);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

/* Header */
.djsets-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(244,162,97,.12);
}
.djsets-sidebar-title {
    font-size: 14px;
    font-weight: 800;
    color: #F4A261;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .3px;
}
.djsets-sidebar-title i { font-size: 13px; opacity: .85; }
.djsets-sidebar-reset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: rgba(231,76,60,.75);
    text-decoration: none;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 8px;
    border: 1px solid rgba(231,76,60,.3);
    transition: all .12s;
}
.djsets-sidebar-reset:hover { color: #e74c3c; border-color: rgba(231,76,60,.6); background: rgba(231,76,60,.08); text-decoration: none; }

/* Section */
.djsets-sidebar-section {
    padding: 13px 0;
    border-bottom: 1px solid rgba(244,162,97,.08);
}
.djsets-sidebar-section:last-child { border-bottom: none; padding-bottom: 0; }

.djsets-sidebar-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(237,228,216,.32);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.djsets-sb-hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(237,228,216,.2);
    font-size: 9px;
}

/* ── Camelot grid ── */
.djsets-sidebar-cam-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}
.djsets-sidebar-cam {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 2px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    transition: opacity .15s, transform .12s, box-shadow .15s, filter .15s;
    cursor: pointer;
    opacity: .6;
    letter-spacing: .2px;
}
.djsets-sidebar-cam:hover { opacity: 1; transform: scale(1.08); text-decoration: none; }
.djsets-sidebar-cam.active {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,.25);
    transform: scale(1.05);
}
.djsets-sidebar-cam.incompat {
    opacity: .35;
    filter: grayscale(.6);
    box-shadow: 0 0 0 2px rgba(231,76,60,.5) !important;
}

/* Compat warning */
.djsets-sb-compat-warning {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 9px;
    padding: 11px 13px;
    background: linear-gradient(135deg, rgba(231,76,60,.1) 0%, rgba(192,57,43,.06) 100%);
    border: 1px solid rgba(231,76,60,.35);
    border-left: 3px solid #e74c3c;
    border-radius: 9px;
    font-size: 11.5px;
    color: rgba(237,228,216,.8);
    line-height: 1.5;
}
.djsets-sb-compat-warning .djsets-cw-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #e74c3c;
    font-size: 11px;
}
.djsets-sb-compat-warning .djsets-cw-title i { font-size: 12px; }
.djsets-sb-compat-warning .djsets-cw-body { color: rgba(237,228,216,.7); font-size: 11px; }
.djsets-sb-compat-warning .djsets-cw-rec {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 10.5px;
    color: rgba(237,228,216,.5);
}
.djsets-sb-compat-warning .djsets-cw-rec strong { color: #F4A261; }

/* ── Key pills ── */
.djsets-sidebar-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.djsets-sidebar-key {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(100,200,255,.07);
    border: 1px solid rgba(100,200,255,.2);
    color: rgba(100,200,255,.65);
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
    cursor: pointer;
}
.djsets-sidebar-key:hover { background: rgba(100,200,255,.15); border-color: rgba(100,200,255,.5); color: #7dd8ff; transform: translateY(-1px); text-decoration: none; }
.djsets-sidebar-key.active { background: rgba(100,200,255,.22); border-color: #7dd8ff; color: #7dd8ff; font-weight: 700; transform: translateY(-1px); }

/* ── Artist search ── */
.djsets-sidebar-artist-search-wrap { margin-bottom: 9px; }
.djsets-sidebar-artist-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(244,162,97,.2);
    border-radius: 9px;
    color: rgba(237,228,216,.85);
    font-size: 12px;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.djsets-sidebar-artist-search::placeholder { color: rgba(237,228,216,.28); }
.djsets-sidebar-artist-search:focus { border-color: rgba(244,162,97,.5); background: rgba(255,255,255,.07); }

/* ── Artist tag cloud ── */
.djsets-sidebar-artist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(244,162,97,.25) transparent;
    padding-right: 2px;
}
.djsets-sidebar-artist-tags::-webkit-scrollbar { width: 3px; }
.djsets-sidebar-artist-tags::-webkit-scrollbar-thumb { background: rgba(244,162,97,.3); border-radius: 3px; }

.djsets-sidebar-artist-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(237,228,216,.13);
    color: rgba(237,228,216,.58);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.djsets-sidebar-artist-tag:hover {
    background: rgba(244,162,97,.12);
    border-color: rgba(244,162,97,.45);
    color: #F4A261;
    text-decoration: none;
}
.djsets-sidebar-artist-tag.active {
    background: rgba(244,162,97,.18);
    border-color: #F4A261;
    color: #F4A261;
    font-weight: 700;
}
.djsets-sb-check { font-size: 9px; opacity: .8; }

/* ── MAIN ── */
.djsets-main { flex: 1; min-width: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .djsets-sidebar { width: 320px; }
    .djsets-sidebar-cam-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 820px) {
    .djsets-sidebar { width: 240px; }
    .djsets-sidebar-cam-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
    .djsets-page-layout { flex-direction: column; }
    .djsets-sidebar { width: 100%; position: static; }
    .djsets-sidebar-cam-grid { grid-template-columns: repeat(6, 1fr); }
    .djsets-sidebar-artist-tags { max-height: 130px; }
}


/* ============================================================
   SIDEBAR ARTIST DROPDOWN  (frontend, dark theme)
   ============================================================ */
.djsets-fss-wrap {
    position: relative;
}

.djsets-fss-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(244,162,97,.25);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.djsets-fss-trigger:hover,
.djsets-fss-wrap.open .djsets-fss-trigger {
    border-color: rgba(244,162,97,.55);
    background: rgba(255,255,255,.07);
}

.djsets-fss-display {
    font-size: 12px;
    color: rgba(237,228,216,.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.djsets-fss-arrow {
    font-size: 11px;
    color: rgba(244,162,97,.5);
    flex-shrink: 0;
    margin-left: 6px;
    transition: transform .2s;
}
.djsets-fss-wrap.open .djsets-fss-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.djsets-fss-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 999;
    background: rgb(22 12 48 / 97%);
    border: 1px solid rgba(244,162,97,.3);
    border-radius: 11px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Search input */
.djsets-fss-search-wrap { padding: 9px 10px 7px; border-bottom: 1px solid rgba(244,162,97,.1); }
.djsets-fss-search {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 11px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(244,162,97,.2);
    border-radius: 8px;
    color: rgba(237,228,216,.9);
    font-size: 12px;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.djsets-fss-search::placeholder { color: rgba(237,228,216,.3); }
.djsets-fss-search:focus { border-color: rgba(244,162,97,.55); background: rgba(255,255,255,.09); }

/* List */
.djsets-fss-list {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(244,162,97,.25) transparent;
}
.djsets-fss-list::-webkit-scrollbar { width: 3px; }
.djsets-fss-list::-webkit-scrollbar-thumb { background: rgba(244,162,97,.3); border-radius: 3px; }

.djsets-fss-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: rgba(237,228,216,.65);
    cursor: pointer;
    transition: background .1s, color .1s;
    user-select: none;
}
.djsets-fss-item:hover { background: rgba(244,162,97,.1); color: rgba(237,228,216,.9); }
.djsets-fss-item.active { color: #F4A261; }
.djsets-fss-item-all { color: rgba(237,228,216,.4); font-style: italic; border-bottom: 1px solid rgba(244,162,97,.08); }

.djsets-fss-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #F4A261;
    font-weight: 700;
}
.djsets-fss-empty { padding: 10px 12px; font-size: 11px; color: rgba(237,228,216,.3); font-style: italic; }

/* Footer */
.djsets-fss-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-top: 1px solid rgba(244,162,97,.1);
    gap: 8px;
}
.djsets-fss-hint { font-size: 10px; color: rgba(237,228,216,.25); }
.djsets-fss-close-hint { font-size: 10px; color: rgba(244,162,97,.45); font-style: italic; }
.djsets-fss-apply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 7px;
    background: rgba(244,162,97,.15);
    border: 1px solid rgba(244,162,97,.4);
    color: #F4A261;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.djsets-fss-apply:hover { background: rgba(244,162,97,.25); border-color: #F4A261; }

/* Active artist tags below dropdown */
.djsets-fss-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.djsets-fss-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(244,162,97,.16);
    border: 1px solid rgba(244,162,97,.4);
    color: #F4A261;
}
.djsets-fss-tag-rm {
    background: none;
    border: none;
    padding: 0;
    color: rgba(244,162,97,.6);
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    transition: color .1s;
}
.djsets-fss-tag-rm:hover { color: #e74c3c; }

/* ── Cam ↔ Key cross-highlight ── */
.djsets-sidebar-key.cam-linked {
    background: rgba(244,162,97,.12);
    border-color: rgba(244,162,97,.4);
    color: #F4A261;
    box-shadow: 0 0 0 1px rgba(244,162,97,.25);
}
.djsets-sidebar-cam.key-linked {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(100,200,255,.4);
}

/* ── Harmonijska ljestvica selector ── */
.djsets-harm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}
.djsets-harm-btn {
    padding: 5px 2px;
    border-radius: 8px;
    border: 1px solid rgba(244,162,97,.18);
    background: rgba(255,255,255,.04);
    color: rgba(237,228,216,.55);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.djsets-harm-btn:hover {
    border-color: rgba(244,162,97,.5);
    background: rgba(244,162,97,.1);
    color: #F4A261;
}
.djsets-harm-btn.active {
    border-color: #F4A261;
    background: rgba(244,162,97,.2);
    color: #F4A261;
    box-shadow: 0 0 8px rgba(244,162,97,.25);
}

.djsets-harm-info {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(100,200,255,.06);
    border: 1px solid rgba(100,200,255,.2);
    border-radius: 8px;
    font-size: 10.5px;
    color: rgba(237,228,216,.7);
    line-height: 1.5;
    flex-wrap: wrap;
}
.djsets-harm-info i { color: rgba(100,200,255,.7); flex-shrink: 0; margin-top: 2px; }
.djsets-harm-info strong { color: #7dd8ff; }

/* Harm highlight states */
.djsets-sidebar-cam.harm-root {
    opacity: 1 !important;
    box-shadow: 0 0 0 2px #F4A261, 0 0 10px rgba(244,162,97,.4) !important;
    transform: scale(1.1);
}
.djsets-sidebar-cam.harm-match {
    opacity: 1 !important;
    box-shadow: 0 0 0 1.5px rgba(100,200,255,.5) !important;
}
.djsets-sidebar-cam.harm-dim {
    opacity: .2 !important;
    filter: grayscale(.8);
}
.djsets-sidebar-key.harm-root {
    background: rgba(244,162,97,.22);
    border-color: #F4A261;
    color: #F4A261;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(244,162,97,.3);
}
.djsets-sidebar-key.harm-match {
    background: rgba(100,200,255,.15);
    border-color: rgba(100,200,255,.5);
    color: #7dd8ff;
}
.djsets-sidebar-key.harm-dim {
    opacity: .2;
}

/* ── Harm legend ── */
.djsets-harm-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
    margin-top: 8px;
    padding: 9px 11px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(244,162,97,.1);
    border-radius: 9px;
}
.djsets-harm-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: rgba(237,228,216,.45);
    white-space: nowrap;
}
.djsets-harm-legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.djsets-harm-legend-dot--active {
    background: rgba(244,162,97,.2);
    border-color: #F4A261;
    box-shadow: 0 0 6px rgba(244,162,97,.4);
}
.djsets-harm-legend-dot--root {
    background: rgba(244,162,97,.22);
    border-color: #F4A261;
    box-shadow: 0 0 0 2px #F4A261, 0 0 8px rgba(244,162,97,.35);
}
.djsets-harm-legend-dot--compat {
    background: rgba(100,200,255,.12);
    border-color: rgba(100,200,255,.5);
}
.djsets-harm-legend-dot--dim {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
    opacity: .35;
}