first commit

src/styles.css

@@ -0,0 +1,55 @@
+/* Navidrome-like dark theme variables */
+:root {
+  --app-bg: #0f1113;
+  --surface: #151617;
+  --muted: rgba(255,255,255,0.6);
+  --accent: #1db954;
+  --sidebar-width: 240px;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  background: var(--app-bg);
+  color: #e6eef3;
+}
+
+#root { height: 100vh }
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+  border-right: 1px solid rgba(255,255,255,0.03);
+}
+
+/* Library grid (album/artist style) */
+.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 12px; }
+.card-media { position: relative; overflow: hidden; border-radius: 6px; background: #0b0b0b; }
+.card-media img { width: 100%; height: 160px; object-fit: cover; display: block; }
+.card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms ease-in-out; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.32)); }
+.card-media:hover .card-overlay,
+.card-media:focus-within .card-overlay { opacity: 1; }
+.card-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.5); color: #fff; padding: 2px 6px; border-radius: 12px; font-size: 12px; }
+
+/* Play icon in overlay */
+.card-overlay .play-button { background: rgba(0,0,0,0.6); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
+
+/* card server badge variant */
+.card-badge.server-badge { left: auto; right: 8px; background: rgba(255,255,255,0.04); }
+
+/* Touch-friendly helpers and mobile layout */
+.touch-target { min-height: 48px; min-width: 48px; padding: 8px 12px; }
+
+@media (max-width:600px) {
+  .app-content { padding: 4px !important; }
+  .touch-target { min-height: 56px; padding: 10px 16px; font-size: 1rem; }
+  .library-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; padding: 8px 0; }
+  .card-media img { height: 140px; object-fit: cover; }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .card-overlay { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.38)); }
+  .card-overlay .play-button { width: 52px; height: 52px; }
+}
+