:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent-primary: #ff3366;--accent-secondary: #00ccff;--accent-success: #00ff66;--accent-warning: #ffcc00;--border-color: #333333;--font-family: "Inter", system-ui, -apple-system, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .1s ease;--transition-base: .2s ease}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f4f4f5;--bg-tertiary: #e4e4e7;--text-primary: #09090b;--text-secondary: #71717a;--accent-primary: #e11d48;--accent-secondary: #0284c7;--accent-success: #16a34a;--accent-warning: #ca8a04;--border-color: #e4e4e7}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-full{width:100%}.h-full{height:100%}.h-screen{height:100vh}.hidden,.mobile-only{display:none}.app-sidebar{width:240px;display:flex}.responsive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-4)}.dj-player-grid{display:grid;grid-template-columns:250px 1fr 200px;grid-template-rows:auto auto;grid-template-areas:"info controls volume" "info timeline volume";align-items:center;gap:4px var(--spacing-6);width:100%;height:100%}.player-track-info{grid-area:info;overflow:hidden;display:flex;flex-direction:column}.player-buttons{grid-area:controls;justify-self:center;display:flex;align-items:center;gap:var(--spacing-4)}.player-timeline{grid-area:timeline;display:flex;align-items:center;width:100%;gap:var(--spacing-3);font-size:var(--font-size-xs);color:var(--text-secondary)}.player-controls-right{grid-area:volume;justify-self:end;display:flex;align-items:center;gap:var(--spacing-4)}@media(max-width:1024px){.app-sidebar{width:200px}}@media(max-width:768px){.app-sidebar{display:none}.responsive-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.dj-player-grid{grid-template-columns:1fr auto;grid-template-rows:auto auto;grid-template-areas:"info controls" "timeline timeline";gap:8px var(--spacing-4)}.player-controls-right{display:none!important}.player-buttons{justify-self:end}}@media(max-width:480px){.mobile-hide{display:none!important}.mobile-only{display:block!important}.player-controls-center{min-width:50px;margin-left:var(--spacing-4)}}#root{width:100%;height:100vh;margin:0;padding:0}@keyframes sync-spin{to{transform:rotate(360deg)}}.sync-spin{animation:sync-spin 1.1s linear infinite}@media(prefers-reduced-motion:reduce){.sync-spin{animation:none}}