@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";:root{--spotify-green:#1ed760;--spotify-green-hover:#1db954;--bg-base:#121212;--bg-surface:#181818;--bg-mid:#1f1f1f;--bg-card:#252525;--bg-card-hover:#2a2a2a;--text-base:#fff;--text-subdued:#b3b3b3;--text-silver:#cbcbcb;--border-subtle:#4d4d4d;--border-light:#7c7c7c;--shadow-heavy:#00000080 0px 8px 24px;--shadow-medium:#0000004d 0px 8px 8px;--font-main:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-base);color:var(--text-base);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}h1.section-title{letter-spacing:-.01em;font-size:24px;font-weight:700}h2.card-title{margin-bottom:4px;font-size:16px;font-weight:700}.text-subdued{color:var(--text-subdued)}.btn{cursor:pointer;border:none;justify-content:center;align-items:center;min-height:48px;padding:8px 32px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex;border-radius:9999px!important;text-decoration:none!important}.btn-green{background-color:var(--spotify-green);color:#000}.btn-green:hover{background-color:var(--spotify-green-hover);transform:scale(1.04)}.btn-outline{color:var(--text-base);border:1px solid var(--border-light);background-color:#0000}.btn-outline:hover{border-color:var(--text-base);transform:scale(1.04)}.btn-black{background-color:var(--bg-base);color:var(--text-base)}.btn-circular{background-color:var(--spotify-green);color:#000;width:48px;height:48px;box-shadow:var(--shadow-medium);justify-content:center;align-items:center;transition:all .2s;display:flex;border-radius:50%!important}.btn-circular:hover{background-color:var(--spotify-green-hover);transform:scale(1.06)}.app-container{grid-template-columns:240px 1fr;height:100vh;display:grid}.sidebar{background-color:#000;flex-direction:column;gap:24px;padding:24px;display:flex}.main-view{background:linear-gradient(#1e1e1e 0%,#121212 40%);padding:24px 32px;overflow-y:auto}.nav-item{color:var(--text-subdued);align-items:center;gap:16px;font-size:14px;font-weight:700;text-decoration:none;transition:color .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--text-base)}.card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;margin-top:24px;display:grid}.card{background-color:var(--bg-surface);cursor:pointer;border-radius:8px;padding:16px;transition:background-color .3s;position:relative}.card:hover{background-color:var(--bg-card)}.card-img-container{aspect-ratio:1;box-shadow:var(--shadow-heavy);border-radius:6px;margin-bottom:16px;overflow:hidden}.card-img{object-fit:cover;width:100%;height:100%}.play-btn-overlay{opacity:0;transition:all .3s;position:absolute;bottom:100px;right:24px;transform:translateY(8px)}.card:hover .play-btn-overlay{opacity:1;transform:translateY(0)}.player-bar{z-index:1000;background-color:#000;border-top:1px solid #282828;justify-content:space-between;align-items:center;width:100%;height:90px;padding:0 16px;display:flex;position:fixed;bottom:0}.track-info{align-items:center;gap:12px;width:30%;display:flex}.player-controls{flex-direction:column;align-items:center;gap:8px;width:40%;display:flex}.volume-controls{justify-content:flex-end;align-items:center;gap:12px;width:30%;display:flex}.progress-bar{background:#4d4d4d;border-radius:2px;width:100%;height:4px;position:relative}.progress-inner{background:var(--text-base);border-radius:2px;width:30%;height:100%}.progress-bar:hover .progress-inner{background:var(--spotify-green)}@media (width<=768px){.app-container{grid-template-columns:1fr}.sidebar{display:none}}