1 files changed, 69 insertions, 0 deletions
diff --git a/hg.css b/hg.css
index a2c2bd3..5451dec 100644
--- a/hg.css
+++ b/hg.css
@@ -427,6 +427,75 @@ canvas {
   top: 0;
 }
 
+.progress-bar-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 55px;
+  background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.85));
+  border-top: 2px solid #ff2975;
+  z-index: 1000;
+  padding: 10px 20px;
+  box-shadow: 
+    0 -2px 10px rgba(0, 0, 0, 0.6),
+    0 0 15px rgba(255, 41, 117, 0.2);
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-family: "VCR", monospace;
+  font-size: 10px;
+  color: #00ffff;
+  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
+}
+
+.progress-bar {
+  position: relative;
+  height: 6px;
+  background: linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.9));
+  border: 1px solid #333;
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #ff2975, #00ffff);
+  border-radius: 3px;
+  width: 0%;
+  transition: width 0.1s ease-out;
+  box-shadow: 0 0 8px rgba(255, 41, 117, 0.4);
+}
+
+.progress-handle {
+  position: absolute;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+  background: radial-gradient(circle, #00ffff, #ff2975);
+  border: 1px solid #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
+  transform: translateX(-50%);
+}
+
+.progress-bar:hover .progress-handle {
+  opacity: 1;
+}
+
+.progress-handle:hover {
+  transform: translateX(-50%) scale(1.1);
+  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
+}
+
 .player-controls {
   position: absolute;
   top: 0;