Render sleep bar fill directly

assets/css/app.css

@@ -1004,6 +1004,16 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.08);
 }
 
+.sleep-phase-bar::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: var(--sleep-actual-width, 0);
+    min-width: 0.2rem;
+    border-radius: inherit;
+    background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
+}
+
 .sleep-phase-bar__fill {
     position: absolute;
     inset: 0 auto 0 0;
@@ -1012,8 +1022,9 @@ body.page-dashboard .content {
     min-width: 0.18rem;
     overflow: hidden;
     border-radius: inherit;
-    background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
+    background: transparent;
     box-shadow: 0 12px 28px rgba(6, 16, 28, 0.2);
+    z-index: 1;
 }
 
 .sleep-phase-bar__target {
@@ -1025,7 +1036,7 @@ body.page-dashboard .content {
     border-left: 2px solid rgba(255, 255, 255, 0.92);
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
     pointer-events: none;
-    z-index: 2;
+    z-index: 3;
 }
 
 .sleep-phase-bar__target span {
@@ -1137,6 +1148,7 @@ body.page-dashboard .content {
     font-size: 0.68rem;
     transform: translateY(-50%);
     pointer-events: none;
+    z-index: 2;
 }
 
 .media-lightbox[hidden] {