* { 
    box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: #121212; 
    color: #ffffff; 
    margin: 0; 
    padding: 0; 
    padding-bottom: 90px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    overscroll-behavior-y: contain; 
}

.login-container { 
    background-color: #181818; 
    padding: 30px; 
    border-radius: 12px; 
    width: 100%; 
    max-width: 400px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); 
    margin-top: 10vh; 
}

.login-container h2 { 
    margin-top: 0; 
    text-align: center; 
}

.input-group { 
    margin-bottom: 15px; 
    display: flex; 
    flex-direction: column; 
}

.input-group label { 
    font-size: 13px; 
    color: #b3b3b3; 
    margin-bottom: 5px; 
}

.input-group input { 
    background-color: #282828; 
    border: 1px solid #333; 
    color: #ffffff; 
    padding: 12px; 
    border-radius: 6px; 
    outline: none; 
    font-size: 16px;
}

.msg { 
    padding: 10px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    font-size: 14px; 
    text-align: center; 
}

.msg.error { 
    background-color: rgba(255, 77, 77, 0.1); 
    color: #ff4d4d; 
    border: 1px solid #ff4d4d; 
}

.btn-green { 
    background-color: #1db954; 
    color: #121212; 
    border: none; 
    font-weight: bold; 
    padding: 12px 16px; 
    border-radius: 24px; 
    cursor: pointer; 
    width: 100%; 
    font-size: 16px; 
    transition: opacity 0.2s; 
}

#mini-player-bar { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 75px; 
    background-color: #181818; 
    border-top: 1px solid #282828; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 10px 20px; 
    z-index: 1000; 
    box-shadow: 0 -4px 12px rgba(0,0,0,0.5); 
}

.mini-left { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    overflow: hidden; 
    flex: 1; 
    cursor: pointer; 
}

#mini-art { 
    width: 50px; 
    height: 50px; 
    border-radius: 6px; 
    background-color: #282828; 
    object-fit: cover; 
    flex-shrink: 0; 
}

.mini-info { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

#mini-title { 
    font-size: 14px; 
    font-weight: 600; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    transition: color 0.3s; 
}

#mini-album { 
    font-size: 12px; 
    color: #b3b3b3; 
    margin-top: 2px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.mini-controls { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    flex-shrink: 0; 
}

.ctrl-btn { 
    background: none; 
    border: none; 
    color: #1db954; 
    cursor: pointer; 
    padding: 5px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: opacity 0.2s;
}

.ctrl-btn:hover { 
    color: #1ed760; 
}

.ctrl-btn svg { 
    width: 32px; 
    height: 32px; 
}

.volume-container { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-left: 10px; 
    color: #b3b3b3;
}

#volume-slider { 
    width: 80px; 
    accent-color: #1db954; 
    cursor: pointer; 
    height: 4px; 
}

@media (max-width: 768px) { 
    .volume-container { display: none !important; } 
    #width-btn { display: none !important; } 
}

#full-player-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #121212; 
    z-index: 2000; 
    display: flex; 
    flex-direction: column; 
    padding: 20px; 
    transform: translateY(120%); 
    transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); 
    overflow-y: auto; 
}

#full-player-overlay.open { 
    transform: translateY(0); 
}

.overlay-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 20px; 
}

.close-btn { 
    background: none; 
    border: none; 
    color: #ffffff; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.close-btn svg { 
    width: 32px; 
    height: 32px; 
}

.full-player-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 450px; 
    margin: 0 auto; 
}

#full-art { 
    width: 80vw; 
    height: 80vw; 
    max-width: 320px; 
    max-height: 320px; 
    border-radius: 12px; 
    background-color: #282828; 
    object-fit: cover; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.6); 
    margin-bottom: 25px; 
    cursor: pointer; 
    transition: transform 0.2s; 
}

#full-art:active { 
    transform: scale(0.95); 
}

#full-title { 
    font-size: 20px; 
    font-weight: 700; 
    text-align: center; 
    margin-bottom: 6px; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

#full-album { 
    font-size: 14px; 
    color: #b3b3b3; 
    text-align: center; 
    margin-bottom: 25px; 
}

.scrubber-container { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-bottom: 25px; 
}

#seek-bar { 
    width: 100%; 
    accent-color: #1db954; 
    height: 4px; 
    cursor: pointer; 
}

.time-stamps { 
    display: flex; 
    justify-content: space-between; 
    font-size: 12px; 
    color: #b3b3b3; 
}

.large-controls { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 35px; 
    margin-bottom: 30px; 
}

.large-ctrl-btn { 
    background: none; 
    border: none; 
    color: #ffffff; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: opacity 0.2s;
}

.large-ctrl-btn svg { 
    width: 40px; 
    height: 40px; 
}

#full-play-btn svg { 
    width: 56px; 
    height: 56px; 
    color: #1db954; 
}

.drawer-section { 
    width: 100%; 
    border-top: 1px solid #282828; 
    padding-top: 20px; 
    margin-top: 15px; 
}

#lightbox-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.95); 
    z-index: 3000; 
    display: none; 
    flex-direction: column; 
}

.lightbox-header { 
    display: flex; 
    justify-content: space-between; 
    padding: 20px; 
    color: #fff; 
    font-size: 16px; 
    align-items: center; 
}

.lightbox-gallery { 
    flex: 1; 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
}

.lightbox-gallery::-webkit-scrollbar { 
    display: none; 
}

.lightbox-item { 
    flex: 0 0 100vw; 
    width: 100vw; 
    scroll-snap-align: start; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    padding: 10px; 
}

.lightbox-img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}

.pdf-card { 
    background: #181818; 
    padding: 30px; 
    border-radius: 12px; 
    text-align: center; 
    border: 1px solid #333; 
    max-width: 300px; 
    width: 100%; 
}

.lb-nav { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.6); 
    color: white; 
    border: none; 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    font-size: 20px; 
    cursor: pointer; 
    z-index: 3001; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    transition: background 0.2s;
}

.lb-nav:hover { 
    background: #1db954; 
    color: #121212; 
}

#main-container { 
    width: 100%; 
    max-width: 1000px; 
    padding: 20px; 
    transition: max-width 0.3s ease; 
}

.top-tabs { 
    display: flex; 
    align-items: center; 
    margin-bottom: 20px; 
    border-bottom: 1px solid #282828; 
    padding-bottom: 10px; 
    overflow-x: auto; 
    white-space: nowrap;
}

.top-tabs::-webkit-scrollbar { 
    display: none; 
}

.tab-btn { 
    background: none; 
    border: none; 
    color: #b3b3b3; 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    padding: 5px 15px; 
    flex-shrink: 0;
}

.tab-btn.active { 
    color: #ffffff; 
    border-bottom: 2px solid #1db954; 
}

.spacer { 
    flex: 1; 
} 

#status { 
    text-align: center; 
    color: #b3b3b3; 
    font-size: 14px; 
    margin-top: 40px; 
    white-space: pre-wrap; 
}

#view-controls { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 20px; 
}

.search-container { 
    position: relative; 
    width: 60%; 
    display: flex; 
    align-items: center;
}

#search-bar { 
    background-color: #282828; 
    border: none; 
    color: #ffffff; 
    padding: 10px 40px 10px 15px; 
    border-radius: 20px; 
    font-size: 14px; 
    width: 100%; 
    outline: none; 
}

/* Merged styles for the Dice and Clear search icons */
.search-icon-btn {
    position: absolute;
    right: 12px;
    color: #b3b3b3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.search-icon-btn:hover {
    color: #ffffff;
}

.view-toggle { 
    background-color: transparent; 
    color: #b3b3b3; 
    border: 1px solid #b3b3b3; 
    padding: 6px 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    justify-content: center;
}

.view-toggle svg { 
    width: 20px; 
    height: 20px; 
}

.view-toggle.active { 
    background-color: #ffffff; 
    color: #121212; 
    border-color: #ffffff; 
}

#album-list, #collection-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
}

.album-card { 
    background-color: #181818; 
    padding: 12px; 
    border-radius: 8px; 
    text-align: center; 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    transition: background-color 0.2s; 
}

.album-card:hover { 
    background-color: #282828; 
}

.art-wrapper { 
    position: relative; 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    margin-bottom: 10px; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.fallback-text { 
    position: absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background-color:#282828; 
    border-radius:6px; 
    color:#b3b3b3; 
    font-size:12px; 
    padding:10px; 
    text-align:center; 
    box-sizing:border-box; 
    overflow:hidden; 
    word-break: break-word; 
    line-height: 1.4; 
    z-index: 1; 
}

.grid-art-thumb { 
    position: relative; 
    z-index: 2; 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 6px; 
    background-color: transparent; 
    display: block; 
}

.album-title { 
    font-size: 13px; 
    font-weight: 600; 
    word-wrap: break-word; 
}

#album-list.list-view { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

#album-list.list-view .album-card { 
    flex-direction: row; 
    text-align: left; 
    padding: 8px 12px; 
}

#album-list.list-view .art-wrapper { 
    width: 45px; 
    height: 45px; 
    margin-bottom: 0; 
    margin-right: 12px; 
    flex-shrink: 0; 
}

#album-list.list-view .fallback-text { 
    font-size: 9px; 
    padding: 4px; 
}

#album-list.single-column { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 25px; 
}

#album-list.single-column .album-card { 
    padding: 20px; 
}

#album-list.single-column .art-wrapper { 
    max-width: 400px; 
    margin: 0 auto 15px auto; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
    border-radius: 8px; 
}

#album-list.single-column .fallback-text { 
    font-size: 18px; 
    border-radius: 8px; 
    padding: 20px; 
}

#album-list.single-column .album-title { 
    font-size: 16px; 
    font-weight: 700; 
}

.track-item { 
    padding: 12px 16px; 
    background-color: #181818; 
    border-radius: 4px; 
    cursor: pointer; 
    margin-bottom: 6px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 14px; 
    transition: background-color 0.2s, opacity 0.2s;
}

.track-item:hover { 
    background-color: #282828; 
}

.track-item.playing { 
    color: #1db954; 
    font-weight: bold; 
    background-color: #222222; 
}

.track-item.drag-over { 
    border-top: 2px solid #1db954; 
}

.track-item.unavailable { 
    opacity: 0.4; 
    pointer-events: none; 
}

.add-p-btn, .del-p-btn { 
    background-color: #282828; 
    color: #b3b3b3; 
    border: 1px solid #b3b3b3; 
    border-radius: 12px; 
    padding: 4px 10px; 
    font-size: 12px; 
    cursor: pointer; 
    margin-left: 8px; 
    z-index: 5;
}

.add-p-btn:hover { 
    background-color: #1db954; 
    color: #121212; 
    border-color: #1db954;
}

.del-p-btn:hover { 
    background-color: #ff4d4d; 
    color: #121212; 
    border-color: #ff4d4d;
}

.playlist-input-group { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 15px; 
}

.playlist-input { 
    background-color: #282828; 
    border: none; 
    color: #ffffff; 
    padding: 10px 12px; 
    border-radius: 4px; 
    flex: 1; 
    outline: none; 
}

#modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); 
    z-index: 3000; 
    display: none; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
}

#modal-content { 
    background-color: #181818; 
    width: 100%; 
    max-width: 350px; 
    border-radius: 12px; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    max-height: 80vh; 
}

#modal-list { 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin: 15px 0; 
}

.modal-p-btn { 
    background-color: #282828; 
    border: none; 
    color: #fff; 
    padding: 12px; 
    border-radius: 6px; 
    cursor: pointer; 
    text-align: left; 
}

.modal-p-btn:hover { 
    background-color: #383838; 
    color: #1db954; 
}

#toast { 
    position: fixed; 
    bottom: 90px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: #1db954; 
    color: #121212; 
    padding: 12px 24px; 
    border-radius: 24px; 
    font-weight: bold; 
    font-size: 14px; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease; 
    z-index: 10000; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
    text-align: center; 
    white-space: nowrap;
}