:root{--color-background-base: #121212;--color-background-secondary: #2e2e2e;--color-background-tertiary: rgba(46, 46, 46, .95);--color-background-player: rgba(65, 65, 65, .95);--color-background-card: rgba(255, 255, 255, .03);--color-background-hover: rgba(255, 255, 255, .1);--color-background-active: rgba(255, 255, 255, .15);--color-background-input: rgba(255, 255, 255, .05);--color-background-input-focus: rgba(142, 174, 255, .15);--color-background-modal: #1f2937;--color-background-modal-secondary: #374151;--color-background-overlay: rgba(0, 0, 0, .6);--color-background-overlay-dark: rgba(0, 0, 0, .7);--color-background-notification-unread: rgba(59, 130, 246, .08);--color-background-notification-unread-hover: rgba(59, 130, 246, .12);--color-background-stream-card: rgba(103, 126, 234, .08);--color-background-purchases-card: rgba(118, 75, 162, .08);--color-background-success-dark: #064e3b;--color-text-primary: #e0e0e0;--color-text-secondary: rgba(224, 224, 224, .8);--color-text-tertiary: rgba(224, 224, 224, .6);--color-text-muted: rgba(224, 224, 224, .5);--color-text-inverse: #ffffff;--color-text-disabled: #999999;--color-text-footer: #888888;--color-text-footer-muted: #636363;--color-text-player-muted: #8e8e8e;--color-text-modal-muted: #9ca3af;--color-border-default: rgba(255, 255, 255, .1);--color-border-subtle: rgba(255, 255, 255, .05);--color-border-medium: rgba(255, 255, 255, .2);--color-border-strong: rgba(255, 255, 255, .3);--color-border-input: rgba(255, 255, 255, .2);--color-border-input-focus: #3b82f6;--color-border-modal: #374151;--color-border-stream-card: rgba(103, 126, 234, .2);--color-border-purchases-card: rgba(118, 75, 162, .2);--color-border-notification: #3b82f6;--color-primary-50: #eff6ff;--color-primary-100: #dbeafe;--color-primary-500: #3b82f6;--color-primary-600: #2563eb;--color-primary-700: #1d4ed8;--color-primary-gradient-start: #677eea;--color-primary-gradient-end: #764ba2;--color-primary-gradient-dark-start: #1e3a8a;--color-primary-gradient-dark-end: #1e40af;--color-semantic-success: #22c55e;--color-semantic-success-bg: rgba(34, 197, 94, .1);--color-semantic-success-border: rgba(34, 197, 94, .3);--color-semantic-success-dark: #10b981;--color-semantic-success-darker: #059669;--color-semantic-error: #ef4444;--color-semantic-error-bg: rgba(239, 68, 68, .1);--color-semantic-error-border: rgba(239, 68, 68, .3);--color-semantic-error-badge: #ff4444;--color-semantic-warning: #f59e0b;--color-semantic-warning-bg: rgba(245, 158, 11, .1);--color-semantic-warning-gradient-start: #fbbf24;--color-semantic-warning-gradient-end: #f59e0b;--color-semantic-info: #3b82f6;--color-semantic-info-bg: rgba(59, 130, 246, .1);--color-semantic-info-light: #60a5fa;--color-semantic-info-glow: rgba(59, 130, 246, .4);--color-accent-spotify-green: #1db954;--color-accent-purple-light: #8b9aff;--color-accent-purple-medium: #c49bff;--color-accent-purple-vibrant: #8b5cf6;--color-accent-rose: #ea6767;--color-accent-rose-light: #ff7a7a;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--spacing-0: 0;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 2.5rem;--spacing-3xl: 3rem;--spacing-4xl: 4rem;--spacing-gap-xs: .5rem;--spacing-gap-sm: .75rem;--spacing-gap-md: 1rem;--spacing-gap-lg: 1.5rem;--spacing-gap-xl: 2rem;--spacing-gap-2xl: 2rem;--typography-font-family-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;--typography-font-family-monospace: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;--typography-font-size-xs: .65rem;--typography-font-size-sm: .7rem;--typography-font-size-base: .875rem;--typography-font-size-md: 1rem;--typography-font-size-lg: 1.125rem;--typography-font-size-xl: 1.25rem;--typography-font-size-2xl: 1.5rem;--typography-font-size-3xl: 1.75rem;--typography-font-size-4xl: 2rem;--typography-font-size-5xl: 2.5rem;--typography-font-size-hero: 2rem;--typography-font-weight-light: 300;--typography-font-weight-normal: 400;--typography-font-weight-medium: 500;--typography-font-weight-semibold: 600;--typography-font-weight-bold: 700;--typography-line-height-none: 1;--typography-line-height-tight: 1.2;--typography-line-height-normal: 1.3;--typography-line-height-relaxed: 1.4;--typography-line-height-loose: 1.5;--typography-line-height-very-loose: 1.6;--typography-letter-spacing-tightest: -.025em;--typography-letter-spacing-tighter: -.02em;--typography-letter-spacing-tight: -.01em;--typography-letter-spacing-normal: .01em;--typography-letter-spacing-wide: .02em;--typography-letter-spacing-wider: .025em;--typography-letter-spacing-widest: .05em;--typography-letter-spacing-pixel: .5px;--border-radius-none: 0;--border-radius-sm: 3px;--border-radius-md: 4px;--border-radius-lg: 8px;--border-radius-xl: 12px;--border-radius-2xl: 16px;--border-radius-3xl: 20px;--border-radius-full: 50%;--border-radius-inherit: inherit;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .15), 0 0 0 1px rgba(255, 255, 255, .05);--shadow-md: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .3);--shadow-player: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 12px rgba(0, 0, 0, .15), 0 0 0 1px rgba(255, 255, 255, .05);--shadow-card: 0 4px 12px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .15);--shadow-card-hover: 0 2px 6px rgba(0, 0, 0, .2);--shadow-focus: 0 0 0 2px rgba(59, 130, 246, .2);--shadow-focus-lg: 0 0 0 3px rgba(59, 130, 246, .1);--shadow-primary-glow: 0 0 4px rgba(59, 130, 246, .4);--shadow-error: 0 4px 12px rgba(220, 38, 38, .3);--shadow-primary: 0 4px 12px rgba(103, 126, 234, .3);--shadow-primary-hover: 0 4px 12px rgba(103, 126, 234, .4);--transition-fast: .1s;--transition-base: .2s;--transition-slow: .3s;--transition-easing-default: cubic-bezier(.4, 0, .2, 1);--transition-easing-ease: ease;--transition-easing-ease-in-out: ease-in-out;--transition-all: all .2s ease;--transition-color: color .2s ease;--transition-transform: transform .1s ease, box-shadow .2s ease}body{margin:0;font-family:var(--typography-font-family-primary);color:var(--color-text-primary);background-color:var(--color-background-base)}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;margin:0 auto;max-width:1200px}@media (max-width: 480px){.main-content{max-width:100%}}.menu-container{position:relative;display:inline-block}.menu-trigger{cursor:pointer;user-select:none}.menu-trigger:focus{outline:none}.menu-dropdown{position:absolute;top:100%;z-index:1000;min-width:fit-content;background-color:var(--color-background-secondary);border:1px solid var(--color-border-medium);border-radius:var(--borderRadius-md);box-shadow:0 4px 6px #0000004d;margin-top:var(--spacing-xl);animation:menuFadeIn .15s ease-out;overflow:visible}.menu-dropdown.notification-menu{width:300px;max-width:300px;min-width:300px}.menu-dropdown.notification-menu .menu-item{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.menu-dropdown.tail-left{left:-17px!important}.menu-dropdown.tail-center{left:50%!important;transform:translate(-50%)!important}.menu-dropdown.tail-right{right:-17px!important;left:auto!important}.menu-chevron{position:absolute;top:-8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--color-background-secondary);z-index:1001}.menu-dropdown.tail-left .menu-chevron{left:20px!important;right:auto!important}.menu-dropdown.tail-center .menu-chevron{left:50%!important;right:auto!important;transform:translate(-50%)!important}.menu-dropdown.tail-right .menu-chevron{right:20px!important;left:auto!important}.menu-chevron:before{display:none;content:"";position:absolute;top:1px;left:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid var(--color-border-medium);z-index:-1}.menu-items{padding:4px 0;max-height:300px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--color-neutral-500) var(--color-background-secondary)}.menu-items::-webkit-scrollbar{width:6px}.menu-items::-webkit-scrollbar-track{background:var(--color-background-secondary)}.menu-items::-webkit-scrollbar-thumb{background:var(--color-neutral-500);border-radius:var(--borderRadius-sm)}.menu-items::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)}.menu-item{display:block;padding:8px var(--spacing-md);color:var(--color-text-primary);text-decoration:none;font-size:14px;line-height:var(--typography-line-height-relaxed);transition:background-color .15s var(--transition-easing-ease);border:none;background:none;width:100%;text-align:left;cursor:pointer;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item:hover{background-color:var(--color-neutral-600);color:var(--color-text-primary);text-decoration:none}.menu-item:focus{background-color:var(--color-neutral-600);outline:none}.menu-item:active{background-color:var(--color-neutral-500)}.menu-item button{padding:0;border:none;background:none;color:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;transition:inherit;letter-spacing:inherit;text-decoration:none;width:auto;text-align:left;line-height:inherit}.menu-item button:hover,.menu-item button:active{color:inherit;background:none}.menu-item span.info svg{margin-bottom:-6px;margin-right:6px}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes menuFadeInCenter{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.menu-dropdown.tail-center{animation:menuFadeInCenter .15s ease-out}@media (max-width: 768px){.menu-dropdown{min-width:140px;font-size:16px}.menu-dropdown.notification-menu{width:260px;max-width:260px;min-width:260px}.menu-item{padding:12px 16px;font-size:16px}}@media (max-width: 480px){.menu-dropdown.notification-menu{width:240px;max-width:240px;min-width:240px}}.footer{width:100%;background-color:var(--color-background-tertiary);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);margin-top:auto;order:2}.footer-container{max-width:1200px;margin:0 auto;padding:var(--spacing-sm) var(--spacing-sm)}.footer-content{display:flex;justify-content:space-between;align-items:center}.footer-links{display:flex;gap:var(--spacing-lg);align-items:center}.footer-link{font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-sm);color:var(--color-text-footer);text-decoration:none;letter-spacing:var(--typography-letter-spacing-tight);line-height:var(--typography-line-height-relaxed);transition:var(--transition-color)}.footer-link:hover{color:var(--color-text-inverse)}.copyright{font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-sm);color:var(--color-text-footer-muted);margin:0;letter-spacing:var(--typography-letter-spacing-tight);line-height:var(--typography-line-height-relaxed)}@media (max-width: 768px){.footer-container{padding:var(--spacing-md)}.copyright,.footer-link{font-size:.8125rem}}@media (max-width: 480px){.footer-container{padding:var(--spacing-md)}.footer-content,.footer-links{flex-direction:column;gap:var(--spacing-sm)}.copyright,.footer-link{font-size:.75rem}}.library{cursor:pointer;transition:filter .2s ease}.library:hover{filter:brightness(1.5)}div.bell-icon{cursor:pointer;margin-bottom:-5px;transition:filter .2s ease}div.bell-icon:hover{filter:brightness(1.5)}.user-icon{cursor:pointer;margin-bottom:-9px;margin-top:-4px}.user-icon:hover{filter:brightness(1.5)}.search-section{position:relative}.search-section .search-icon{color:var(--color-text-muted);cursor:pointer;position:absolute;right:.3rem;top:64%;transform:translateY(-50%);z-index:2000000}.search-section .search-icon svg{width:18px;height:18px}.search-input{font-size:11px}.search-results-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--background-color, #1a1a1a);border:1px solid var(--color-border-medium);border-radius:var(--borderRadius-md);margin-top:4px;max-height:300px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000004d}.search-result-item{padding:12px;cursor:pointer;border-bottom:1px solid var(--color-border-default);transition:background-color var(--transition-base) var(--transition-easing-ease)}.search-result-item:hover{background:var(--color-background-input)}.search-result-item:last-child{border-bottom:none}.artist-name{font-weight:var(--typography-font-weight-medium);font-size:14px;color:var(--color-text-secondary)}.artist-meta{font-size:12px;color:var(--color-text-tertiary);margin-top:4px}.header{position:sticky;top:0;width:100%;background-color:var(--color-background-tertiary);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);z-index:1000}.header-container{max-width:1200px;margin:0 auto;padding:var(--spacing-sm);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.brand-name{font-family:var(--typography-font-family-primary);font-size:var(--typography-font-size-md);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary);margin:0;letter-spacing:var(--typography-letter-spacing-tighter);line-height:var(--typography-line-height-tight);text-decoration:none;cursor:pointer;transition:var(--transition-color)}.brand-name:hover{color:var(--color-text-inverse)}.brand-name:visited{color:var(--color-text-primary)}.brand-name:active{color:var(--color-text-disabled)}.header .logo-text-image{height:20px;width:auto;margin-bottom:-4px}.header .logo-graphic-image{height:32px;width:auto;margin-bottom:-9px;margin-top:-4px}.search-section{flex:1;display:flex;justify-content:center;max-width:300px;margin:0 auto}.search-input{backdrop-filter:blur(10px);background-color:#0003;border-radius:var(--borderRadius-sm);border:1px solid var(--color-border-medium);color:var(--color-text-primary);font-family:var(--typography-font-family-primary);font-size:11px;height:6px;margin-bottom:-2px;padding:var(--spacing-sm) .75rem;text-align:center;transition:var(--transition-all);width:100%}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus{outline:none;border-color:var(--color-primary-500);background-color:var(--color-background-input-focus);box-shadow:var(--shadow-focus)}.auth-section{display:flex;align-items:center;flex-shrink:0}.signed-in-icons{display:flex;align-items:center;gap:1rem}.signed-in-icons a{color:inherit;text-decoration:none}.signed-in-icons a:visited,.signed-in-icons a:hover,.signed-in-icons a:active{color:inherit}.signed-in-icons .library svg{margin-bottom:-5px}.auth-buttons{display:flex;align-items:center;gap:1rem}.sign-in-button{padding:0;border:none;background:none;color:var(--color-text-primary);font-size:.75rem;font-weight:var(--typography-font-weight-bold);cursor:pointer;transition:var(--transition-color);letter-spacing:var(--typography-letter-spacing-tight);text-decoration:none}.sign-in-button:hover{color:var(--color-text-inverse);text-decoration:underline}.sign-in-button:active{color:var(--color-text-disabled)}.sign-up-button{background:transparent;border-radius:var(--borderRadius-md);border:1px solid var(--color-text-primary);color:var(--color-text-primary);cursor:pointer;font-size:.75rem;font-weight:var(--typography-font-weight-medium);letter-spacing:var(--typography-letter-spacing-tight);margin-bottom:-9px;margin-top:-8px;padding:var(--spacing-xs) var(--spacing-sm);text-decoration:none;transition:var(--transition-all)}.sign-up-button:hover{background-color:var(--color-text-primary);color:var(--color-background-secondary)}.sign-up-button:active{background-color:var(--color-text-disabled);color:var(--color-background-secondary)}.notification-badge{position:absolute;top:-5px;right:-8px;background:var(--color-semantic-error-badge);color:var(--color-text-inverse);border-radius:var(--borderRadius-full);width:13px;height:13px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:var(--typography-font-weight-semibold);line-height:var(--typography-line-height-none);box-shadow:0 2px 4px #0000004d;border:2px solid var(--color-background-tertiary);pointer-events:none}.notification-placeholder{color:var(--color-text-tertiary);font-style:italic;padding:var(--spacing-sm);text-align:center}.notification-item{padding:.75rem;border-bottom:1px solid var(--color-border-default);cursor:pointer;transition:background-color var(--transition-base) var(--transition-easing-ease)}.notification-item:last-child{border-bottom:none}.notification-item-unread{background-color:var(--color-background-notification-unread);border-left:3px solid var(--color-border-notification)}.notification-item-unread:hover{background-color:var(--color-background-notification-unread-hover)}.notification-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.15rem}.notification-title{font-weight:var(--typography-font-weight-semibold);color:var(--color-text-primary);font-size:.8rem;line-height:var(--typography-line-height-tight);word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;flex:1}.notification-new-indicator{width:8px;height:8px;background-color:var(--color-primary-500);border-radius:var(--borderRadius-full);flex-shrink:0;margin-left:var(--spacing-sm);box-shadow:var(--shadow-primary-glow)}.notification-message{color:#e0e0e0bf;font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-normal);margin-bottom:.15rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.notification-time{color:var(--color-text-muted);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium)}@media (max-width: 768px){.header-container{padding:.75rem var(--spacing-md);gap:.75rem}.brand-name{font-size:var(--typography-font-size-md);flex-shrink:0}.search-section{max-width:250px}.search-input{font-size:.8rem;padding:.4rem .6rem}}@media (max-width: 480px){.header-container{padding:.75rem var(--spacing-md);gap:var(--spacing-sm)}.brand-name{font-size:.9rem;flex-shrink:0}.search-section{max-width:200px}.search-input{font-size:.75rem;padding:.35rem var(--spacing-sm)}.signed-in-icons{gap:.75rem}}.player{position:sticky;bottom:0;left:0;right:0;width:100%;background-color:var(--color-background-player);backdrop-filter:blur(10px);box-shadow:var(--shadow-player);z-index:1000;border-top:1px solid var(--color-border-default);order:1}.player-container{max-width:1200px;margin:0 auto;padding:.75rem;display:flex;align-items:center;gap:var(--spacing-lg)}.player-controls{max-height:36.5px;align-self:center;flex-shrink:0}.control-buttons{max-height:36.5px;display:flex;align-items:center;gap:var(--spacing-sm)}.control-button{background:none;border:none;color:var(--color-text-primary);cursor:pointer;padding:.375rem;border-radius:var(--borderRadius-full);display:flex;align-items:center;justify-content:center;transition:var(--transition-all)}.control-button:hover:not(:disabled){background-color:var(--color-background-hover);color:var(--color-text-inverse)}.control-button:disabled{opacity:.4;cursor:not-allowed}.play-pause-button .play-icon,.play-pause-button .pause-icon{margin-bottom:-3px}.play-pause-button:hover:not(:disabled){background-color:var(--color-background-active)}.play-pause-button:disabled{opacity:.4;cursor:not-allowed;background-color:var(--color-background-input)}.player-info{flex:1;min-width:0}.track-info{margin-bottom:.25rem;display:flex;align-items:baseline;justify-content:center;gap:.5rem;white-space:nowrap;overflow:hidden}.track-title{font-size:var(--typography-font-size-base);font-weight:var(--typography-font-weight-medium);color:var(--color-text-inverse);flex-shrink:0;cursor:pointer;transition:var(--transition-color)}.track-artist{font-size:.75rem;color:var(--color-text-player-muted);overflow:hidden;text-overflow:ellipsis;min-width:0}.artist-name{cursor:pointer;transition:var(--transition-color)}.progress-container{display:flex;align-items:center;gap:.625rem}.time-current,.time-total{font-size:.75rem;color:var(--color-text-player-muted);font-variant-numeric:tabular-nums;min-width:2.5rem;text-align:center}.progress-bar{flex:1;height:4px;background-color:var(--color-border-medium);border-radius:2px;cursor:pointer;position:relative}.progress-fill{height:100%;background-color:var(--color-accent-spotify-green);border-radius:2px;width:0%;transition:width var(--transition-fast) var(--transition-easing-ease)}.player-volume{flex-shrink:0;display:flex;align-items:center;gap:.625rem}.volume-button{background:none;border:none;color:var(--color-text-primary);cursor:pointer;padding:.375rem;border-radius:var(--borderRadius-full);display:flex;align-items:center;justify-content:center;transition:var(--transition-all)}.volume-button:hover{background-color:var(--color-background-hover);color:var(--color-text-inverse)}.volume-slider{width:80px;height:4px;background-color:var(--color-border-medium);border-radius:2px;cursor:pointer;position:relative}.volume-fill{height:100%;background-color:var(--color-accent-spotify-green);border-radius:2px;width:70%;transition:width var(--transition-fast) var(--transition-easing-ease)}@media (max-width: 768px){.player-container{padding:.625rem;gap:.875rem}.player-volume{display:none}.track-title{font-size:.8125rem}.track-artist{font-size:.6875rem}}@media (max-width: 480px){.player-container{padding:.5rem;gap:.625rem;flex-direction:column;align-items:stretch}.player-controls{align-self:center}.player-info{order:-1}.progress-container{gap:.5rem}.time-current,.time-total{min-width:2rem;font-size:.6875rem}.track-info{margin-bottom:.375rem}}