.audio-player{max-width:1200px;margin:0 auto;padding:20px;font-family:Roboto,sans-serif}.main-content{display:flex;gap:30px;margin-bottom:16px}.center-section{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px}.search-section{width:400px;flex-shrink:0;display:flex;flex-direction:column;gap:20px}.now-playing{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid #d0d0d0;border-radius:8px;background:#fafafa;width:100%;max-width:450px;min-height:120px;box-sizing:border-box;box-shadow:0 2px 4px #0000000d}.now-playing img{width:80px;height:80px;min-width:80px;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px #0000001a;flex-shrink:0}.now-playing-info{flex:1 1 auto;min-width:0;max-width:100%}.now-playing-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#666;margin-bottom:6px;font-weight:500}.now-playing-title{font-size:16px;font-weight:500;color:#222;margin-bottom:4px;overflow:hidden;cursor:default;max-width:100%;position:relative}.now-playing-title-text{display:inline-block;white-space:nowrap;color:#222;text-decoration:none}.now-playing-title-text:not(.scrolling){overflow:hidden;text-overflow:ellipsis;max-width:100%}.now-playing-title-text.scrolling{animation:scroll-text 16s ease-in-out infinite;animation-delay:2s}@keyframes scroll-text{0%,15%{transform:translate(0)}50%,65%{transform:translate(calc(-100% + var(--container-width)))}to{transform:translate(0)}}.now-playing-artist{font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid #ddd;border-radius:8px;background-color:#fafafa}.controls button{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.controls button:hover{background-color:#f0f0f0}.controls button:active{background-color:#e0e0e0}.controls select{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer}.volume-control{position:relative;display:flex;align-items:center}.volume-slider{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;padding:12px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #0000001a;z-index:10}.volume-slider input[type=range]{width:100px;cursor:pointer}.search-container{border:1px solid #ddd;border-radius:8px;padding:16px;background-color:#fafafa}.search-container h3{margin:0 0 12px;font-size:14px;font-weight:500}.search-container form{display:flex;gap:8px;margin-bottom:12px}.search-container select{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer}.search-container input{flex:1;padding:8px 12px;border:1px solid #ccc;border-radius:4px}.search-container button{padding:8px 16px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.search-container button:hover{background-color:#f0f0f0}.search-results{max-height:400px;overflow-y:auto;margin-top:8px}.search-result-item{display:flex;gap:12px;padding:8px;margin-bottom:4px;border:1px solid #ddd;border-radius:4px;width:100%;text-align:left;cursor:pointer;background-color:#fff}.search-result-item:hover{background-color:#f5f5f5}.search-result-item:disabled{opacity:.5;cursor:not-allowed}.search-result-item img{width:60px;height:60px;object-fit:cover;border-radius:4px}.search-result-placeholder{width:60px;height:60px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;border-radius:4px}.search-result-info{flex:1;min-width:0}.search-result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;margin-bottom:4px}.search-result-meta{font-size:.875em;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-container{border:1px solid #ddd;border-radius:8px;padding:16px;background-color:#fafafa}.queue-container h3{margin:0 0 12px;font-size:14px;font-weight:500}.queue-list{max-height:300px;overflow-y:auto}.queue-item{display:flex;gap:8px;padding:8px;margin-bottom:4px;background-color:#fff;border:1px solid #ddd;border-radius:4px;font-size:13.8px}.queue-item span{color:#999;min-width:20px}.queue-item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;text-decoration:none}@media(max-width:900px){.main-content{flex-direction:column}.search-section,.now-playing{width:100%}.search-container form{flex-wrap:wrap}.search-container select{flex:1;min-width:100px}.search-container input{min-width:0;flex:2}.search-container button{flex-shrink:0}}@media(max-width:600px){.controls{flex-wrap:wrap;gap:8px;justify-content:center}.controls button{padding:10px 14px}.controls select{width:100%;order:10}.volume-control{order:5}.now-playing{flex-direction:column;text-align:center}.now-playing img{width:100px;height:100px}}@media(max-width:400px){.audio-player{padding:10px}.controls button{padding:8px 10px}.controls button svg{width:14px;height:14px}.now-playing{padding:12px}.now-playing img{width:80px;height:80px}}