:root{--winamp-bg:#0a0e27;--winamp-panel:#1a1e3f;--winamp-accent:#00ff41;--winamp-text:silver;--winamp-border:#3a3e5f;--winamp-display:#000}[data-theme=light]{--winamp-bg:#d4d0c8;--winamp-panel:#f0f0f0;--winamp-accent:#0078d7;--winamp-text:#000;--winamp-border:gray;--winamp-display:#9dff8c}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--winamp-bg);color:var(--winamp-text);font-family:Courier New,monospace;line-height:1.6}.winamp-container{background:var(--winamp-panel);border:2px solid var(--winamp-border);border-radius:4px;max-width:600px;margin:20px auto;box-shadow:0 4px 8px #0000004d}.winamp-display{background:var(--winamp-display);color:var(--winamp-accent);text-transform:uppercase;border-bottom:2px solid var(--winamp-border);white-space:nowrap;text-overflow:ellipsis;padding:15px;font-size:16px;font-weight:700;overflow:hidden}.winamp-controls{background:var(--winamp-panel);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:15px;display:flex}.winamp-btn{background:var(--winamp-border);border:2px outset var(--winamp-text);color:var(--winamp-text);cursor:pointer;padding:8px 16px;font-family:inherit;font-weight:700;transition:all .1s}.winamp-btn:hover{background:var(--winamp-accent);color:var(--winamp-bg)}.winamp-btn:active{border-style:inset}.station-list{background:var(--winamp-bg);max-height:400px;overflow-y:auto}.station-item{border-bottom:1px solid var(--winamp-border);cursor:pointer;padding:12px;transition:background .2s}.station-item:hover{background:var(--winamp-panel)}@media (max-width:640px){.winamp-container{max-width:100%;margin:10px}.winamp-controls{flex-wrap:wrap}.winamp-btn{padding:10px 14px;font-size:14px}}.app-container{flex-direction:column;min-height:100vh;padding:20px;display:flex}.app-header{justify-content:space-between;align-items:center;width:100%;max-width:600px;margin:0 auto 20px;display:flex}.app-header h1{color:var(--winamp-accent);letter-spacing:2px;text-shadow:0 0 10px var(--winamp-accent);font-size:24px}.theme-toggle{background:var(--winamp-border);border:2px outset var(--winamp-text);cursor:pointer;border-radius:4px;padding:8px 16px;font-size:20px;transition:all .1s}.theme-toggle:hover{background:var(--winamp-accent);transform:scale(1.05)}.theme-toggle:active{border-style:inset}.display-marquee{font-size:18px;animation:15s linear infinite scroll-text}.display-info{opacity:.8;margin-top:5px;font-size:12px}@keyframes scroll-text{0%{transform:translate(100%)}to{transform:translate(-100%)}}.volume-control{flex:1;align-items:center;gap:10px;min-width:150px;max-width:300px;display:flex}.volume-icon-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;flex-shrink:0;padding:8px;font-size:24px;transition:transform .2s}.volume-icon-btn:hover{transform:scale(1.1)}.volume-icon-btn:active{transform:scale(.95)}.volume-slider{background:var(--winamp-border);cursor:pointer;appearance:none;touch-action:manipulation;border-radius:6px;outline:none;flex:1;min-width:0;height:12px;position:relative}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--winamp-accent);border:3px solid var(--winamp-bg);cursor:pointer;width:24px;height:24px;box-shadow:0 0 10px var(--winamp-accent);z-index:2;border-radius:50%;transition:transform .1s,box-shadow .1s;position:relative}.volume-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--winamp-accent)0%,var(--winamp-accent)var(--volume-percent,70%),var(--winamp-border)var(--volume-percent,70%),var(--winamp-border)100%);border-radius:6px;width:100%;height:12px}.volume-slider::-moz-range-thumb{background:var(--winamp-accent);border:3px solid var(--winamp-bg);cursor:pointer;width:24px;height:24px;box-shadow:0 0 10px var(--winamp-accent);border:none;border-radius:50%;transition:transform .1s,box-shadow .1s}.volume-slider::-moz-range-track{background:var(--winamp-border);border-radius:6px;width:100%;height:12px}.volume-slider::-moz-range-progress{background:var(--winamp-accent);border-radius:6px 0 0 6px;height:12px}.volume-slider:hover::-webkit-slider-thumb{box-shadow:0 0 15px var(--winamp-accent);transform:scale(1.2)}.volume-slider:active::-webkit-slider-thumb{box-shadow:0 0 15px var(--winamp-accent);transform:scale(1.2)}.volume-slider:hover::-moz-range-thumb{box-shadow:0 0 15px var(--winamp-accent);transform:scale(1.2)}.volume-slider:active::-moz-range-thumb{box-shadow:0 0 15px var(--winamp-accent);transform:scale(1.2)}.volume-percentage{color:var(--winamp-accent);text-align:right;min-width:45px;text-shadow:0 0 5px var(--winamp-accent);flex-shrink:0;font-size:14px;font-weight:700}@media (max-width:640px){.winamp-controls{gap:8px;padding:12px 10px}.volume-control{flex:0 0 100%;gap:8px;width:100%;min-width:0;max-width:none}.volume-icon-btn{padding:6px;font-size:22px}.volume-slider{border-radius:8px;flex:1;height:16px}.volume-slider::-webkit-slider-thumb{border-width:3px;width:28px;height:28px}.volume-slider::-moz-range-thumb{border-width:3px;width:28px;height:28px}.volume-slider::-webkit-slider-runnable-track{border-radius:8px;height:16px}.volume-slider::-moz-range-track{border-radius:8px;height:16px}.volume-slider::-moz-range-progress{border-radius:8px 0 0 8px;height:16px}.volume-percentage{min-width:40px;font-size:13px}}@media (min-width:641px) and (max-width:1024px){.volume-control{min-width:200px;max-width:250px}}.search-container{background:var(--winamp-panel);border-bottom:2px solid var(--winamp-border);padding:15px}.search-input{background:var(--winamp-display);width:100%;color:var(--winamp-accent);border:2px inset var(--winamp-border);padding:10px;font-family:inherit;font-size:14px}.search-input::placeholder{color:var(--winamp-text);opacity:.6}.search-input:focus{outline:2px solid var(--winamp-accent);outline-offset:2px}.station-item.active{background:var(--winamp-accent);color:var(--winamp-bg);font-weight:700}.station-name{margin-bottom:4px;font-size:14px;font-weight:700}.station-meta{opacity:.8;font-size:11px}.loading-state,.empty-state{text-align:center;color:var(--winamp-text);padding:40px 20px;font-size:14px}.app-footer{text-align:center;color:var(--winamp-text);opacity:.7;margin-top:auto;padding:20px;font-size:12px}.app-footer a{color:var(--winamp-accent);text-decoration:none}.app-footer a:hover{text-decoration:underline}@media (max-width:640px){.app-container{padding:10px}.app-header h1{font-size:20px}.display-marquee{font-size:14px}.volume-control{min-width:100px}.station-name{font-size:13px}.station-meta{font-size:10px}}.header-actions{align-items:center;gap:10px;display:flex}.install-btn{background:var(--winamp-accent);color:var(--winamp-bg);border:2px solid var(--winamp-accent);cursor:pointer;border-radius:4px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:700;transition:all .2s}.install-btn:hover{color:var(--winamp-accent);background:0 0}.install-btn:active{transform:scale(.95)}@media (max-width:640px){.install-btn{padding:6px 12px;font-size:12px}}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--winamp-panel);border:3px solid var(--winamp-border);width:100%;max-width:500px;box-shadow:0 0 0 1px var(--winamp-accent),0 0 20px #00ff414d,0 8px 32px #00000080;border-radius:8px;animation:.3s ease-out modalSlideIn}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-header{background:var(--winamp-display);border-bottom:2px solid var(--winamp-border);justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.modal-header h2{color:var(--winamp-accent);letter-spacing:2px;text-shadow:0 0 10px var(--winamp-accent);margin:0;font-size:18px}.modal-close{border:2px solid var(--winamp-accent);color:var(--winamp-accent);cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;font-weight:700;transition:all .2s;display:flex}.modal-close:hover{background:var(--winamp-accent);color:var(--winamp-bg);transform:rotate(90deg)}.modal-body{color:var(--winamp-text);padding:25px 20px}.modal-intro{text-align:center;margin-bottom:20px;font-size:14px;line-height:1.6}.install-instructions{background:var(--winamp-display);border:2px inset var(--winamp-border);border-radius:4px;padding:15px}.install-instructions h3{color:var(--winamp-accent);letter-spacing:1px;margin:0 0 15px;font-size:14px}.install-instructions ol{color:var(--winamp-text);margin:0;padding-left:25px}.install-instructions li{margin-bottom:12px;font-size:13px;line-height:1.5}.install-instructions li:last-child{margin-bottom:0}.modal-footer{border-top:2px solid var(--winamp-border);background:var(--winamp-bg);justify-content:center;padding:15px 20px;display:flex}.modal-btn{min-width:120px;padding:10px 20px;font-size:14px}@media (max-width:640px){.modal-content{max-width:95%}.modal-header h2{font-size:16px}.modal-body{padding:20px 15px}.install-instructions{padding:12px}.install-instructions h3{font-size:13px}.install-instructions li{font-size:12px}}.error-container{background:var(--winamp-bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.error-winamp{background:var(--winamp-panel);border:3px solid var(--winamp-border);width:100%;max-width:600px;box-shadow:0 0 0 1px var(--winamp-accent),0 0 30px #00ff414d,0 8px 32px #00000080;border-radius:8px;animation:2s ease-in-out infinite errorPulse;overflow:hidden}@keyframes errorPulse{0%,to{box-shadow:0 0 0 1px var(--winamp-accent),0 0 30px #00ff414d,0 8px 32px #00000080}50%{box-shadow:0 0 0 1px var(--winamp-accent),0 0 50px #00ff4180,0 8px 32px #00000080}}.error-display{background:var(--winamp-display);text-align:center;border-bottom:2px solid var(--winamp-border);padding:30px 20px}.error-code{color:var(--winamp-accent);letter-spacing:8px;text-shadow:0 0 10px var(--winamp-accent),0 0 20px var(--winamp-accent),0 0 30px var(--winamp-accent);margin-bottom:10px;font-family:Courier New,monospace;font-size:72px;font-weight:700;animation:3s infinite glitch}@keyframes glitch{0%,90%,to{opacity:1;transform:translate(0)}92%{opacity:.8;transform:translate(-2px)}94%{opacity:.9;transform:translate(2px)}96%{opacity:.8;transform:translate(-2px)}}.error-text{color:var(--winamp-accent);letter-spacing:3px;text-shadow:0 0 8px var(--winamp-accent);font-size:16px;font-weight:700}.error-visualizer{background:var(--winamp-bg);border-bottom:2px solid var(--winamp-border);justify-content:space-around;align-items:flex-end;gap:8px;height:120px;padding:30px 20px;display:flex}.error-visualizer .bar{background:var(--winamp-border);border-radius:4px 4px 0 0;flex:1;max-width:40px;animation:1.5s ease-in-out infinite errorBars}.error-visualizer .bar:first-child{height:20%;animation-delay:0s}.error-visualizer .bar:nth-child(2){height:30%;animation-delay:.1s}.error-visualizer .bar:nth-child(3){height:15%;animation-delay:.2s}.error-visualizer .bar:nth-child(4){height:40%;animation-delay:.3s}.error-visualizer .bar:nth-child(5){height:25%;animation-delay:.4s}.error-visualizer .bar:nth-child(6){height:35%;animation-delay:.5s}.error-visualizer .bar:nth-child(7){height:20%;animation-delay:.6s}.error-visualizer .bar:nth-child(8){height:45%;animation-delay:.7s}.error-visualizer .bar:nth-child(9){height:30%;animation-delay:.8s}.error-visualizer .bar:nth-child(10){height:15%;animation-delay:.9s}.error-visualizer .bar:nth-child(11){height:25%;animation-delay:1s}.error-visualizer .bar:nth-child(12){height:35%;animation-delay:1.1s}@keyframes errorBars{0%,to{background:var(--winamp-border)}50%{background:var(--winamp-accent);box-shadow:0 0 10px var(--winamp-accent)}}.error-message{text-align:center;color:var(--winamp-text);background:var(--winamp-panel);border-bottom:2px solid var(--winamp-border);padding:30px 25px;line-height:1.8}.error-message p{margin:0 0 10px;font-size:14px}.error-message p:last-child{margin-bottom:0}.error-controls{background:var(--winamp-panel);border-bottom:2px solid var(--winamp-border);justify-content:center;padding:25px;display:flex}.error-btn{padding:12px 30px;font-size:15px;text-decoration:none;transition:all .2s;display:inline-block}.error-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00ff414d}.error-footer{background:var(--winamp-display);padding:15px;overflow:hidden}.error-ticker{color:var(--winamp-accent);white-space:nowrap;font-size:12px;font-weight:700;animation:20s linear infinite ticker}@keyframes ticker{0%{transform:translate(100%)}to{transform:translate(-100%)}}@media (max-width:640px){.error-code{letter-spacing:4px;font-size:56px}.error-text{letter-spacing:2px;font-size:14px}.error-visualizer{gap:4px;height:80px;padding:20px 10px}.error-visualizer .bar{max-width:20px}.error-message{padding:20px 15px}.error-message p{font-size:13px}.error-btn{padding:10px 20px;font-size:14px}.error-ticker{font-size:11px}}.error-theme-toggle{background:var(--winamp-border);border:2px outset var(--winamp-text);cursor:pointer;z-index:1000;border-radius:4px;padding:8px 16px;font-size:20px;transition:all .1s;position:fixed;top:20px;right:20px;box-shadow:0 4px 12px #0000004d}.error-theme-toggle:hover{background:var(--winamp-accent);transform:scale(1.05)}.error-theme-toggle:active{border-style:inset;transform:scale(.98)}@media (max-width:640px){.error-theme-toggle{padding:6px 12px;font-size:18px;top:10px;right:10px}}