Use SVG sleep bar and trash icon

assets/css/app.css

@@ -1009,34 +1009,27 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__progress {
+.sleep-phase-bar__svg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    border: 0;
-    border-radius: inherit;
-    appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
 }
 
-.sleep-phase-bar__progress::-webkit-progress-bar {
-    border-radius: inherit;
-    background: transparent;
+.sleep-phase-bar__track {
+    fill: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__progress::-webkit-progress-value {
-    border-radius: inherit;
-    background: linear-gradient(90deg, #64d2ff, #0a84ff);
-    box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
+.sleep-phase-bar__fill {
+    fill: #64d2ff;
+    filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.48));
 }
 
-.sleep-phase-bar__progress::-moz-progress-bar {
-    border-radius: inherit;
-    background: linear-gradient(90deg, #64d2ff, #0a84ff);
-    box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
+.sleep-phase-bar__target-line {
+    stroke: rgba(255, 255, 255, 0.95);
+    stroke-width: 1.25;
+    vector-effect: non-scaling-stroke;
 }
 
 .sleep-phase-bar__target {
@@ -4973,38 +4966,10 @@ input[type="range"] {
         box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
     }
 
-    .timeline-card__delete .trash-button span {
-        position: relative;
-        display: block;
-        width: 0.98rem;
-        height: 1.08rem;
-        margin-top: 0.1rem;
-        border: 2px solid currentColor;
-        border-top: 0;
-        border-radius: 0 0 0.18rem 0.18rem;
-    }
-
-    .timeline-card__delete .trash-button span::before {
-        content: "";
-        position: absolute;
-        left: -0.18rem;
-        right: -0.18rem;
-        top: -0.34rem;
-        height: 0.16rem;
-        border-radius: 999px;
-        background: currentColor;
-    }
-
-    .timeline-card__delete .trash-button span::after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: -0.55rem;
-        width: 0.46rem;
-        height: 0.16rem;
-        border-radius: 999px;
-        background: currentColor;
-        transform: translateX(-50%);
+    .timeline-card__delete .trash-button img {
+        width: 1.2rem;
+        height: 1.2rem;
+        filter: brightness(0) invert(1);
     }
 
     .timeline-card--with-image .timeline-card__time-chip {

assets/icons/trash.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M4 7h16"/>
+  <path d="M9 7V5.8A1.8 1.8 0 0 1 10.8 4h2.4A1.8 1.8 0 0 1 15 5.8V7"/>
+  <path d="M7 7l.8 12.2A2 2 0 0 0 9.8 21h4.4a2 2 0 0 0 2-1.8L17 7"/>
+  <path d="M10 11v6"/>
+  <path d="M14 11v6"/>
+</svg>