/*
app.css
*/
/* 
    Created on : 13.02.2026, 16:06:57
    Author     : Reneki
*/

*,*::before,*::after{
    box-sizing:border-box;
    margin:0;
    padding:0
}
:root{
    --bg:#0d0d0d;
    --surface:#161616;
    --panel:#111;
    --sidebar:#0f0f0f;
    --border:#2a2a2a;
    --border2:#333;
    --accent:#e8ff3a;
    --red:#ff4d4d;
    --green:#5fff9a;
    --muted:#555;
    --text:#e0e0e0;
}
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Space Mono',monospace;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:2rem;
    overflow-x:hidden;
}
.app{
    display:flex;
    gap:0;
    align-items:flex-start;
    position:relative;
    width:100%;
    max-width:1100px;
}
#yt-iframe-container{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none
}

/* ══ ALBUM SIDEBAR ══ */
.album-sidebar{
    width:160px;
    flex-shrink:0;
    background:var(--sidebar);
    border:1px solid var(--border);
    border-right:none;
    display:flex;
    flex-direction:column;
    align-self:stretch;
    min-height:200px;
}
.sidebar-header{
    padding:.9rem 1rem .6rem;
    border-bottom:1px solid var(--border);
    font-family:'Bebas Neue',sans-serif;
    font-size:.65rem;
    letter-spacing:.22em;
    color:var(--accent);
    flex-shrink:0;
}
.album-list{
    list-style:none;
    overflow-y:auto;
    flex:1;
    padding:.4rem 0;
}
.album-list::-webkit-scrollbar{
    width:3px
}
.album-list::-webkit-scrollbar-thumb{
    background:var(--border2);
    border-radius:2px
}
.album-entry{
    display:flex;
    align-items:center;
    gap:0;
    padding:.55rem 1rem;
    cursor:pointer;
    transition:background .12s,color .12s;
    border-left:2px solid transparent;
}
.album-entry:hover{
    background:rgba(255,255,255,.03);
    color:var(--text)
}
.album-entry.active{
    background:rgba(232,255,58,.06);
    border-left-color:var(--accent);
    color:var(--accent)
}
.album-entry-name{
    font-size:.6rem;
    letter-spacing:.06em;
    color:inherit;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
}
.album-entry.active .album-entry-name{
    color:var(--accent)
}
.album-entry.playing-album .album-entry-name::before{
    content:'▶ ';
    font-size:.45rem;
    color:var(--green)
}
.album-entry-count{
    font-size:.52rem;
    color:var(--muted);
    margin-left:.3rem;
    flex-shrink:0
}
.album-entry.active .album-entry-count{
    color:rgba(232,255,58,.6)
}

/* ══ PLAYER ══ */
.player{
    flex:1;
    min-width:0;
    background:var(--surface);
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
}
.player-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 1.8rem 1.1rem;
    border-bottom:1px solid var(--border);
}
.player-label{
    font-family:'Bebas Neue',sans-serif;
    font-size:.75rem;
    letter-spacing:.25em;
    color:var(--accent)
}
.btn-edit-toggle{
    background:none;
    border:1px solid var(--border);
    color:var(--muted);
    font-family:'Space Mono',monospace;
    font-size:.58rem;
    letter-spacing:.1em;
    padding:.28rem .65rem;
    cursor:pointer;
    transition:all .15s;
}
.btn-edit-toggle:hover,.btn-edit-toggle.active{
    background:var(--accent);
    color:#000;
    border-color:var(--accent)
}
.status{
    position:absolute;
    top:.9rem;
    /*right:6.5rem;*/
    left:1.8rem;
    font-size:.55rem;
    letter-spacing:.12em;
    color:var(--muted)
}
.status.loading{
    color:var(--accent);
    animation:blink 1s infinite
}
.status.playing{
    color:var(--green)
}
.status.paused,.status.ended{
    color:var(--muted)
}
@keyframes blink{
    0%,100%{
        opacity:1
    }
    50%{
        opacity:.3
    }
}

.now-album{
    padding:.5rem 1.8rem .1rem;
    font-size:.55rem;
    letter-spacing:.14em;
    color:var(--muted)
}
.now-album span{
    color:var(--accent)
}

.player-body{
    padding:1rem 1.8rem 1.8rem
}

/* ── Now Playing (with info icon) ── */
.now-playing{
    margin-bottom:.9rem;
    min-height:3.2rem;
    position:relative
}
.track-index{
    font-size:.62rem;
    letter-spacing:.15em;
    color:var(--muted);
    margin-bottom:.25rem
}
.track-title-row{
    display:flex;
    align-items:center;
    gap:.6rem
}
.track-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.5rem;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
}
.track-window{
    font-size:.62rem;
    color:var(--muted);
    margin-top:.25rem;
    letter-spacing:.05em
}
.track-window span{
    color:var(--accent)
}

/* ── Info button ── */
.btn-info{
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid var(--border2);
    background:transparent;
    color:var(--muted);
    font-size:.6rem;
    font-family:'Space Mono',monospace;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .15s;
    user-select:none;
    line-height:1;
}
.btn-info:hover{
    border-color:var(--accent);
    color:var(--accent)
}
.btn-info.has-meta{
    border-color:var(--border2)
}
.btn-info.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#000
}

/* ── Meta panel (inline, below track title) ── */
.meta-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease,opacity .3s ease;
    opacity:0;
    margin-bottom:0;
}
.meta-panel.open{
    max-height:200px;
    opacity:1;
    margin-bottom:.8rem
}
.meta-inner{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    background:#0a0a0a;
    border:1px solid var(--border);
    padding:.7rem .8rem;
    margin-top:.5rem;
    position:relative;
}
.meta-thumb{
    width:80px;
    height:45px;
    object-fit:cover;
    border:1px solid var(--border);
    flex-shrink:0;
    background:var(--border2);
}
.meta-thumb-placeholder{
    width:80px;
    height:45px;
    flex-shrink:0;
    background:var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.5rem;
    color:var(--muted);
    letter-spacing:.08em;
}
.meta-text{
    flex:1;
    min-width:0
}
.meta-title{
    font-size:.65rem;
    color:var(--text);
    margin-bottom:.3rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:.03em;
}
.meta-channel{
    font-size:.58rem;
    color:var(--muted);
    letter-spacing:.06em
}
.meta-channel span{
    color:var(--accent)
}
.meta-fetching{
    font-size:.55rem;
    color:var(--muted);
    letter-spacing:.1em;
    animation:blink 1s infinite
}
.meta-refresh{
    position:absolute;
    top:.45rem;
    right:.5rem;
    font-size:.5rem;
    color:var(--border2);
    cursor:pointer;
    transition:color .15s;
    padding:.1rem .2rem;
}
.meta-refresh:hover{
    color:var(--accent)
}

/* visualizer */
.viz-wrap{
    position:relative;
    width:100%;
    height:110px;
    margin-bottom:.9rem;
    overflow:hidden;
    border:1px solid var(--border);
    background:#0a0a0a;
}
#viz-canvas{
    display:block;
    width:100%;
    height:100%
}
.viz-idle-label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.55rem;
    letter-spacing:.2em;
    color:var(--border2);
    pointer-events:none;
    transition:opacity .5s;
}
.viz-idle-label.hidden{
    opacity:0
}

/* progress */
.progress-wrap{
    position:relative;
    margin-bottom:.4rem
}
.progress-bar-bg{
    height:3px;
    background:var(--border);
    position:relative;
    cursor:pointer
}
.progress-bar-fill{
    height:100%;
    background:var(--accent);
    width:0%;
    transition:width .25s linear;
    position:relative
}
.progress-bar-fill::after{
    content:'';
    position:absolute;
    right:-4px;
    top:-3px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--accent)
}
.time-row{
    display:flex;
    justify-content:space-between;
    font-size:.6rem;
    color:var(--muted);
    margin-top:.4rem;
    margin-bottom:1.4rem
}
.controls{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-bottom:1.6rem
}
.btn{
    background:none;
    border:1px solid var(--border);
    color:var(--text);
    cursor:pointer;
    font-family:'Space Mono',monospace;
    font-size:.7rem;
    padding:.45rem .85rem;
    letter-spacing:.08em;
    transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{
    background:var(--accent);
    color:#000;
    border-color:var(--accent)
}
.btn.primary{
    background:var(--accent);
    color:#000;
    border-color:var(--accent);
    font-weight:700;
    padding:.5rem 1.3rem
}
.btn.primary:hover{
    opacity:.85
}
.btn.danger{
    border-color:var(--red);
    color:var(--red)
}
.btn.danger:hover{
    background:var(--red);
    color:#000;
    border-color:var(--red)
}
.btn:disabled{
    opacity:.3;
    cursor:default
}
.btn:disabled:hover{
    background:none;
    color:var(--text);
    border-color:var(--border)
}
.volume-row{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-size:.6rem;
    color:var(--muted);
    letter-spacing:.08em;
    margin-bottom:1.6rem
}
input[type=range]{
    -webkit-appearance:none;
    width:90px;
    height:3px;
    background:var(--border);
    outline:none
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    cursor:pointer
}

/* queue */
.queue-label{
    font-size:.6rem;
    letter-spacing:.18em;
    color:var(--muted);
    margin-bottom:.6rem
}
.queue{
    list-style:none;
    border-top:1px solid var(--border)
}
.queue-item{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--border);
    font-size:.66rem;
    color:var(--muted);
    cursor:pointer;
    transition:color .15s;
}
.queue-item:hover{
    color:var(--text)
}
.queue-item.active{
    color:var(--accent)
}
.queue-item.active .qi-num{
    background:var(--accent);
    color:#000
}
.qi-num{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.58rem;
    border:1px solid currentColor;
    flex-shrink:0
}
.qi-thumb{
    width:36px;
    height:20px;
    object-fit:cover;
    border:1px solid var(--border);
    flex-shrink:0;
    background:var(--border2)
}
.qi-thumb-empty{
    width:36px;
    height:20px;
    background:var(--border);
    flex-shrink:0
}
.qi-info{
    flex:1;
    overflow:hidden
}
.qi-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:.1rem
}
.qi-meta-name{
    font-size:.63rem;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.qi-times{
    font-size:.53rem;
    color:var(--muted)
}

/* ══ EDITOR ══ */
.editor{
    width:430px;
    flex-shrink:0;
    background:var(--panel);
    border:1px solid var(--border);
    border-left:none;
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
    transform:translateX(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
}
.editor.open{
    opacity:1;
    transform:translateX(0);
    pointer-events:all
}
.editor-tab-bar{
    display:flex;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    background:#0d0d0d
}
.editor-tab{
    flex:1;
    padding:.65rem;
    font-size:.58rem;
    letter-spacing:.1em;
    color:var(--muted);
    cursor:pointer;
    text-align:center;
    border-bottom:2px solid transparent;
    transition:color .15s,border-color .15s;
}
.editor-tab:hover{
    color:var(--text)
}
.editor-tab.active{
    color:var(--accent);
    border-bottom-color:var(--accent)
}

/* album manager */
.album-manager{
    display:flex;
    flex-direction:column;
    flex:1;
    overflow:hidden
}
.album-manager-list{
    list-style:none;
    overflow-y:auto;
    flex:1;
    padding:.4rem 0
}
.album-manager-list::-webkit-scrollbar{
    width:4px
}
.album-manager-list::-webkit-scrollbar-thumb{
    background:var(--border2);
    border-radius:2px
}
.album-row{
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--border);
    background:var(--panel);
    transition:background .15s
}
.album-row:hover{
    background:#181818
}
.album-row.ui-sortable-helper{
    background:#1e1e1e;
    border:1px solid var(--accent);
    box-shadow:0 6px 20px rgba(0,0,0,.5)
}
.album-row.ui-sortable-placeholder{
    visibility:visible!important;
    background:rgba(232,255,58,.04);
    border-bottom:1px dashed rgba(232,255,58,.4);
    height:44px
}
.album-row.saving{
    opacity:.4;
    pointer-events:none
}
.album-drag{
    width:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--border2);
    cursor:grab;
    font-size:1rem;
    flex-shrink:0;
    user-select:none;
    transition:color .15s
}
.album-drag:hover{
    color:var(--muted)
}
.album-name-input{
    flex:1;
    background:transparent;
    border:none;
    border-bottom:1px solid transparent;
    color:var(--text);
    font-family:'Space Mono',monospace;
    font-size:.63rem;
    padding:.55rem .3rem;
    outline:none;
    transition:border-color .15s
}
.album-name-input:focus{
    border-bottom-color:var(--accent);
    background:rgba(232,255,58,.03)
}
.album-count{
    font-size:.52rem;
    color:var(--muted);
    white-space:nowrap;
    padding:0 .4rem
}
.album-del{
    width:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
    color:var(--muted);
    cursor:pointer;
    transition:color .15s;
    flex-shrink:0
}
.album-del:hover{
    color:var(--red)
}
.album-add-row{
    padding:.65rem 1.1rem;
    border-top:1px solid var(--border);
    display:flex;
    gap:.5rem;
    flex-shrink:0
}
.album-add-row input{
    flex:1;
    background:#0a0a0a;
    border:1px solid var(--border);
    color:var(--text);
    font-family:'Space Mono',monospace;
    font-size:.6rem;
    padding:.32rem .55rem;
    outline:none;
    transition:border-color .15s
}
.album-add-row input:focus{
    border-color:var(--accent)
}
.album-add-row input::placeholder{
    color:var(--muted)
}

/* track editor */
.track-editor{
    display:flex;
    flex-direction:column;
    flex:1;
    overflow:hidden
}
.track-editor-album-label{
    padding:.5rem 1.1rem .35rem;
    font-size:.55rem;
    letter-spacing:.12em;
    color:var(--muted);
    border-bottom:1px solid var(--border);
    flex-shrink:0
}
.track-editor-album-label span{
    color:var(--accent)
}
.editor-list{
    list-style:none;
    overflow-y:auto;
    flex:1;
    padding:.4rem 0
}
.editor-list::-webkit-scrollbar{
    width:4px
}
.editor-list::-webkit-scrollbar-thumb{
    background:var(--border2);
    border-radius:2px
}
.editor-skeleton{
    padding:1.4rem;
    font-size:.6rem;
    color:var(--muted);
    letter-spacing:.1em;
    text-align:center;
    animation:blink 1.2s infinite
}

.editor-row{
    display:flex;
    align-items:stretch;
    border-bottom:1px solid var(--border);
    background:var(--panel);
    transition:background .15s
}
.editor-row:hover{
    background:#181818
}
.editor-row.ui-sortable-helper{
    background:#1e1e1e;
    border:1px solid var(--accent);
    box-shadow:0 8px 24px rgba(0,0,0,.6)
}
.editor-row.ui-sortable-placeholder{
    visibility:visible!important;
    background:rgba(232,255,58,.04);
    border-bottom:1px dashed rgba(232,255,58,.4);
    height:110px
}
.editor-row.saving{
    opacity:.45;
    pointer-events:none
}
.drag-handle{
    width:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--border2);
    cursor:grab;
    font-size:1rem;
    flex-shrink:0;
    user-select:none;
    letter-spacing:-.1em;
    transition:color .15s
}
.drag-handle:hover{
    color:var(--muted)
}
.drag-handle:active{
    cursor:grabbing
}
.row-num{
    width:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.52rem;
    color:var(--muted);
    flex-shrink:0
}

/* thumbnail in editor row */
.row-thumb-wrap{
    width:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.5rem .3rem;
}
.row-thumb{
    width:42px;
    height:24px;
    object-fit:cover;
    border:1px solid var(--border);
    display:block
}
.row-thumb-empty{
    width:42px;
    height:24px;
    background:var(--border);
    display:block
}
.row-thumb-fetching{
    width:42px;
    height:24px;
    background:var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.4rem;
    color:var(--muted);
    animation:blink 1s infinite
}

/* meta info strip above url field */
.row-meta-strip{
    font-size:.52rem;
    color:var(--muted);
    /*white-space:nowrap;*/
    overflow:hidden;
    text-overflow:ellipsis;
    padding:.3rem 0 .1rem;
    letter-spacing:.04em;
    min-height:1.1rem;
}
.row-meta-strip .rms-title{
    color:var(--text)
}
.row-meta-strip .rms-channel{
    color:var(--muted)
}
.row-meta-strip .rms-sep{
    color:var(--border2);
    margin:0 .25rem
}
.row-meta-strip .rms-fetching{
    color:var(--accent);
    animation:blink 1s infinite
}
.row-meta-strip .rms-none{
    color:var(--border2)
}

.row-fields{
    flex:1;
    padding:.55rem .3rem .55rem 0;
    display:flex;
    flex-direction:column;
    gap:.35rem
}
.field-url input,.field-times input{
    background:#0a0a0a;
    border:1px solid var(--border);
    color:var(--text);
    font-family:'Space Mono',monospace;
    font-size:.55rem;
    padding:.26rem .42rem;
    outline:none;
    width:100%;
    transition:border-color .15s;
}
.field-url input:focus,.field-times input:focus{
    border-color:var(--accent)
}
.field-url input::placeholder,.field-times input::placeholder{
    color:var(--muted)
}
.field-url input.err,.field-times input.err{
    border-color:var(--red)
}
.field-times{
    display:flex;
    gap:.3rem;
    align-items:center
}
.field-times label{
    font-size:.49rem;
    color:var(--muted);
    white-space:nowrap;
    flex-shrink:0
}
.field-times input{
    width:56px
}
.field-actions{
    display:flex;
    gap:.28rem;
    align-items:center;
    flex-wrap:wrap
}
.field-actions label{
    font-size:.49rem;
    color:var(--muted);
    white-space:nowrap;
    flex-shrink:0
}
.field-actions select{
    flex:1;
    min-width:75px;
    background:#0a0a0a;
    border:1px solid var(--border);
    color:var(--text);
    font-family:'Space Mono',monospace;
    font-size:.52rem;
    padding:.26rem .36rem;
    outline:none;
    cursor:pointer;
    transition:border-color .15s;
}
.field-actions select:focus{
    border-color:var(--accent)
}
.act-btn{
    font-size:.48rem;
    padding:.26rem .4rem;
    white-space:nowrap;
    letter-spacing:.06em
}

.row-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.28rem;
    width:24px;
    flex-shrink:0
}
.row-save{
    font-size:.52rem;
    color:var(--muted);
    cursor:pointer;
    transition:color .15s;
    padding:.1rem
}
.row-save:hover{
    color:var(--accent)
}
.row-del{
    font-size:.7rem;
    color:var(--muted);
    cursor:pointer;
    transition:color .15s;
    padding:.1rem
}
.row-del:hover{
    color:var(--red)
}
.row-refetch{
    font-size:.5rem;
    color:var(--border2);
    cursor:pointer;
    transition:color .15s;
    padding:.1rem;
    title:'Refresh metadata'
}
.row-refetch:hover{
    color:var(--accent)
}

.editor-add{
    padding:.65rem 1.1rem;
    border-top:1px solid var(--border);
    flex-shrink:0
}
.editor-footer{
    padding:.6rem 1.1rem;
    border-top:1px solid var(--border);
    display:flex;
    gap:.5rem;
    align-items:center;
    flex-shrink:0
}
.toast{
    font-size:.55rem;
    color:var(--green);
    opacity:0;
    transition:opacity .3s;
    letter-spacing:.08em
}
.toast.err-toast{
    color:var(--red)
}
.toast.show{
    opacity:1
}

@media(max-width:800px){
    .app{
        flex-wrap:wrap
    }
    .album-sidebar{
        width:100%;
        border-right:1px solid var(--border);
        border-bottom:none;
        min-height:auto
    }
    .album-list{
        display:flex;
        flex-wrap:wrap;
        padding:.3rem
    }
    .album-entry{
        border-left:none;
        border-bottom:2px solid transparent;
        padding:.4rem .7rem
    }
    .album-entry.active{
        border-bottom-color:var(--accent);
        border-left:none
    }
    .player{
        min-width:100%
    }
    .editor{
        width:100%;
        border-left:1px solid var(--border);
        border-top:none;
        transform:translateY(-8px);
        max-height:none
    }
    .editor.open{
        transform:translateY(0)
    }
}