/* =========================================================
   PAREACLUB DJ MODERN SKINS V3
========================================================= */

#djPlayerWindow.dj-modern-v3 {
    --dj-bg-1: #071013;
    --dj-bg-2: #111b1f;
    --dj-panel: rgba(12, 22, 26, .92);
    --dj-panel-2: rgba(20, 31, 36, .94);
    --dj-accent: #2ee9df;
    --dj-accent-2: #8ffff8;
    --dj-text: #f4fbff;
    --dj-muted: #9db0ba;
    --dj-border: rgba(80, 230, 225, .35);
    --dj-owner: #ffd469;
    --dj-owner-bg: #080b0d;

    width: 520px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;

    border-radius: 18px !important;
    border: 1px solid var(--dj-border) !important;

    background:
        linear-gradient(
            155deg,
            var(--dj-bg-2),
            var(--dj-bg-1)
        ) !important;

    color: var(--dj-text) !important;

    box-shadow:
        0 26px 70px rgba(0,0,0,.58),
        0 0 24px var(--dj-border),
        inset 0 1px rgba(255,255,255,.08) !important;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* AQUA */

#djPlayerWindow.dj-modern-aqua-neon {
    --dj-bg-1: #031315;
    --dj-bg-2: #0b2527;
    --dj-panel: rgba(7,31,33,.94);
    --dj-panel-2: rgba(10,43,45,.92);
    --dj-accent: #20e8dd;
    --dj-accent-2: #86fff7;
    --dj-border: rgba(32,232,221,.42);
    --dj-owner: #ffd166;
    --dj-owner-bg: #061113;
}


/* GRAPHITE */

#djPlayerWindow.dj-modern-graphite-studio {
    --dj-bg-1: #101317;
    --dj-bg-2: #252b31;
    --dj-panel: rgba(30,35,41,.96);
    --dj-panel-2: rgba(42,48,55,.92);
    --dj-accent: #8fc9ff;
    --dj-accent-2: #e3f3ff;
    --dj-border: rgba(145,197,235,.32);
    --dj-owner: #ffd26e;
    --dj-owner-bg: #111417;
}


/* CARBON BLUE */

#djPlayerWindow.dj-modern-carbon-blue {
    --dj-bg-1: #05090e;
    --dj-bg-2: #0c1722;
    --dj-panel: rgba(7,15,23,.96);
    --dj-panel-2: rgba(11,24,36,.94);
    --dj-accent: #168dff;
    --dj-accent-2: #65c6ff;
    --dj-border: rgba(30,145,255,.42);
    --dj-owner: #ffd36a;
    --dj-owner-bg: #05080c;
}


/* CYBER VIOLET */

#djPlayerWindow.dj-modern-cyber-violet {
    --dj-bg-1: #110814;
    --dj-bg-2: #27102e;
    --dj-panel: rgba(30,10,37,.96);
    --dj-panel-2: rgba(49,16,59,.92);
    --dj-accent: #ef45dc;
    --dj-accent-2: #b87cff;
    --dj-border: rgba(238,69,220,.40);
    --dj-owner: #5ff6ff;
    --dj-owner-bg: #100812;
}


/* BLACK GOLD */

#djPlayerWindow.dj-modern-black-gold {
    --dj-bg-1: #090909;
    --dj-bg-2: #18150d;
    --dj-panel: rgba(19,18,14,.97);
    --dj-panel-2: rgba(31,27,17,.94);
    --dj-accent: #d9aa45;
    --dj-accent-2: #ffd978;
    --dj-border: rgba(218,173,73,.40);
    --dj-owner: #ffd86f;
    --dj-owner-bg: #050505;
}


/* HEADER */

#djPlayerWindow.dj-modern-v3
.dj-player-header {
    min-height: 46px !important;
    padding: 8px 12px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.015)
        ) !important;

    border-bottom:
        1px solid var(--dj-border) !important;

    font-weight: 800;
    letter-spacing: .25px;
}


#djPlayerWindow.dj-modern-v3
.dj-player-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}


#djPlayerWindow.dj-modern-v3
.dj-live-dot {
    background:
        var(--dj-accent) !important;

    box-shadow:
        0 0 5px var(--dj-accent),
        0 0 13px var(--dj-accent) !important;
}


/* DJ NAME */

.dj-modern-owner-badge {
    margin-left: auto;

    padding: 5px 10px;

    border-radius: 10px;

    border:
        1px solid var(--dj-accent);

    background:
        var(--dj-owner-bg);

    color:
        var(--dj-owner) !important;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .25px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 0 11px rgba(0,0,0,.30);

    text-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--dj-owner) 58%,
            transparent
        );
}


/* NOW PLAYING */

#djPlayerWindow.dj-modern-v3
.dj-now-playing {
    position: relative;

    margin: 10px !important;
    padding: 10px !important;

    border-radius: 14px;

    border:
        1px solid var(--dj-border);

    background:
        linear-gradient(
            145deg,
            var(--dj-panel-2),
            var(--dj-panel)
        ) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.06);
}


#djPlayerWindow.dj-modern-v3
.dj-cover {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;

    border-radius: 12px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--dj-accent-2);

    background:
        radial-gradient(
            circle,
            var(--dj-accent),
            rgba(0,0,0,.84) 67%
        ) !important;

    box-shadow:
        inset 0 0 22px rgba(255,255,255,.08),
        0 0 16px var(--dj-border) !important;
}


#djPlayerWindow.dj-modern-v3
.dj-small-label {
    color:
        var(--dj-accent) !important;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}


#djPlayerWindow.dj-modern-v3
.dj-now-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--dj-text) !important;
}


#djPlayerWindow.dj-modern-v3
.dj-now-source {
    color:
        var(--dj-accent-2) !important;
}


/* DIGITAL SPECTRUM */

.dj-modern-spectrum {
    margin-left: auto;

    width: 118px;
    height: 56px;

    display: flex;
    align-items: flex-end;
    gap: 3px;

    padding: 7px;

    border-radius: 9px;

    border:
        1px solid var(--dj-border);

    background:
        rgba(0,0,0,.38);

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.58);
}


.dj-modern-spectrum span {
    flex: 1;

    min-width: 2px;
    height: 12%;

    border-radius: 2px 2px 0 0;

    background:
        linear-gradient(
            180deg,
            var(--dj-accent-2),
            var(--dj-accent)
        );

    box-shadow:
        0 0 5px var(--dj-accent);

    transition:
        height 70ms linear;
}


/* PROGRESS + VOLUME */

#djPlayerWindow.dj-modern-v3
.dj-progress-row,
#djPlayerWindow.dj-modern-v3
.dj-volume-row {
    margin:
        7px 12px !important;

    padding:
        7px 9px !important;

    border-radius:
        10px;

    background:
        rgba(0,0,0,.20);
}


#djPlayerWindow.dj-modern-v3
input[type="range"] {
    accent-color:
        var(--dj-accent) !important;
}


/* 3D TRANSPORT */

#djPlayerWindow.dj-modern-v3
.dj-controls {
    gap: 7px !important;
    margin: 8px 12px !important;
}


#djPlayerWindow.dj-modern-v3
.dj-controls button,
#djPlayerWindow.dj-modern-v3
.dj-add-section button {
    min-height: 38px;

    border-radius:
        10px !important;

    border:
        1px solid var(--dj-border) !important;

    color:
        var(--dj-text) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        inset 0 -3px rgba(0,0,0,.30),
        0 5px 11px rgba(0,0,0,.34) !important;

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        border-color .12s ease;
}


#djPlayerWindow.dj-modern-v3
.dj-controls button:hover,
#djPlayerWindow.dj-modern-v3
.dj-add-section button:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--dj-accent) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.18),
        0 6px 15px rgba(0,0,0,.40),
        0 0 10px var(--dj-border) !important;
}


#djPlayerWindow.dj-modern-v3
.dj-controls button:active,
#djPlayerWindow.dj-modern-v3
.dj-add-section button:active {
    transform:
        translateY(2px);

    box-shadow:
        inset 0 3px 7px rgba(0,0,0,.45) !important;
}


#djPlayerWindow.dj-modern-v3
.dj-main-button {
    color:
        #061012 !important;

    background:
        linear-gradient(
            180deg,
            var(--dj-accent-2),
            var(--dj-accent)
        ) !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.65),
        inset 0 -3px rgba(0,0,0,.22),
        0 0 17px var(--dj-accent) !important;
}


/* =========================================================
   EQ
========================================================= */

.dj-modern-eq {
    margin:
        10px 12px;

    padding:
        10px;

    border-radius:
        14px;

    border:
        1px solid var(--dj-border);

    background:
        linear-gradient(
            145deg,
            var(--dj-panel-2),
            var(--dj-panel)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.06);
}


.dj-modern-eq-top {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom:
        9px;
}


.dj-modern-eq-title {
    color:
        var(--dj-accent);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .75px;
}


.dj-modern-eq-toggle {
    margin-left:
        auto;
}


.dj-modern-eq select,
.dj-modern-eq button {
    border:
        1px solid var(--dj-border);

    border-radius:
        7px;

    background:
        rgba(0,0,0,.36);

    color:
        var(--dj-text);

    padding:
        5px 7px;
}


.dj-modern-eq-bands {
    display:
        grid;

    grid-template-columns:
        repeat(10, 1fr);

    gap:
        5px;

    align-items:
        end;
}


.dj-modern-band {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    font-size:
        9px;

    color:
        var(--dj-muted);
}


.dj-modern-band input {
    writing-mode:
        vertical-lr;

    direction:
        rtl;

    width:
        18px !important;

    height:
        88px !important;

    padding:
        0;

    cursor:
        pointer;
}


.dj-modern-tone-row {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;

    margin-top:
        10px;
}


.dj-modern-tone {
    padding:
        7px;

    border-radius:
        9px;

    background:
        rgba(0,0,0,.22);

    text-align:
        center;

    font-size:
        9px;

    color:
        var(--dj-muted);
}


.dj-modern-tone input {
    width:
        100% !important;

    margin-top:
        5px;
}


/* ADD / PLAYLIST */

#djPlayerWindow.dj-modern-v3
.dj-add-section {
    margin:
        9px 12px !important;

    padding:
        10px !important;

    border-radius:
        12px !important;

    border:
        1px solid var(--dj-border) !important;

    background:
        var(--dj-panel) !important;
}


#djPlayerWindow.dj-modern-v3
.dj-section-title,
#djPlayerWindow.dj-modern-v3
.dj-playlist-header {
    color:
        var(--dj-accent-2) !important;

    font-weight:
        800 !important;
}


#djPlayerWindow.dj-modern-v3
.dj-youtube-search-box input,
#djPlayerWindow.dj-modern-v3
.dj-add-row input {
    border:
        1px solid var(--dj-border) !important;

    background:
        rgba(0,0,0,.34) !important;

    color:
        var(--dj-text) !important;

    border-radius:
        9px !important;
}


#djPlayerWindow.dj-modern-v3
.dj-playlist-header {
    margin:
        8px 12px 0 !important;

    padding:
        8px 10px !important;

    border:
        1px solid var(--dj-border);

    border-bottom:
        0;

    border-radius:
        10px 10px 0 0;

    background:
        rgba(0,0,0,.27);
}


#djPlayerWindow.dj-modern-v3
.dj-playlist {
    margin:
        0 12px 12px !important;

    border:
        1px solid var(--dj-border) !important;

    border-radius:
        0 0 10px 10px !important;

    background:
        rgba(0,0,0,.28) !important;
}


/* MOBILE */

@media (max-width: 620px) {

    #djPlayerWindow.dj-modern-v3 {
        width:
            calc(100vw - 12px) !important;

        max-height:
            92vh !important;
    }

    .dj-modern-spectrum {
        width:
            82px;
    }

    .dj-modern-eq-bands {
        gap:
            2px;
    }

    .dj-modern-band input {
        height:
            72px !important;
    }
}