style(ui): P2 contrast muted-foreground, sidebar spacing, dashboard gap, compact play button

- index.css: --muted-foreground 0.70 → 0.73 in dark for better secondary text readability (audit §5.2)
- PlayerControls: compact play w-10→w-9, icon w-5→w-4; use bg-primary/text-primary-foreground
- Sidebar: space-y-6→space-y-8, section title mb-2→mb-3 mt-1 (audit §4.2)
- AdminDashboardView: stats grid gap-6→gap-8 (audit §4.3)

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/admin/admin-dashboard-view/AdminDashboardView.tsx

@@ -40,7 +40,7 @@ export function AdminDashboardView() {
       />
 
       <motion.div
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
         initial="hidden"
         animate="visible"
         variants={{ visible: { transition: { staggerChildren: 0.05 } }, hidden: {} }}

apps/web/src/components/layout/Sidebar.tsx

@@ -136,13 +136,13 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onNavigate, onLog
           </Button>
         </div>
 
-        {/* Nav Content */}
-        <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-6">
+        {/* Nav Content — audit §4.2: more space between sections */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-8">
           {navItems.map((group, idx) => (
             <div key={idx}>
               <h3 className={cn(
-                "text-[9px] font-mono font-bold text-muted-foreground/50 uppercase tracking-[0.2em] mb-2 px-3 transition-all duration-300",
-                !sidebarOpen && "opacity-0 h-0 overflow-hidden mb-0"
+                "text-[9px] font-mono font-bold text-muted-foreground/50 uppercase tracking-[0.2em] mb-3 mt-1 px-3 transition-all duration-300",
+                !sidebarOpen && "opacity-0 h-0 overflow-hidden mb-0 mt-0"
               )}>
                 {group.section}
               </h3>

apps/web/src/components/player/PlayerControls.tsx

@@ -84,14 +84,14 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
         </button>
         <button
           onClick={togglePlay}
-          className={`${layout === 'full' ? 'w-14 h-14' : 'w-10 h-10'} rounded-full bg-white text-black flex items-center justify-center transition-opacity duration-200 hover:opacity-90`}
+          className={`${layout === 'full' ? 'w-14 h-14' : 'w-9 h-9'} rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-opacity duration-200 hover:opacity-90 shadow-lg shadow-primary/20`}
         >
           {isPlaying ? (
             <Pause
               className={
                 layout === 'full'
                   ? 'w-6 h-6 fill-current'
-                  : 'w-5 h-5 fill-current'
+                  : 'w-4 h-4 fill-current'
               }
             />
           ) : (
@@ -99,7 +99,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
               className={
                 layout === 'full'
                   ? 'w-6 h-6 fill-current ml-1'
-                  : 'w-5 h-5 fill-current ml-1'
+                  : 'w-4 h-4 fill-current ml-0.5'
               }
             />
           )}

apps/web/src/index.css

@@ -220,7 +220,8 @@
   --secondary-foreground: oklch(0.98 0 0);
 
   --muted: oklch(0.25 0.01 265);
-  --muted-foreground: oklch(0.70 0.01 265);
+  /* Slightly higher contrast for secondary text (audit §5.2 / P2) */
+  --muted-foreground: oklch(0.73 0.01 265);
 
   --accent: oklch(0.22 0.02 265);
   --accent-foreground: oklch(0.98 0 0);