Fix UI serving: replace runtime CDN Tailwind with build-time CSS

.gitignore

@@ -16,6 +16,9 @@ build/
 server/.env
 
 # Database (SQLite)
+data/*.db
+data/*.db-shm
+data/*.db-wal
 server/data/*.db
 server/data/*.db-shm
 server/data/*.db-wal

index.css

@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --breakpoint-mobile: 768px;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #d4d4d8;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #a1a1aa;
+}
+
+/* Dark mode scrollbar */
+.dark ::-webkit-scrollbar-thumb {
+  background: #3f3f46;
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #52525b;
+}
+
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.gradient-text {
+  background: linear-gradient(to right, #f472b6, #a78bfa, #60a5fa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes music-bars {
+  0% { height: 20%; opacity: 0.5; }
+  50% { height: 100%; opacity: 1; }
+  100% { height: 20%; opacity: 0.5; }
+}
+
+.music-bar-anim {
+  animation: music-bars 1s ease-in-out infinite;
+}
+
+.mobile-only {
+  display: none;
+}
+.desktop-only {
+  display: block;
+}
+@media (max-width: 767px) {
+  .mobile-only {
+    display: block;
+  }
+  .desktop-only {
+    display: none;
+  }
+  .mobile-only-flex {
+    display: flex;
+  }
+  .mobile-only-inline {
+    display: inline;
+  }
+  .mobile-only-inline-flex {
+    display: inline-flex;
+  }
+}
+
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes slide-out-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+@keyframes slide-out-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.drawer-slide-in-left {
+  animation: slide-in-left 0.3s ease-out forwards;
+}
+.drawer-slide-out-left {
+  animation: slide-out-left 0.3s ease-in forwards;
+}
+.drawer-slide-in-right {
+  animation: slide-in-right 0.3s ease-out forwards;
+}
+.drawer-slide-out-right {
+  animation: slide-out-right 0.3s ease-in forwards;
+}
+.drawer-backdrop-in {
+  animation: fade-in 0.3s ease-out forwards;
+}
+.drawer-backdrop-out {
+  animation: fade-out 0.3s ease-in forwards;
+}
+
+.backdrop-blur-mobile {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.backdrop-blur-mobile-lg {
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.safe-area-inset-top {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+.safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.safe-area-inset-left {
+  padding-left: env(safe-area-inset-left, 0px);
+}
+.safe-area-inset-right {
+  padding-right: env(safe-area-inset-right, 0px);
+}
+.safe-area-inset-x {
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+.safe-area-inset-y {
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.safe-area-inset-all {
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-left: env(safe-area-inset-left, 0px);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+
+.touch-none {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: none;
+}
+.touch-pan-x {
+  touch-action: pan-x;
+}
+.touch-pan-y {
+  touch-action: pan-y;
+}
+.touch-manipulation {
+  touch-action: manipulation;
+}
+.tap-highlight-none {
+  -webkit-tap-highlight-color: transparent;
+}
+.scroll-touch {
+  -webkit-overflow-scrolling: touch;
+}
+.overscroll-none {
+  overscroll-behavior: none;
+}
+.overscroll-contain {
+  overscroll-behavior: contain;
+}