ok

public/styles.css

@@ -332,10 +332,61 @@ input[type="range"] {
 
 .library-pane {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   border-bottom: 0;
 }
 
+.library-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.library-tab {
+  flex: 1;
+  min-height: 36px;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.library-tab.active {
+  color: var(--accent);
+  box-shadow: inset 0 -2px var(--accent);
+}
+
+.library-folders {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  min-height: 0;
+}
+
+.library-saved {
+  display: grid;
+  min-height: 0;
+}
+
+.library-folders[hidden],
+.library-saved[hidden] {
+  display: none;
+}
+
+.library-saved > .library-list,
+.library-saved > .empty-state {
+  grid-area: 1 / 1;
+}
+
+.library-entry.selected {
+  background: var(--panel-raised);
+}
+
+.entry-details {
+  display: block;
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
 .panel-header {
   min-height: 55px;
   padding: 8px 10px;
@@ -601,6 +652,8 @@ input[type="range"] {
 
 .playlist-toolbar {
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
   min-height: 53px;
   padding: 8px 12px;
   border-bottom: 1px solid var(--line-soft);
@@ -611,6 +664,12 @@ input[type="range"] {
   gap: 4px;
 }
 
+.playlist-toolbar > .playlist-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
 .playlist-toolbar strong {
   font-size: 14px;
 }
@@ -739,7 +798,7 @@ input[type="range"] {
   align-self: center;
 }
 
-.library-pane > .empty-state {
+.library-folders > .empty-state {
   grid-row: 3;
   z-index: 2;
 }