#winamp-player-container{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;width:100%;max-width:420px;margin:20px auto;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.2);overflow:hidden;transition:box-shadow .3s ease;--bg-main:#f0f3f5;--bg-secondary:#e1e8ed;--bg-accent:#d1d9e0;--text-main:#2c3e50;--text-secondary:#566573;--border-color:#b0bec5;--highlight-bg:#4CAF50;--highlight-text:#ffffff;--active-color:#2980b9;}
#winamp-player-container.dark-theme{--bg-main:#2c3e50;--bg-secondary:#34495e;--bg-accent:#283747;--text-main:#ecf0f1;--text-secondary:#bdc3c7;--border-color:#566573;--highlight-bg:#58d68d;--highlight-text:#17202a;--active-color:#5dade2;}
.winamp-player{padding:15px;background:var(--bg-main);color:var(--text-main);border-bottom:1px solid var(--border-color);}
.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.player-header h3{margin:0;font-size:1.1rem;font-weight:600;}
#theme-toggle{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:0 5px;color:var(--text-secondary);}
.player-info{margin-bottom:12px;}
#now-playing{font-size:0.8rem;color:var(--text-secondary);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:8px;}
#now-playing .np-meta{font-weight:600;color:var(--text-main);}
.progress-container{width:100%;height:12px;background:var(--bg-accent);border-radius:6px;overflow:hidden;cursor:pointer;}
#progress-bar{height:100%;width:0%;background:var(--highlight-bg);transition:width 0.1s linear;}
.player-controls,.secondary-controls{display:flex;justify-content:center;gap:10px;margin-bottom:15px;}
.player-controls button,.secondary-controls button{padding:8px 12px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:5px;cursor:pointer;font-size:1.2rem;color:var(--text-main);transition:background .2s ease,transform .1s ease;}
.player-controls button:hover,.secondary-controls button:hover{background:var(--bg-accent);}
.player-controls button:active,.secondary-controls button:active{transform:scale(0.95);}
.secondary-controls button{font-size:1rem;padding:6px 10px;}
.secondary-controls button.active{background:var(--active-color);color:var(--highlight-text);border-color:var(--active-color);}
.audio-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.audio-controls label{font-size:0.75rem;color:var(--text-secondary);display:flex;flex-direction:column;}
.audio-controls input[type="range"],.audio-controls select{width:100%;margin-top:4px;accent-color:var(--active-color);}
.audio-controls select{padding:5px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-main);border-radius:4px;}
.winamp-playlist{background:var(--bg-secondary);}
.playlist-header{padding:10px 15px;background:var(--bg-accent);color:var(--text-main);display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.playlist-header h4{margin:0;font-size:0.9rem;font-weight:600;}
#toggle-playlist{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--text-main);transition:transform .3s ease;}
.playlist-body{max-height:350px;overflow-y:auto;display:grid;grid-template-rows:auto 1fr;transition:max-height .5s ease,padding .5s ease;padding:10px 0;}
#winamp-player-container.playlist-closed .playlist-body{max-height:0;padding:0;overflow:hidden;}
#winamp-player-container.playlist-closed #toggle-playlist{transform:rotate(180deg);}
.playlist-toolbar{padding:0 15px 10px;display:flex;gap:10px;}
#search-playlist{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:5px;background:var(--bg-main);color:var(--text-main);font-size:0.8rem;}
#load-more{padding:8px 12px;background:var(--active-color);color:white;border:none;border-radius:5px;cursor:pointer;font-size:0.8rem;white-space:nowrap;}
#load-more:hover{opacity:0.9;}
.articles-list{list-style:none;padding:0;margin:0;}
.article-item{padding:10px 15px;border-bottom:1px solid var(--border-color);cursor:pointer;font-size:0.85rem;transition:background 0.2s;display:flex;flex-direction:column;gap:4px;}
.article-item:hover{background:var(--bg-accent);}
.article-item.playing{background:var(--highlight-bg);color:var(--highlight-text);font-weight:bold;}
.article-item.playing .article-date{color:var(--highlight-text);opacity:0.8;}
.article-item .article-date{font-size:0.75rem;color:var(--text-secondary);font-weight:normal;}
.loading{opacity:0.6;pointer-events:none;}
.hidden{display:none;}