.

src/components/controls/ProgressBar.css

@@ -1,3 +1,8 @@
+/* ============================================
+   PROGRESS BAR
+   Clean & Modern Design
+   ============================================ */
+
 .progress-bar {
   position: relative;
   width: 100%;
@@ -27,7 +32,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--player-buffered);
+  background-color: var(--player-progress-buffered);
   transition: width 0.1s ease;
 }
 
@@ -51,7 +56,6 @@
   transform: scale(0);
   transition: transform var(--player-transition-fast) ease;
   margin-right: -6px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
 }
 
 .progress-bar:hover .progress-handle,
@@ -61,17 +65,16 @@
 
 .progress-tooltip {
   position: absolute;
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 10px);
   transform: translateX(-50%);
   background-color: var(--player-bg-menu);
   color: var(--player-text);
-  padding: 4px 8px;
+  padding: 6px 12px;
   border-radius: var(--player-radius-sm);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
   pointer-events: none;
-  box-shadow: var(--player-shadow-md);
   z-index: 10;
 }
 
@@ -103,10 +106,6 @@
     width: 10px;
     height: 10px;
     margin-right: -5px;
-  }
-
-  /* Always show handle on mobile for easier touch interaction */
-  .progress-handle {
     transform: scale(1);
   }
 }