Add YouTube playback and queue flow

public/styles.css

@@ -116,6 +116,11 @@ button:disabled {
   color: #070707;
 }
 
+.url-form .secondary-submit {
+  color: var(--fg);
+  background: rgba(255, 255, 255, 0.10);
+}
+
 .library-panel {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -423,7 +428,7 @@ audio {
 
 .modal-panel {
   display: grid;
-  width: min(860px, 100%);
+  width: min(620px, 100%);
   max-height: min(760px, calc(100vh - 2rem));
   overflow: auto;
   gap: 0.85rem;
@@ -456,29 +461,85 @@ audio {
 .favorites-editor-list {
   display: grid;
   gap: 0.55rem;
+  max-height: min(52vh, 28rem);
+  overflow: auto;
 }
 
-.favorite-editor-row {
+.favorites-manager,
+.favorite-wizard {
   display: grid;
-  grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.6fr) auto;
-  gap: 0.55rem;
+  gap: 0.75rem;
 }
 
-.favorite-editor-row input {
+.favorite-manager-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 4rem;
+  padding: 0.55rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.favorite-summary {
+  min-width: 0;
+}
+
+.favorite-title,
+.favorite-url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.favorite-title {
+  color: var(--fg);
+  font-weight: 800;
+}
+
+.favorite-url {
+  margin-top: 0.22rem;
+  color: rgba(246, 241, 232, 0.52);
+  font-size: 0.84rem;
+}
+
+.favorite-action {
+  min-width: 5.2rem;
+}
+
+.wizard-step {
+  color: var(--soft);
+  font-size: 0.86rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.wizard-field {
+  display: grid;
+  gap: 0.45rem;
+  color: var(--soft);
+  font-size: 0.86rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.wizard-field input {
   min-width: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
-  padding: 0.72rem 0.8rem;
+  padding: 0.9rem 0.95rem;
   color: var(--fg);
+  font-size: 1rem;
+  font-weight: 500;
+  text-transform: none;
   background: rgba(255, 255, 255, 0.08);
   outline: none;
 }
 
-.favorite-editor-row input::placeholder {
-  color: rgba(246, 241, 232, 0.42);
-}
-
-.favorite-editor-row input:focus {
+.wizard-field input:focus {
   border-color: rgba(232, 168, 79, 0.7);
 }
 
@@ -540,10 +601,14 @@ audio {
     max-height: 28vh;
   }
 
-  .favorite-editor-row {
+  .favorite-manager-row {
     grid-template-columns: 1fr;
   }
 
+  .favorite-action {
+    width: 100%;
+  }
+
   .remove-favorite,
   .secondary-button,
   .primary-button {
@@ -552,7 +617,7 @@ audio {
 
   .modal-actions {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
   }
 
   .controls {