:root{--bg:#0b0f1a;--panel:#131a2b;--panel-2:#1a2338;--border:#263148;--text:#e8ecf5;--muted:#8b96ad;--accent:#38bdf8;--accent-2:#22d3ee;--danger:#f87171;--radius:12px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);min-height:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.site-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.brand{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.brand-mark{font-size:20px}.brand-name{letter-spacing:.02em;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:700}.brand-tag{color:var(--muted);font-size:13px}.brand-link{color:var(--muted);font-size:12px;text-decoration:none}.brand-link:hover{color:var(--text)}.app{max-width:860px;margin:0 auto;padding:16px 16px 120px}.tabs{gap:6px;margin-bottom:18px;display:flex;overflow-x:auto}.tab{color:var(--muted);white-space:nowrap;border:1px solid #0000;border-radius:999px;padding:8px 16px}.tab:hover{color:var(--text)}.tab-active{color:var(--text);background:var(--panel);border-color:var(--border)}.muted{color:var(--muted);font-size:14px}.link{color:var(--accent);text-decoration:underline}.radio-controls{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.input{border-radius:var(--radius);border:1px solid var(--border);background:var(--panel);min-width:0;color:var(--text);flex:180px;padding:10px 12px}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;min-width:36px;padding:8px 12px}.btn:hover{background:var(--panel-2)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#04121d;font-weight:600}.btn-primary:hover{background:var(--accent-2)}.btn-primary:disabled{opacity:.5;cursor:default}.btn-danger{color:var(--danger)}.btn-saved{color:#fbbf24}.btn-wide{text-align:left;width:100%;margin-top:6px}.btn-play{color:var(--accent)}.tag-row{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.tag-chip{color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px}.tag-chip-btn:hover{color:var(--text)}.tag-chip-active{color:#04121d;background:var(--accent);border-color:var(--accent)}.station-list{flex-direction:column;gap:8px;display:flex}.station-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:12px;padding:10px 12px;display:flex}.station-art{object-fit:cover;background:var(--panel-2);border-radius:8px;flex-shrink:0;width:44px;height:44px}.station-art-fallback{justify-content:center;align-items:center;font-size:20px;display:flex}.station-info{flex:1;min-width:0}.station-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.station-detail{color:var(--muted);margin-top:2px;font-size:12px}.station-tags{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.station-actions{flex-shrink:0;gap:6px;display:flex}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;margin-bottom:16px;padding:28px 20px;transition:border-color .12s,background .12s}.dropzone:hover,.dropzone-active{border-color:var(--accent);background:var(--panel)}.track-list{flex-direction:column;gap:4px;display:flex}.track-row{text-align:left;border-radius:10px;align-items:center;gap:12px;width:100%;padding:10px 12px;display:flex}.track-row:hover{background:var(--panel)}.track-row-active{background:var(--panel);color:var(--accent)}.track-index{width:24px;color:var(--muted);text-align:center;flex-shrink:0}.track-name{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.playlist-list{flex-direction:column;gap:10px;margin-top:14px;display:flex}.playlist-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.playlist-head{text-align:left;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;display:flex}.playlist-name{font-weight:600}.playlist-body{flex-direction:column;gap:8px;padding:0 12px 12px;display:flex}.modal-backdrop{z-index:50;background:#040810b3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:420px;padding:20px}.modal h2{margin:0 0 10px;font-size:16px}.modal-options{max-height:40vh;overflow-y:auto}.player-bar{padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:40;background:#131a2bf7;justify-content:space-between;align-items:center;gap:14px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-meta{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.player-art{object-fit:cover;background:var(--panel-2);border-radius:8px;flex-shrink:0;width:40px;height:40px}.player-art-fallback{justify-content:center;align-items:center;font-size:18px;display:flex}.player-titles{min-width:0}.player-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.player-subtitle{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.player-controls{flex-shrink:0;align-items:center;gap:6px;display:flex}.ctl{color:var(--text);border-radius:8px;padding:8px;font-size:16px}.ctl:hover{background:var(--panel-2)}.ctl-primary{color:var(--accent);font-size:20px}.volume{width:90px;accent-color:var(--accent)}@media (max-width:560px){.volume,.brand-tag{display:none}}