body{color:#fff;box-sizing:border-box;background-color:#121212;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.player-container{box-sizing:border-box;background-color:#1e1e1e;flex-direction:column;justify-content:flex-start;align-items:center;width:100vw;max-width:430px;height:100vh;margin:0 auto;padding:20px 25px;display:flex}.header-container{justify-content:space-between;align-items:center;width:100%;padding-bottom:15px;display:flex}.header-container .github{color:gray;align-items:center;font-size:20px;transition:color .3s,filter .3s;display:flex}.header-container .github:hover{color:#fff}.header-container .github,.header-container .spacer{flex-basis:16px}.header-container h2{text-align:center;color:#1db954;flex-grow:1;margin:0;font-size:1.4em}.main-logo-container{background-color:#2a2a2a;border-radius:15px;flex-shrink:0;justify-content:center;align-items:center;width:180px;height:180px;margin-bottom:20px;display:flex;overflow:hidden;box-shadow:0 8px 25px #0009}.main-logo{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .3s}.status-container{grid-template-columns:65px 1fr 65px;align-items:center;width:100%;min-height:40px;margin-bottom:20px;display:grid}.status-gif{opacity:0;visibility:hidden;background-position:50%;background-repeat:no-repeat;background-size:contain;justify-self:center;width:20px;height:20px;transition:opacity .3s}.status-container.is-loading .status-gif{opacity:1;visibility:visible;background-image:url(/radio-playlist/public/loading.gif)}.status-container.is-playing .status-gif{opacity:1;visibility:visible;background-image:url(/radio-playlist/public/equalizer.gif)}.text-wrapper{text-align:center;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;display:flex}#status-text{color:#aaa;font-size:.95em;transition:color .3s}.search-icons-wrapper{justify-content:center;align-items:center;gap:5px;display:flex}.search-icon{opacity:0;pointer-events:none;align-items:center;transition:opacity .3s;display:flex}.search-icon[href]{opacity:.7;pointer-events:auto}.search-icon[href]:hover{opacity:1}.search-icon svg{width:22px;height:22px}#spotify{opacity:0;pointer-events:none;flex-shrink:0;justify-self:center;transition:opacity .3s}#spotify[href]{opacity:.7;pointer-events:auto}#spotify[href]:hover{opacity:1}#spotify svg{width:20px;height:20px}#track-info{color:#1db954;text-align:center;cursor:pointer;-webkit-box-orient:vertical;width:100%;margin-top:4px;font-size:.8em;font-weight:400;line-height:1.4;transition:opacity .2s;display:-webkit-box}#track-info:hover{opacity:.8}#status-text{color:#ccc;font-weight:700}.custom-player{box-sizing:border-box;user-select:none;background-color:#2a2a2a;border-radius:4px;width:100%;padding:15px}.controls-row{justify-content:center;align-items:center;gap:25px;display:flex}.control-btn{color:#1db954;cursor:pointer;touch-action:manipulation;background-color:#0000;border:none;justify-content:center;align-items:center;font-size:26px;transition:transform .2s,color .2s;display:flex}.control-btn:hover{color:#1ed760;transform:scale(1.1)}.play-btn{font-size:42px}.volume-row{align-items:center;gap:15px;margin-top:15px;display:flex}.volume-icon{color:#aaa;cursor:pointer;text-align:center;width:24px;font-size:20px;transition:color .2s}.volume-icon:hover{color:#fff}input[type=range]{accent-color:#1db954;cursor:pointer;flex:1}.tabs-container{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;padding-top:15px;padding-bottom:15px;display:flex}.tabs-container::-webkit-scrollbar{height:4px}.tabs-container::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:10px}.tab-btn{color:#ccc;cursor:pointer;white-space:nowrap;background-color:#2a2a2a;border:none;border-radius:20px;margin-top:2px;margin-bottom:2px;padding:8px 12px;font-size:.85em;font-weight:700;transition:background-color .3s,color .3s}.tab-btn:hover{color:#fff;background-color:#3a3a3a}.tab-btn.active{color:#121212;background-color:#1db954}ul.playlist{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:10px;width:100%;max-height:250px;margin:0;padding:0 5px 0 0;list-style-type:none;display:grid;overflow-y:auto}ul.playlist::-webkit-scrollbar{width:6px}ul.playlist::-webkit-scrollbar-track{background:#1e1e1e}ul.playlist::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:10px}ul.playlist::-webkit-scrollbar-thumb:hover{background:#1db954}ul.playlist li{cursor:pointer;background-color:#2a2a2a;border-radius:8px;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:8px 6px;transition:background .3s;display:flex}ul.playlist li.hidden{display:none}ul.playlist li:hover{background-color:#3a3a3a}ul.playlist li.active{color:#121212;background-color:#1db954}ul.playlist li span{text-align:center;line-clamp:2;-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:100%;font-size:.75em;line-height:1.2;display:-webkit-box;overflow:hidden}ul.playlist li.active span{font-weight:700}.list-thumb{object-fit:cover;word-wrap:break-word;border-radius:8px;flex-shrink:0;width:45px;height:45px;font-size:.5em;box-shadow:0 2px 5px #0000004d}@media (pointer:coarse){.volume-row{display:none}}