Use native sleep progress and iOS delete

assets/css/app.css

@@ -1009,15 +1009,31 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__fill {
+.sleep-phase-bar__progress {
     position: absolute;
-    inset: 0 auto 0 0;
-    display: block;
+    inset: 0;
+    width: 100%;
     height: 100%;
-    width: var(--sleep-actual-left, 0);
-    min-width: 0.28rem;
-    max-width: 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__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__progress::-moz-progress-bar {
     border-radius: inherit;
     background: linear-gradient(90deg, #64d2ff, #0a84ff);
     box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
@@ -4949,10 +4965,12 @@ input[type="range"] {
         min-width: 2.85rem;
         min-height: 2.85rem;
         border-radius: 999px;
-        background: rgba(242, 242, 247, 0.92);
-        color: rgba(28, 28, 30, 0.86);
+        border-color: rgba(255, 255, 255, 0.48);
+        background: #ff3b30;
+        color: #fff;
         font-size: 1.05rem;
         font-weight: 560;
+        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 {