UI cleanup, visual and keyboard navigation

web/src/styles/app.css

@@ -165,9 +165,13 @@ button {
 
 .shelf-row {
   display: flex;
-  gap: 20px;
+  gap: 12px;
   overflow-x: auto;
-  padding: 4px 4px 16px;
+  /* Room for a focused card's outline (5px + 3px offset) plus its -3px lift, on every
+     side - otherwise the row's own scroll clipping (overflow-x: auto computes
+     overflow-y to auto too, not visible) cuts the ring off on whichever card is
+     focused. */
+  padding: 14px 10px 14px;
   cursor: grab;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* old Edge */
@@ -182,7 +186,54 @@ button {
 }
 
 .shelf-row .card {
-  flex: 0 0 180px;
+  flex: 0 0 148px;
+}
+
+/* The emoji glyph used as a group icon (🎵/📖/🎙️) renders thin and low-contrast
+   sitting directly on the stage gradient. A round frosted badge behind it gives it
+   the same visual weight as the bold label text next to it. Only shown when
+   SHOW_ROW_ICONS (`lib/theme.ts`) is on. */
+.group-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: 999px;
+  font-size: 17px;
+  background: linear-gradient(160deg, oklch(97% 0.01 210 / 0.38), oklch(97% 0.01 210 / 0.12));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid oklch(97% 0.01 210 / 0.4);
+  box-shadow:
+    0 3px 10px var(--shadow),
+    inset 0 1px 0 oklch(100% 0 0 / 0.35);
+}
+
+/* A frosted panel wrapped around a shelf/list of rows so they read as a distinct
+   surface floating over the stage gradient, rather than flat text on a gradient. */
+.glass-panel {
+  background: linear-gradient(160deg, oklch(97% 0.01 210 / 0.14), oklch(97% 0.01 210 / 0.05));
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid oklch(97% 0.01 210 / 0.16);
+  border-radius: 22px;
+  box-shadow:
+    0 8px 24px var(--shadow),
+    inset 0 1px 0 oklch(100% 0 0 / 0.14);
+}
+
+/* One row inside a glass list (song/track rows). Layered on top of the row's own
+   selection-state background so it keeps its own tint while still reading as glass. */
+.list-row {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid oklch(97% 0.01 210 / 0.16);
+  box-shadow:
+    0 4px 14px var(--shadow),
+    inset 0 1px 0 oklch(100% 0 0 / 0.12);
+  transition: transform 0.1s ease;
 }
 
 .round {