:root{--bg:#06131c;--bg-header:#071820;--bg-elevated:#0c2632;--surface:#0a202b;--surface-hover:#10313e;--text:#f4f7f8;--text-secondary:#a5b5be;--muted:#718792;--accent:#4dd3e5;--accent-hover:#4dd5e6;--accent-muted:#21899b;--star-active:var(--accent);--star-inactive:#334852;--button-primary-bg:var(--accent);--button-primary-fg:#041116;--divider:#18333e;--danger:#ff7b72;--border:#174353;--border-subtle:#16303b;--shadow:0 16px 40px #0006;--radius:16px;--font:"Atkinson Hyperlegible", "Segoe UI", sans-serif;--display:"Bricolage Grotesque", "Atkinson Hyperlegible", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--text);background:var(--bg);margin:0}a{color:inherit}button,input{font:inherit}.app-shell{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.site-header{border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:color-mix(in srgb, var(--bg-header) 92%, transparent);align-items:center;gap:1.5rem;padding:1rem 1.5rem;display:flex;position:sticky;top:0}.brand{align-items:center;text-decoration:none;display:inline-flex}.brand-name{font-family:var(--display);letter-spacing:-.03em;font-size:1.25rem;font-weight:800}.brand-name:hover{color:var(--accent)}.auth-slot{margin-left:auto}.user-chip{align-items:center;gap:.6rem;display:inline-flex}.user-avatar{object-fit:cover;border-radius:999px;width:28px;height:28px}.site-main{width:min(1100px,100% - 2rem);margin:0 auto;padding:1.25rem 0 4rem}.site-footer{color:var(--muted);text-align:center;padding:.75rem 1.5rem 1.25rem;font-size:.8rem}.site-footer p{margin:0}.page{gap:1.25rem;display:grid}.nav-link{color:var(--text-secondary);font-size:.95rem;font-weight:600;text-decoration:none}.nav-link:hover{color:var(--accent)}.home-search{display:block}.home-search-field{display:block;position:relative}.home-search-icon{z-index:1;color:var(--accent);pointer-events:none;position:absolute;top:50%;left:1.15rem;transform:translateY(-50%)}.section-head h1,.section-head h2,.detail-body h1{font-family:var(--display);letter-spacing:-.04em;margin:0}.section-head.compact h2{font-size:1.35rem}.section-head p{color:var(--text-secondary);margin:.35rem 0 0}.section-head.compact p{font-size:.9rem}.btn{cursor:pointer;background:var(--surface);color:var(--text);border:0;border-radius:999px;align-items:center;gap:.5rem;padding:.7rem 1.15rem;text-decoration:none;display:inline-flex}.btn.primary{background:var(--button-primary-bg);color:var(--button-primary-fg);font-weight:700}.btn.primary:hover{background:var(--accent-hover)}.spotify-icon-mono{filter:grayscale()brightness(0);flex-shrink:0}.btn.spotify{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600}.btn.spotify:hover{border-color:var(--border);background:var(--surface-hover)}.btn.ghost{border:1px solid var(--border);color:var(--text-secondary);background:0 0}.btn.ghost:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border)}.search-field input{border:1px solid var(--border-subtle);background:var(--surface);width:100%;color:var(--text);border-radius:999px;outline:none;padding:.95rem 1.2rem}.search-field input[type=search]{appearance:none}.search-field input[type=search]::-webkit-search-decoration{appearance:none}.search-field input[type=search]::-webkit-search-cancel-button{appearance:none}.home-search-field input{padding:1rem 1.25rem 1rem 3.15rem}.search-field input:focus{border-color:var(--accent-muted);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}.home-search-field:focus-within .home-search-icon{color:var(--accent-hover)}.playlist-grid{gap:1rem;display:grid}.playlist-card{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow);transition:border-color .16s,background .16s;overflow:hidden}.playlist-card.is-expanded{border-color:var(--border);background:var(--bg-elevated)}.playlist-card-main{width:100%;color:inherit;text-align:left;cursor:pointer;font:inherit;background:0 0;border:0;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem;display:grid}.playlist-card.has-rank .playlist-card-main{grid-template-columns:2.5rem 72px minmax(0,1fr) auto}.playlist-card-main:hover{background:var(--surface-hover)}.expand-hint{width:2.4rem;height:2.4rem;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;transition:transform .16s;display:inline-flex}.expand-hint.is-open{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.expand-hint{transition:none}}.playlist-expand{border-top:1px solid var(--divider);gap:.85rem;padding:0 .9rem 1rem;display:grid}.expand-description{margin:0;font-size:.92rem}.expand-actions{flex-wrap:wrap;gap:.65rem;display:flex}.expand-rate{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);gap:.45rem;padding:.85rem 0;display:grid}.expand-rate-label{color:var(--text-secondary);margin:0;font-size:.9rem;font-weight:700}.expand-tracks{border:1px solid var(--border-subtle);background:color-mix(in srgb, var(--bg) 70%, transparent);border-radius:12px;max-height:22rem;overflow:auto}.expand-embed{margin:0}.rank{font-family:var(--display);color:var(--muted);min-width:2.2rem;font-weight:700}.cover-wrap,.detail-cover{flex-shrink:0;width:72px;height:72px}.cover,.detail-cover img,.cover.placeholder{object-fit:cover;background:var(--bg-elevated);border-radius:12px;width:100%;height:100%}.cover.placeholder.large,.detail-cover{aspect-ratio:1;width:min(280px,100%);height:auto}.playlist-meta{min-width:0}.playlist-meta h3{overflow-wrap:anywhere;margin:0;font-size:1.05rem}.owner,.muted,.result-count{color:var(--text-secondary)}.owner{margin:.2rem 0 .45rem}.playlist-meta-line{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:.45rem .65rem;margin:.2rem 0 0;font-size:.95rem;display:flex}.playlist-meta-line .meta-sep{color:var(--muted);-webkit-user-select:none;user-select:none}.owner-link{color:var(--accent);text-decoration:none}.owner-link:hover{text-decoration:underline}.rating-row{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.rating-text{color:var(--text-secondary);font-size:.9rem}.stars,.stars.readonly{gap:.15rem;display:inline-flex}.star,.star-btn{color:var(--star-inactive);font-size:1.15rem;line-height:1}.star.filled,.star.half,.star-btn.filled{color:var(--star-active)}.star-btn{cursor:pointer;background:0 0;border:0;padding:0}.detail-layout{gap:1.5rem;display:grid}.detail-body{align-content:start;gap:.85rem;display:grid}.description{white-space:pre-wrap;color:var(--text-secondary);line-height:1.5}.rate-box{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:1rem}.rate-box h2{margin:0 0 .6rem;font-size:1rem}.back-link{color:var(--text-secondary);text-decoration:none}.back-link:hover{color:var(--accent)}.error{color:var(--danger)}.load-more{justify-self:start}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tracks-section{gap:1rem;margin-top:2rem;display:grid}.track-list{gap:.4rem;margin:0;padding:0;list-style:none;display:grid}.track-row{color:inherit;border:1px solid #0000;border-bottom:1px solid var(--divider);background:0 0;border-radius:12px;grid-template-columns:2rem 48px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.55rem .7rem;text-decoration:none;display:grid}a.track-row:hover{background:var(--surface-hover);border-bottom-color:var(--divider)}.track-index{color:var(--muted);text-align:right;font-size:.85rem}.track-art,.track-art img,.track-art-placeholder{object-fit:cover;background:var(--bg-elevated);border-radius:8px;width:48px;height:48px}.track-meta{min-width:0}.track-name{white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:700;overflow:hidden}.track-artists{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin:.15rem 0 0;font-size:.9rem;overflow:hidden}.track-duration{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:.9rem}.track-list-skeleton .skeleton-row{pointer-events:none}.skeleton-block{background:linear-gradient(90deg, var(--surface) 0%, var(--surface-hover) 50%, var(--surface) 100%);background-size:200% 100%;border-radius:8px;animation:1.2s ease-in-out infinite skeleton-shimmer;display:block}.skeleton-index{border-radius:4px;width:1rem;height:.7rem;margin-left:auto}.skeleton-line{border-radius:999px;height:.75rem}.skeleton-line-title{width:62%;margin-bottom:.45rem}.skeleton-line-sub{opacity:.85;width:42%}.skeleton-duration{border-radius:4px;width:2.2rem;height:.7rem}.track-list-fade-in{animation:.22s ease-out track-fade-in}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@keyframes track-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.skeleton-block,.track-list-fade-in{animation:none}}.spotify-embed-wrap{border-radius:var(--radius);border:1px solid var(--border);background:#000;overflow:hidden}.spotify-embed-wrap iframe{border:0;display:block}@media (width>=800px){.detail-layout{grid-template-columns:280px 1fr;align-items:start}.playlist-card-main{grid-template-columns:88px minmax(0,1fr) auto}.playlist-card.has-rank .playlist-card-main{grid-template-columns:2.5rem 88px minmax(0,1fr) auto}.cover-wrap{width:88px;height:88px}}@media (width<=700px){.site-header{gap:.75rem;padding:.75rem 1rem}.site-main{width:min(1100px,100% - 1.25rem);padding:.85rem 0 3rem}.brand-name{font-size:1rem}.user-name{display:none}.btn.spotify{padding:.55rem .85rem}.playlist-card-main,.playlist-card.has-rank .playlist-card-main{grid-template-columns:56px minmax(0,1fr) auto}.cover-wrap{width:56px;height:56px}.rank{display:none}}