feat: card-based Sample Library layout with grouping

Redesigned WAV Browser as a structured Sample Library with card layout:
- WAVs grouped by library (ISO name) and program (volume name)
- Library cards with collapsible headers showing program/sample counts
- Program sections within each library
- Sample cards in a compact grid with play-on-click

Updated playWav to show a clean sample name in the player bar,
hide the player when playback ends, and use sample-card selectors
for active-state highlighting.

Clean display names (underscores → spaces, stripped .wav extensions)

web/ui/style.css

@@ -272,42 +272,130 @@ h2 {
   min-width: 40px;
 }
 
-.wav-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 8px;
+.no-files {
+  color: var(--text2);
+  font-size: 13px;
+  padding: 12px 0;
 }
 
-.wav-item {
+.wav-summary {
+  font-size: 13px;
+  color: var(--text2);
+  margin-top: 12px;
+  margin-bottom: 12px;
+  min-height: 18px;
+}
+
+/* Library cards */
+.wav-library {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.library-card {
+  background: var(--bg2);
+  border: 1px solid var(--bg3);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.library-header {
+  padding: 14px 18px;
+  cursor: pointer;
+  user-select: none;
+  background: var(--bg);
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s;
+}
+.library-header:hover {
+  border-color: var(--accent);
+}
+.library-header h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.library-header .lib-meta {
+  font-size: 12px;
+  color: var(--text2);
+  margin-top: 4px;
+}
+
+.library-programs {
+  padding: 10px 18px 16px;
+}
+
+/* Program cards */
+.program-card {
+  margin-top: 14px;
+}
+.program-card:first-child {
+  margin-top: 0;
+}
+
+.program-header {
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+.program-header h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+  margin: 0;
+  text-transform: none;
+  letter-spacing: 0;
+  display: inline;
+}
+.program-header .prog-meta {
+  font-size: 11px;
+  color: var(--text2);
+  margin-left: 8px;
+}
+
+.program-samples {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 6px;
+}
+
+/* Sample cards */
+.sample-card {
   background: var(--bg);
   border: 1px solid var(--bg3);
   border-radius: var(--radius);
-  padding: 10px 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  padding: 8px 10px;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 64px;
+  transition: border-color 0.15s, background 0.15s;
 }
-.wav-item:hover {
+.sample-card:hover {
   border-color: var(--accent);
 }
-.wav-item.playing {
+.sample-card.playing {
   border-color: var(--green);
   background: rgba(78, 204, 163, 0.1);
 }
-.wav-item .wav-name {
-  flex: 1;
-  font-size: 13px;
+.sample-card .sample-name {
+  font-size: 11px;
+  color: var(--text);
+  text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
 }
-.wav-item .wav-play-btn {
-  background: var(--accent2);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 10px;
-  font-size: 11px;
-  cursor: pointer;
+.sample-card .sample-play-icon {
+  font-size: 14px;
+  color: var(--accent2);
+  line-height: 1;
 }