:root{--bg: #0f0f12;--surface: #1a1a20;--text: #e8e8ed;--muted: #8888a0;--accent: #7c6bee;--accent-hover: #9388f0}*{box-sizing:border-box}body{margin:0;font-family:DM Sans,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{display:flex;flex-direction:row;min-height:100vh;max-width:none;margin:0;padding:0}.app-main-column{flex:1;min-width:0;max-width:640px;margin:0 auto;padding:2rem 1rem;width:100%}.header{margin-bottom:2rem}.header{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.header h1{margin:0;font-size:1.75rem;font-weight:600;letter-spacing:-.02em}.nav{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.nav-link{cursor:pointer;color:var(--muted)}.nav-link:hover,.nav-link.active{color:var(--accent)}.nav-sep{color:var(--muted);margin:0 .25rem}.auth{margin-left:auto}.api-base-hint{font-size:.75rem;color:var(--muted, #666);margin-left:.5rem}.btn-login,.btn-logout{padding:.4rem .75rem;font-size:.9rem;border:1px solid var(--surface);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer}.btn-login:hover,.btn-logout:hover{border-color:var(--accent)}.subtitle{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}.search-bar{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.search-bar input{flex:1;min-width:140px;padding:.6rem .75rem;font-size:1rem;border:1px solid var(--surface);border-radius:8px;background:var(--surface);color:var(--text)}.search-bar input::placeholder{color:var(--muted)}.search-bar input:focus{outline:none;border-color:var(--accent)}.search-bar select{padding:.6rem .75rem;font-size:.95rem;border:1px solid var(--surface);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}.search-bar button{padding:.6rem 1.25rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}.search-bar button:hover{background:var(--accent-hover)}.search-in-library{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--text);cursor:pointer}.search-in-library input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}.search-options-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:1rem;flex-wrap:wrap}.search-options-checkbox{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--text);cursor:pointer}.search-options-checkbox input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}.page-heading{margin:0 0 1rem;font-size:1.5rem;font-weight:600;color:var(--text)}.library-section{margin-bottom:2rem}.library-section-heading{margin:0 0 .75rem;font-size:1.1rem;font-weight:600;color:var(--muted)}.login-prompt-btn{padding:.6rem 1.25rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;margin-top:.5rem}.login-prompt-btn:hover{background:var(--accent-hover)}.discover-bar{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.discover-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.discover-row-actions{margin-top:.25rem}.discover-select{padding:.6rem .75rem;font-size:.95rem;border:1px solid var(--surface);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;min-width:8rem}.discover-input{flex:1;min-width:140px;padding:.6rem .75rem;font-size:1rem;border:1px solid var(--surface);border-radius:8px;background:var(--surface);color:var(--text)}.discover-input::placeholder{color:var(--muted)}.discover-input:focus,.discover-select:focus{outline:none;border-color:var(--accent)}.discover-shuffle{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--text);cursor:pointer;padding:.5rem 0}.discover-shuffle input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}.discover-btn{padding:.6rem 1.25rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}.discover-btn:hover{background:var(--accent-hover)}.results{min-height:120px}.hint,.loading,.error{color:var(--muted);margin:0}.error{color:#e07070}.error-details{margin-top:.75rem;font-size:.85rem}.error-details summary{cursor:pointer;color:var(--muted)}.error-detail-text{margin:.5rem 0 0;padding:.75rem;background:var(--surface);border-radius:6px;overflow:auto;max-height:12rem;font-size:.8rem;white-space:pre-wrap;word-break:break-all}.retry-btn{margin-top:.75rem;padding:.5rem 1rem;font-size:.95rem;border:1px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--accent);cursor:pointer}.retry-btn:hover{background:var(--accent);color:#fff}.result-item{display:flex;align-items:baseline;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--surface)}.result-item .kind{font-size:.75rem;text-transform:uppercase;color:var(--accent);min-width:4rem}.result-item .name{font-weight:500}.result-item .subtitle{font-size:.9rem;color:var(--muted)}.result-item-song,.result-item-album,.result-item-playlist,.result-item-artist{cursor:pointer}.result-item-song:hover,.result-item-album:hover,.result-item-playlist:hover,.result-item-artist:hover{background:var(--surface)}.player-panel{width:300px;min-width:300px;background:var(--surface);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;height:100vh;position:sticky;top:0}.player-panel-top{flex-shrink:0;padding:1rem}.player-panel-empty{color:var(--muted);font-size:.9rem;padding:.5rem 0}.player-panel-now-playing{display:flex;gap:.75rem;margin-bottom:.75rem}.player-panel-artwork{width:64px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0}.player-panel-info{display:flex;flex-direction:column;min-width:0;gap:.2rem}.player-panel-title{font-weight:500;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-panel-artist{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-panel-progress{font-size:.8rem;color:var(--muted)}.player-panel-controls{display:flex;gap:.5rem;flex-wrap:wrap}.player-panel-volume{margin-top:.5rem;width:100%}.player-panel-volume input[type=range]{width:100%;height:.4rem;accent-color:var(--accent)}.player-panel-btn{padding:.4rem .6rem;font-size:.85rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer}.player-panel-btn:disabled{opacity:.5;cursor:not-allowed}.player-panel-btn:hover:not(:disabled){background:var(--accent-hover)}.player-panel-queue-window{flex:1;min-height:0;display:flex;flex-direction:column;padding:.75rem 1rem 1rem;border-top:1px solid rgba(255,255,255,.06)}.player-panel-queue-heading{margin:0 0 .5rem;font-size:.95rem}.player-panel-play-next{margin-bottom:.5rem;padding:.35rem .6rem;font-size:.85rem;border:1px solid var(--accent);border-radius:6px;background:transparent;color:var(--accent);cursor:pointer}.player-panel-play-next:hover{background:#7c6bee26}.player-panel-queue-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:100px}.player-panel-queue-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;font-size:.85rem;cursor:pointer;border-radius:4px}.player-panel-queue-item:hover{background:#ffffff0d}.player-panel-queue-item.current{background:#7c6bee33;color:var(--accent)}.player-panel-queue-right{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;min-width:3.5rem}.player-panel-queue-duration{font-size:.8rem;color:var(--muted)}.player-panel-queue-item:not(.player-panel-queue-track):hover .player-panel-queue-duration{display:none}.player-panel-queue-actions{display:none;gap:.15rem;align-items:center}.player-panel-queue-item:hover .player-panel-queue-actions{display:flex}.player-panel-queue-btn{padding:.15rem .35rem;font-size:.75rem;line-height:1;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}.player-panel-queue-btn-stacked{display:inline-flex;flex-direction:column;line-height:.55;padding-top:.1rem;padding-bottom:.1rem;border:none;border-radius:0;background:transparent}.player-panel-queue-btn:hover{background:#ffffff14;color:var(--accent)}.player-panel-dancers{flex-shrink:0;border-top:1px solid rgba(255,255,255,.06);background:#00000026}.player-panel-dancers-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1rem;cursor:pointer;font-size:.9rem;color:var(--muted)}.player-panel-dancers-header:hover{color:var(--text)}.player-panel-dancers-title{font-weight:500}.player-panel-dancers-chevron{font-size:.7rem;opacity:.8}.player-panel-dancers-body{padding:.5rem 1rem;max-height:130px;display:flex;align-items:center;justify-content:center}.player-panel-dancers-body svg{max-width:100%;max-height:110px;display:block}.player-panel-dancers-controls{display:flex;flex-direction:column;gap:.5rem;padding:0 1rem .75rem}.player-panel-dancers-controls select{flex:1;background:#ffffff12;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:var(--text);font-size:.78rem;padding:.25rem .4rem;cursor:pointer}.player-panel-dancers-controls button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:var(--text);font-size:.78rem;padding:.25rem .6rem;cursor:pointer;white-space:nowrap}.player-panel-dancers-controls button:hover{background:#ffffff2e}.player-panel-dancers-controls-row{display:flex;gap:.4rem;align-items:center}.player-panel-dancers-speed{display:flex;align-items:center;gap:.5rem;color:#ffffffb3;font-size:.75rem;white-space:nowrap;width:100%}.player-panel-dancers-speed input[type=range]{flex:1;accent-color:rgba(255,255,255,.6)}.player-panel-queue-num{flex-shrink:0;width:1.5rem;color:var(--muted)}.player-panel-queue-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-panel-queue-chevron{flex-shrink:0;width:1rem;font-size:.7rem;color:var(--muted)}.player-panel-queue-album-header{font-weight:500;padding-left:0;gap:.25rem}.player-panel-queue-album-header .player-panel-queue-num{width:0;min-width:0;overflow:hidden}.player-panel-queue-playlist-header{font-weight:500;padding-left:0;gap:.25rem}.player-panel-queue-playlist-header .player-panel-queue-num{width:0;min-width:0;overflow:hidden}.player-panel-queue-track{padding-left:1.75rem;font-size:.8rem}.player-panel-queue-track .player-panel-queue-num{width:0;min-width:0;overflow:hidden}.player-panel-queue-empty{color:var(--muted);font-size:.85rem;margin:.5rem 0}.back-btn,.add-to-queue-btn{margin-bottom:1rem;padding:.4rem .75rem;font-size:.9rem;border:1px solid var(--accent);border-radius:6px;cursor:pointer}.back-btn{background:transparent;color:var(--accent)}.back-btn:hover{background:#7c6bee26}.add-to-queue-btn{background:var(--accent);color:#fff}.add-to-queue-btn:hover{background:var(--accent-hover)}@media(max-width:768px){.app{flex-direction:column}.player-panel{width:100%;min-width:unset;height:auto;max-height:50vh;position:relative;border-left:none;border-top:1px solid rgba(255,255,255,.06)}}.player-page-top{display:flex;gap:1.25rem;align-items:flex-start;margin-bottom:1.5rem;flex-wrap:wrap}.player-page-artwork{width:160px;height:160px;border-radius:10px;object-fit:cover;flex-shrink:0}.player-page-center{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}.player-page-title{font-weight:600;font-size:1.25rem}.player-page-artist{color:var(--muted);font-size:1rem}.player-page-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}.player-page-links{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:.9rem}.player-page-links-label{color:var(--muted)}.player-page-links-sep{color:var(--muted);margin:0 .15rem}.player-page-link{color:var(--accent);text-decoration:none}.player-page-link:hover{text-decoration:underline}.player-page-progress{font-size:.9rem;color:var(--muted);margin-top:.25rem}.player-page-album{margin-top:1rem}.player-page-album h3{margin:0 0 .5rem;font-size:1.1rem}.player-page-album-artist{color:var(--muted);font-size:.95rem;margin:0 0 .5rem}.player-page-album-artwork{width:160px;height:160px;border-radius:8px;object-fit:cover;margin-bottom:.75rem}.player-page-tracks{list-style:none;padding:0;margin:0}.player-page-track-item{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem}.player-page-track-title{min-width:0}.player-page-track-duration{flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}.player-page-track-item.clickable{cursor:pointer}.player-page-track-item.clickable:hover{background:#ffffff0a}.player-page-heading{margin:0 0 1rem;font-size:1.25rem}.player-page-artist-albums{list-style:none;padding:0;margin:0}.player-page-album-row{display:flex;align-items:center;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}.player-page-album-row:hover{background:#ffffff0a}.player-page-album-row-artwork{width:56px;height:56px;border-radius:6px;object-fit:cover;flex-shrink:0}.player-page-album-row-info{display:flex;flex-direction:column;gap:.2rem;min-width:0}.player-page-album-row-name{font-weight:500}.player-page-album-row-subtitle{font-size:.9rem;color:var(--muted)}.now-playing-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem}.now-playing-panel{background:var(--surface);border-radius:12px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;padding:1.25rem;position:relative}.now-playing-close{position:absolute;top:.75rem;right:1rem;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1}.now-playing-close:hover{color:var(--text)}.now-playing-track{display:flex;gap:1rem;margin-bottom:1.25rem}.now-playing-artwork{width:80px;height:80px;border-radius:8px;object-fit:cover}.now-playing-track-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}.now-playing-title{font-weight:600;font-size:1.1rem}.now-playing-artist{color:var(--muted);font-size:.95rem}.now-playing-play{margin-top:.5rem;padding:.35rem .65rem;font-size:.85rem;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;align-self:flex-start}.now-playing-progress{font-size:.85rem;color:var(--muted);margin-top:.25rem}.now-playing-no-preview{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}.now-playing-no-preview a{color:var(--accent);text-decoration:none}.now-playing-no-preview a:hover{text-decoration:underline}.now-playing-album-loading{color:var(--muted);font-size:.9rem;margin:0 0 1rem}.now-playing-album{margin-bottom:1.25rem}.now-playing-album h3{margin:0 0 .5rem;font-size:1rem}.now-playing-album-artist{color:var(--muted);font-size:.9rem;margin:0 0 .5rem}.now-playing-album-artwork{width:120px;height:120px;border-radius:8px;object-fit:cover;margin-bottom:.75rem}.now-playing-tracks{list-style:none;padding:0;margin:0}.now-playing-track-item{padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem}.now-playing-track-item.clickable{cursor:pointer}.now-playing-track-item.clickable:hover{background:#ffffff0a}.now-playing-links h3{margin:0 0 .5rem;font-size:1rem}.now-playing-links-official,.now-playing-links-more{font-size:.85rem;color:var(--muted);margin:.25rem 0 0}.now-playing-links-list{list-style:none;padding:0;margin:.25rem 0 0}.now-playing-links-list a{color:var(--accent);text-decoration:none}.now-playing-links-list a:hover{text-decoration:underline}.home-section{margin-bottom:2rem}.home-section-heading{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}.home-login-nudge{display:flex;align-items:center;gap:1rem}.quick-discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.quick-discover-tile{background:var(--surface);border:1px solid rgba(255,255,255,.07);border-radius:8px;color:var(--text);font-size:.85rem;font-weight:500;padding:.6rem .5rem;cursor:pointer;text-align:center;transition:background .15s,border-color .15s}.quick-discover-tile:hover{background:var(--accent);border-color:var(--accent);color:#fff}.recent-searches-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}.recent-search-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:.8rem;padding:.2rem .55rem;cursor:pointer;-webkit-user-select:none;user-select:none}.recent-search-chip:hover{border-color:var(--accent)}.recent-search-chip-label:hover{color:var(--accent)}.recent-search-chip-remove{font-size:.65rem;color:var(--muted);line-height:1}.recent-search-chip-remove:hover{color:#e06060}.exclusions-banner{margin-top:.5rem;font-size:.8rem;color:var(--muted)}.exclusions-banner-link{color:var(--accent);cursor:pointer;text-decoration:underline}.spaces-panel{margin-bottom:1.5rem;border:1px solid var(--surface);border-radius:10px;overflow:hidden}.spaces-panel-header{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--surface);cursor:default}.spaces-panel-title{font-weight:600;font-size:.9rem;flex:1}.spaces-panel-toggle,.spaces-panel-new{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.25rem .5rem;border-radius:5px}.spaces-panel-new{color:var(--accent);font-weight:600}.spaces-panel-toggle:hover,.spaces-panel-new:hover{background:#7c6bee1a}.space-card{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}.space-card:last-child{border-bottom:none}.space-card:hover{background:#ffffff05}.space-card-active{background:#7c6bee12;border-left:3px solid var(--accent)}.space-card-suggested{background:#7c6bee0a}.space-card-top{display:flex;align-items:center;gap:.75rem}.space-card-name{font-weight:500;flex:1;font-size:.95rem}.space-suggested-icon{color:var(--accent);font-size:.85rem}.space-card-actions{display:flex;gap:.35rem;flex-wrap:wrap}.space-btn{background:#ffffff0f;border:none;border-radius:5px;color:var(--text);cursor:pointer;font-size:.78rem;padding:.25rem .55rem;transition:background .15s}.space-btn:hover{background:#ffffff1f}.space-btn-primary{background:#7c6bee33;color:var(--accent)}.space-btn-primary:hover{background:#7c6bee59}.space-btn-danger:hover{background:#e0606040;color:#e06060}.space-card-desc{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}.space-card-pills{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}.space-pill{background:#ffffff12;border-radius:4px;font-size:.72rem;padding:.15rem .45rem;color:var(--muted)}.space-pill-time{color:var(--accent);background:#7c6bee1f}.taste-btns-group{display:inline-flex;align-items:center;gap:.15rem;margin-left:.4rem}.taste-btn{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--muted);cursor:pointer;font-size:.72rem;padding:.1rem .3rem;line-height:1;transition:background .12s,color .12s}.taste-btn:hover{background:#ffffff1a;color:var(--text)}.taste-btn-liked{color:#e07070;border-color:#e0707066;background:#e0707014}.taste-btn-disliked{color:#888;border-color:#8886;background:#88888814}.taste-label{font-size:.65rem;color:var(--muted);opacity:.6}.space-tastes-section{border-left:3px solid var(--accent);padding-left:1rem}.space-tastes-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.space-tastes-header .home-section-heading{flex:1;margin:0}.space-tastes-group{margin-top:.5rem}.space-tastes-group-label{font-size:.72rem;text-transform:uppercase;color:var(--accent);letter-spacing:.05em;margin-right:.5rem}.space-tastes-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}.taste-tag{display:inline-flex;align-items:center;gap:.3rem;background:#ffffff12;border-radius:5px;padding:.2rem .5rem;font-size:.8rem}.taste-tag-remove{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.7rem;padding:0;line-height:1}.taste-tag-remove:hover{color:#e06060}.space-form{padding:1rem;border-top:1px solid rgba(255,255,255,.07);background:#ffffff05}.space-form h4{margin:0 0 .75rem;font-size:.9rem;color:var(--muted)}.space-form-row{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.65rem}.space-form-row label{font-size:.75rem;color:var(--muted)}.space-form-row input[type=text],.space-form-row select{background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text);font-size:.9rem;padding:.45rem .6rem}.space-form-row-inline{flex-direction:row;flex-wrap:wrap;gap:.75rem;align-items:flex-end}.space-form-row-inline>div{display:flex;flex-direction:column;gap:.25rem;min-width:100px}.space-form-check{display:flex;align-items:center;gap:.35rem;font-size:.85rem;cursor:pointer}.space-form-buttons{display:flex;gap:.5rem;margin-top:.75rem}
