refactor(ui): complete ui template migration and fix playback

static/style.css

@@ -5,17 +5,31 @@
 @source "..";
 @source "../web/**/*.templ";
 
+@theme {
+  --color-background: #080808;
+  --color-background-sidebar: #0f0f0f;
+  --color-background-header: #141414;
+  --color-background-surface: #202020;
+  --color-background-button: #1a1a1a;
+  --color-background-button-hover: #252525;
+
+  --color-foreground-muted: #6a6b70;
+  --color-foreground: #f8f9fa;
+
+  --color-accent: #7cb518;
+}
+
 :root {
   color-scheme: light dark;
 
-  --bg: light-dark(#fafaf9, #080808);
+  --bg: var(--color-background);
   --panel: light-dark(#f5f5f4, #181818);
   --panel-soft: light-dark(#e7e5e4, #202020);
   --header: light-dark(#ffffff, #101010);
   --text: light-dark(#1c1917, #e7e5e4);
   --text-muted: light-dark(#57534e, #a8a29e);
   --text-faint: light-dark(#a8a29e, #78716c);
-  --accent: light-dark(#0c0a09, #fafaf9);
+  --accent: var(--color-accent);
   --danger: #dc2626;
   --surface-search: light-dark(#f5f5f4, #181818);
   --surface-search-focus-border: light-dark(rgba(12, 10, 9, 0.12), rgba(255, 255, 255, 0.12));
@@ -51,3 +65,39 @@
 [data-theme="dark"] {
   color-scheme: dark;
 }
+
+html, body {
+  background-color: var(--color-background);
+  color: var(--text);
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@media (min-width: 1024px) {
+  .scrollbar-hide::-webkit-scrollbar {
+    display: block;
+    height: 8px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+  }
+  .scrollbar-hide::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .scrollbar-hide {
+    -ms-overflow-style: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
+  }
+}