adds local play

public/styles.css

@@ -104,7 +104,8 @@ button:disabled {
 .secondary-button,
 .primary-button,
 .icon-button,
-.remove-favorite {
+.remove-favorite,
+.local-video-item {
   border: 1px solid var(--line);
   border-radius: 999px;
   color: var(--fg);
@@ -472,6 +473,95 @@ audio {
   line-height: 1;
 }
 
+.local-search {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.9rem 0.95rem;
+  color: var(--fg);
+  background: rgba(255, 255, 255, 0.08);
+  outline: none;
+}
+
+.local-search::placeholder {
+  color: rgba(246, 241, 232, 0.48);
+}
+
+.local-search:focus {
+  border-color: rgba(232, 168, 79, 0.7);
+}
+
+.local-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-height: 2.7rem;
+}
+
+.local-back {
+  flex: 0 0 auto;
+  min-height: 2.45rem;
+  padding: 0.55rem 0.9rem;
+  font-weight: 800;
+}
+
+.local-path {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--soft);
+  font-size: 0.86rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.local-list {
+  display: grid;
+  gap: 0.45rem;
+  max-height: min(58vh, 32rem);
+  overflow: auto;
+}
+
+.local-video-item {
+  display: grid;
+  width: 100%;
+  gap: 0.22rem;
+  min-height: 4.35rem;
+  padding: 0.75rem 0.85rem;
+  border-radius: 8px;
+  text-align: left;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.local-folder-item {
+  border-color: rgba(232, 168, 79, 0.34);
+}
+
+.local-video-item:hover,
+.local-video-item:focus {
+  border-color: rgba(246, 241, 232, 0.3);
+  background: rgba(255, 255, 255, 0.10);
+  outline: none;
+}
+
+.local-video-title,
+.local-video-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.local-video-title {
+  font-weight: 800;
+}
+
+.local-video-meta {
+  color: rgba(246, 241, 232, 0.56);
+  font-size: 0.84rem;
+}
+
 .favorites-editor-list {
   display: grid;
   gap: 0.55rem;
@@ -665,6 +755,10 @@ audio {
     width: 100%;
   }
 
+  .local-back {
+    width: auto;
+  }
+
   .modal-actions {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));