/* ===========================================

FCP STUDIO

=========================================== */



#djMixWindow{



    position:fixed;



    left:420px;

    top:80px;



    width:380px;



    height:560px;



    background:#20242b;



    border:1px solid #4b5664;



    border-radius:8px;



    box-shadow:

    0 10px 40px rgba(0,0,0,.45);



    display:none;



    z-index:999999;



    overflow:hidden;



}



#djMixHeader{



    height:42px;



    background:#2d333d;



    color:#fff;



    display:flex;



    justify-content:space-between;



    align-items:center;



    padding:0 12px;



    cursor:move;



    user-select:none;



    font-size:15px;



    font-weight:bold;



}



#djMixClose{



    width:30px;



    height:30px;



    border:none;



    background:#d9534f;



    color:#fff;



    cursor:pointer;



    border-radius:4px;



}



#djMixClose:hover{



    background:#b52b27;



}



#djMixContent{



    display:flex;



    flex-direction:column;



    height:calc(100% - 42px);



}

.djToolbar{



    display:flex;



    gap:8px;



    padding:10px;



    border-bottom:1px solid #3c4753;



}



.djToolbar{



    display:flex;



    gap:6px;



    padding:8px;



    border-bottom:1px solid #444;



    flex-shrink:0;



}



.djToolbar button:hover{



    background:#5389c7;



}



#playlistArea{



    flex:1;



    overflow-y:auto;



    padding:6px;



}



.playItem{



    padding:8px;



    margin-bottom:4px;



    background:#2f3944;



    color:#fff;



    border-radius:4px;



    cursor:pointer;



}



.playItem:hover{



    background:#43515f;



}

.playlistRow{



    display:flex;



    align-items:center;



    gap: 7px;



    background:#313b46;



    border-radius:5px;



    margin-bottom: 3px;



    padding: 5px;



    cursor:pointer;



}



.playlistRow:hover{



    background:#425161;



}



.songNo{



    width:35px;



    text-align:center;



    font-weight:bold;



    color:#ccc;



}



.songInfo{



    flex:1;



}



.songTitle{



    color:#fff;



    font-size:14px;



}



.songTime{



    color:#8da1b5;



    font-size:11px;



    margin-top:2px;



}

.playing{



    background:#2b7d3d !important;



}

#playerPanel{



    border-top:1px solid #444;



    padding:10px;



    flex-shrink:0;



}



#nowPlaying{



    height:22px;



    line-height:22px;



    overflow:hidden;



    white-space:nowrap;



    text-overflow:ellipsis;



    font-size:13px;



    font-weight:bold;



}



#timeBar{



    width:100%;



    height:8px;



    background:#444;



    border-radius:20px;



    overflow:hidden;



}



#timeProgress{



    width:0%;



    height:100%;



    background:#32b34a;



}



#timeInfo{



    display:flex;



    justify-content:space-between;



    color:#bbb;



    font-size:11px;



    margin-top:4px;



}



#playerButtons{



    display:flex;



    justify-content:center;



    align-items:center;



    gap:6px;



    margin-top:10px;



}



#playerButtons button{



    width:42px;



    height:36px;



    border:none;



    border-radius:5px;



    cursor:pointer;



    background:#3b6da5;



    color:#fff;



    font-size:16px;



}



#playerButtons button:hover{



    background:#548fd2;



}

.playing{



    background:#2d8a3d !important;



    color:#fff;



}

.songDelete{



    width:22px;



    text-align:center;



    color:#ff5555;



    cursor:pointer;



    font-weight:bold;



}



.songDelete:hover{



    color:#ffffff;



    background:#b50000;



}

/* ==========================

VOLUME

========================== */



#volumePanel{



    display:flex;



    align-items:center;



    gap:8px;



    margin-top:10px;



}



#volumeSlider{



    flex:1;



    cursor:pointer;



}



#volumeValue{



    width:45px;



    text-align:right;



    color:#ddd;



    font-size:12px;



}

.playlistRow{



    cursor:grab;



}



.playlistRow:active{



    cursor:grabbing;



}

/* ==========================

PLAYLIST DRAG LINE

========================== */



.playlistRow{



    position:relative;



    transition:.15s;



}



.playlistRow.dragOver{



    border-top:3px solid #3ea6ff;



}



.playlistRow.dragOver::before{



    content:"";



    position:absolute;



    left:0;



    right:0;



    top:-2px;



    height:3px;



    background:#3ea6ff;



    box-shadow:0 0 8px #3ea6ff;



}

/* ==========================

DJ STATUS

========================== */



#djStatus{



    margin-top:10px;



    padding:6px;



    text-align:center;



    border-radius:5px;



    background:#2d3137;



    color:#7cff7c;



    font-weight:bold;



    font-size:13px;



    transition:.25s;



}

/* ==========================

MIC PANEL

========================== */



#micPanel{



    margin-top:12px;



    padding-top:10px;



    border-top:1px solid #555;



}



#micHeader{



    color:#fff;



    font-weight:bold;



    margin-bottom:8px;



}



#micToggle{



    width:100%;



    height:34px;



    border:none;



    border-radius:5px;



    background:#8b1d1d;



    color:#fff;



    cursor:pointer;



    font-weight:bold;



    transition:.2s;



}



#micToggle.micOn{



    background:#1fa84d;



}



#micVolumePanel{



    display:flex;



    align-items:center;



    gap:8px;



    margin-top:10px;



}



#micVolume{



    flex:1;



}



#micVolumeValue{



    width:45px;



    text-align:right;



    color:#ddd;



    font-size:12px;



}

#jingleWindow{



    position:absolute;



    top:120px;



    left:420px;



    width:260px;



    height:420px;



    background:#2b3139;



    border:1px solid #56616d;



    display:none;



    z-index:9999;



}



#jingleHeader{



    height:32px;



    display:flex;



    align-items:center;



    justify-content:space-between;



    padding:0 10px;



    background:#3d4650;



    color:white;



    cursor:move;



}



#jingleToolbar{



    padding:8px;



}



#jingleToolbar button{



    width:100%;



}



#jingleList{



    height:330px;



    overflow:auto;



}



.jingleRow{



    padding:8px;



    cursor:pointer;



    border-bottom:1px solid #404854;



    color:white;



}



.jingleRow:hover{



    background:#3b6da5;



}



/* --- Compact playlist view --- */

.playlistRow {

    padding: 5px !important;

    gap: 7px !important;

    margin-bottom: 3px !important;

}



.songNo {

    width: 28px !important;

    min-width: 28px !important;

}



.songTitle {

    font-size: 13px !important;

    line-height: 1.2 !important;

}



.songTime {

    display: none !important;

}



.songDelete {

    width: 20px !important;

    min-width: 20px !important;

    font-size: 12px !important;

}