:root{--bg-primary: #000000;--bg-secondary: #0d0d0d;--bg-tertiary: #181818;--bg-elevated: #242424;--bg-hover: #2a2a2a;--text-primary: #ffffff;--text-secondary: #a7a7a7;--text-tertiary: #6a6a6a;--text-muted: #4a4a4a;--accent-primary: #1ed760;--accent-hover: #1fdf64;--accent-pressed: #1abc54;--accent-subtle: rgba(30, 215, 96, .1);--border-subtle: #1a1a1a;--border-default: #282828;--border-muted: #3e3e3e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .7);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .8);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Roboto", sans-serif;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition-normal: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-full);border:2px solid var(--bg-primary)}::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.btn-primary{background-color:var(--accent-primary);color:#000;border:none;border-radius:var(--radius-full);padding:.625rem 1.5rem;font-size:.875rem;font-weight:var(--font-weight-semibold);letter-spacing:-.01em;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.btn-primary:hover{background-color:var(--accent-hover);transform:scale(1.04)}.btn-primary:active{background-color:var(--accent-pressed);transform:scale(.96)}.btn-icon{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:0;border-radius:var(--radius-full);transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}.btn-icon:hover{background-color:var(--bg-elevated);color:var(--text-primary);transform:scale(1.08)}.btn-icon:active{transform:scale(.92)}.btn-icon.large{width:56px;height:56px}.btn-icon.primary{background-color:var(--accent-primary);color:#000;box-shadow:var(--shadow-md)}.btn-icon.primary:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-lg);transform:scale(1.08)}.card{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--border-subtle);transition:all var(--transition-normal)}.card:hover{background-color:var(--bg-tertiary);border-color:var(--border-default);transform:translateY(-1px);box-shadow:var(--shadow-md)}.song-card{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all var(--transition-normal);border:1px solid transparent;position:relative;overflow:hidden}.song-card:hover{background-color:var(--bg-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.song-card:hover .play-overlay{opacity:1;transform:translateY(0)}.play-overlay{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);opacity:0;transform:translateY(12px);transition:all var(--transition-normal);z-index:10}.nav-item{display:flex;align-items:center;padding:.625rem var(--spacing-lg);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:.9375rem;font-weight:var(--font-weight-medium);letter-spacing:-.01em;transition:all var(--transition-fast);gap:var(--spacing-lg)}.nav-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.nav-item.active{color:var(--text-primary)}.nav-item.active:before{content:"";position:absolute;left:0;width:3px;height:24px;background-color:var(--accent-primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.nav-item i{width:20px;text-align:center;flex-shrink:0}.progress-container{position:relative;height:4px;background-color:var(--bg-elevated);border-radius:var(--radius-full);cursor:pointer;overflow:visible;transition:height var(--transition-fast)}.progress-container:hover{height:6px}.progress-bar{height:100%;background-color:var(--accent-primary);border-radius:var(--radius-full);transition:width .1s linear;position:relative}.progress-bar:after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background-color:var(--text-primary);border-radius:var(--radius-full);opacity:0;transition:opacity var(--transition-fast);box-shadow:var(--shadow-md)}.progress-container:hover .progress-bar:after{opacity:1}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--bg-elevated);border-radius:var(--radius-full);outline:none;cursor:pointer;transition:all var(--transition-fast)}.volume-slider:hover{height:6px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;background:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md);opacity:0}.volume-slider:hover::-webkit-slider-thumb{opacity:1;transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:10px;height:10px;background:var(--text-primary);border-radius:var(--radius-full);cursor:pointer;border:none;box-shadow:var(--shadow-md)}.search-input{width:100%;background-color:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius-full);padding:.75rem 1.25rem;color:var(--text-primary);font-size:.875rem;font-weight:var(--font-weight-normal);letter-spacing:-.01em;transition:all var(--transition-fast)}.search-input::placeholder{color:var(--text-tertiary)}.search-input:hover{background-color:var(--bg-elevated);border-color:var(--border-default)}.search-input:focus{outline:none;background-color:var(--bg-elevated);border-color:var(--text-muted);box-shadow:0 0 0 1px var(--text-muted)}.album-art{aspect-ratio:1;background-color:var(--bg-elevated);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:2rem;margin-bottom:var(--spacing-lg);position:relative;overflow:hidden;transition:all var(--transition-normal)}.album-art.large{font-size:4rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.song-card:hover .album-art{transform:scale(1.02);box-shadow:var(--shadow-md)}.text-title{font-size:1.75rem;font-weight:var(--font-weight-bold);color:var(--text-primary);letter-spacing:-.02em;line-height:1.3;margin:0}.text-subtitle{font-size:.9375rem;font-weight:var(--font-weight-semibold);color:var(--text-primary);letter-spacing:-.01em;line-height:1.4;margin:0}.text-body{font-size:.875rem;font-weight:var(--font-weight-normal);color:var(--text-secondary);letter-spacing:-.005em;line-height:1.5;margin:0}.text-caption{font-size:.8125rem;font-weight:var(--font-weight-normal);color:var(--text-tertiary);letter-spacing:0;line-height:1.4;margin:0}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-subtle)}.main-content{background-color:var(--bg-primary)}.player-bar{background-color:var(--bg-secondary);border-top:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 -1px 0 var(--border-subtle)}.modal-overlay{background-color:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.modal-content{background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl)}.fade-in{animation:fadeIn .3s ease-out}.slide-up{animation:slideUp .3s ease-out}.scale-in{animation:scaleIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.song-card{padding:var(--spacing-md)}.album-art{font-size:1.5rem;margin-bottom:var(--spacing-md)}.text-title{font-size:1.5rem}.text-subtitle{font-size:.875rem}}*:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px;border-radius:var(--radius-sm)}.loading{opacity:.5;pointer-events:none}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 0%,var(--bg-tertiary) 50%,var(--bg-secondary) 100%);background-size:200% 100%;animation:loading 1.8s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.text-accent-primary{color:var(--accent-primary)}.bg-bg-primary{background-color:var(--bg-primary)}.bg-bg-secondary{background-color:var(--bg-secondary)}.border-border-subtle{border-color:var(--border-subtle)}.text-text-primary{color:var(--text-primary)}.text-text-secondary{color:var(--text-secondary)}.text-text-muted{color:var(--text-muted)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}@media(max-width:768px){.pb-mobile-nav{padding-bottom:160px}}button,input,a,.song-card,.nav-item{transition:all var(--transition-normal)}::selection{background-color:var(--accent-subtle);color:var(--accent-primary)}