Use local time

client/src/assets/main.css

@@ -1,4 +1,41 @@
 @import './base.css';
+@import '@ztimson/css-utils/dist/css-utils.min.css';
+
+::-webkit-scrollbar { height: 4px; width: 4px; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+:root {
+  --bg:         #ffffff;
+  --surface:    #d0dae1;
+  --border:     #e2e8f0;
+  --text:       #0f172a;
+  --text-muted: #64748b;
+  --hover:      #f1f5f9;
+  --accent:     #3b82f6;
+}
+
+.dark {
+  --bg:         #0a0a0a;
+  --surface:    #111111;
+  --border:     #222222;
+  --text:       #f1f5f9;
+  --text-muted: #64748b;
+  --hover:      #1a1a1a;
+  --accent:     #3b82f6;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+.fade-enter-from,  .fade-leave-to      { opacity: 0; }
 
 #app {
   width: 100%;
@@ -27,3 +64,25 @@ a,
     place-items: center;
   }
 }
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+
+  .card-title {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    padding: 10px 12px 6px;
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--border);
+    margin: 6px 0;
+  }
+}