2 files changed, 28 insertions, 0 deletions
diff --git a/web/css/layout.css b/web/css/layout.css
index 7f0e19e..e52a083 100644
--- a/web/css/layout.css
+++ b/web/css/layout.css
@@ -103,6 +103,31 @@ body {
   max-width: 100%;
 }
 
+/* Breadcrumb bar */
+.breadcrumb-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+}
+.breadcrumb-bar.hidden { display: none !important; }
+.breadcrumb-bar button {
+  background: transparent;
+  border: none;
+  color: var(--accent);
+  padding: 0.15rem 0.25rem;
+  cursor: pointer;
+  font: inherit;
+  border-radius: var(--radius-sm);
+}
+.breadcrumb-bar button:hover { background: var(--accent-soft); }
+.breadcrumb-bar .breadcrumb-sep { color: var(--text-muted); user-select: none; }
+
+/* Folder card placeholder */
+.folder-card .thumb-wrap .placeholder { font-size: 3rem; }
+
 /* Media grid */
 .media-grid {
   display: grid;
diff --git a/web/css/player.css b/web/css/player.css
index 7c7b189..5628dfd 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -15,6 +15,9 @@
 .page.has-sidebar .player {
   inset: auto 0 0 var(--sidebar-width);
 }
+.page.has-sidebar .player.collapsed {
+  inset: auto auto 0 0;
+}
 .player.is-fullscreen {
   inset: 0;
   background: var(--player-stage-bg);