/* ============================================================
   ROSERIALIS 2026 — PLAYLISTS V17
   Visual layer only. Existing AJAX/player.js behavior is preserved.
   ============================================================ */

.playlists-player{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    background:#0a0f19;
    color:#dbe3ef;
    box-sizing:border-box;
}

.playlists-iframe{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#03060a;
}

.playlists-iframe iframe{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    display:block;
    border:0;
}

.playlists-lists,
.playlists-videos{
    width:100%;
    min-width:0;
    background:#0e1522;
}

.playlists-items{
    position:relative!important;
    width:100%;
    height:58px;
    padding:9px 45px;
    overflow:hidden!important;
    border-top:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg,#111a2a,#0d1421);
    box-sizing:border-box;
}

.playlists-items ul{
    position:relative;
    height:40px;
    margin:0;
    padding:0!important;
    list-style:none;
    white-space:nowrap;
    box-sizing:border-box;
}

.playlists-items li{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:108px;
    height:40px!important;
    margin:0 8px 0 0;
    padding:0 30px 0 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    background:#182131!important;
    color:#aeb9ca!important;
    font:500 12px/1 Arial,sans-serif!important;
    text-align:center;
    cursor:pointer;
    user-select:none;
    box-sizing:border-box;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.playlists-items li:hover{
    border-color:rgba(143,159,184,.34);
    background:#202b3e!important;
    color:#fff!important;
}

.playlists-items li.active{
    border-color:#526cff!important;
    background:#526cff!important;
    color:#fff!important;
    box-shadow:0 6px 16px rgba(82,108,255,.22);
}

.playlists-items ul li:first-child{
    margin-left:0;
}

.playlists-videos .playlists-items li{
    min-width:112px;
}

/* watched marker */
.playlists-view{
    position:absolute;
    right:9px;
    top:50%;
    width:15px;
    height:15px;
    margin-top:-7.5px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:50%;
    background:transparent!important;
    box-sizing:border-box;
    cursor:pointer;
    opacity:.75;
}

.playlists-view:hover{
    opacity:1;
    border-color:#fff;
}

.playlists-view.watched{
    border-color:#fff;
    background:#fff!important;
    opacity:1;
}

.playlists-view.watched::after{
    content:"✓";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#526cff;
    font:700 10px/1 Arial,sans-serif;
}

.playlists-items li.active .playlists-view{
    border-color:rgba(255,255,255,.72);
}

/* navigation arrows inserted by existing player.js */
.playlists-prev,
.playlists-next{
    position:absolute!important;
    top:9px!important;
    z-index:8;
    width:34px!important;
    height:40px!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:9px!important;
    background:#151f2e!important;
    background-image:none!important;
    cursor:pointer;
    box-sizing:border-box;
    transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}

.playlists-prev{left:7px!important}
.playlists-next{right:7px!important}

.playlists-prev::before,
.playlists-next::before{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#cbd5e4;
    font:400 25px/1 Arial,sans-serif;
}
.playlists-prev::before{content:"‹"}
.playlists-next::before{content:"›"}

.playlists-prev:hover,
.playlists-next:hover{
    border-color:rgba(255,255,255,.18)!important;
    background:#202c3f!important;
}

.playlists-prev.disabled,
.playlists-next.disabled{
    opacity:.22!important;
    cursor:default!important;
    pointer-events:none!important;
}

@media(max-width:680px){
    .playlists-items{
        height:54px;
        padding:7px 40px;
    }
    .playlists-items ul{height:40px}
    .playlists-items li{
        min-width:98px;
        height:40px!important;
        padding:0 27px 0 11px;
        margin-right:6px;
        border-radius:8px;
        font-size:12px!important;
    }
    .playlists-videos .playlists-items li{min-width:102px}
    .playlists-prev,.playlists-next{
        top:7px!important;
        width:30px!important;
        height:40px!important;
        border-radius:8px!important;
    }
    .playlists-prev{left:5px!important}
    .playlists-next{right:5px!important}
}