v3: code quality and visual consistency pass (refactored all forms across the app), fixed filename-related upload bug

src/App.css

@@ -235,30 +235,31 @@
 }
 
 /* ── Forms ── */
-.auth-form {
+
+/* Unified form system: `.form` container + `.form-field` / `.form-label` /
+   `.form-hint` building blocks, shared by every form. */
+.form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.dump-form .form-group,
-.auth-form .form-group {
+.form-field {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
 }
 
-.dump-form label,
-.auth-form label {
+.form-label {
   font-size: 0.85rem;
   font-weight: 600;
   opacity: 0.6;
 }
 
-.dump-form input,
-.dump-form textarea,
-.auth-form input,
-.auth-form textarea {
+.form input,
+.form textarea {
+  width: 100%;
+  box-sizing: border-box;
   padding: 0.65rem 1rem;
   border-radius: 8px;
   border: 2px solid var(--color-border);
@@ -274,15 +275,21 @@
   outline: none;
 }
 
-.dump-form textarea,
-.auth-form textarea {
+/* A submit/secondary button placed as a direct child of `.form` (the auth
+   forms, which have no action row) spans the full width like the inputs.
+   Buttons inside `.form-actions` keep their intrinsic width. */
+.form > .btn-primary,
+.form > .btn-secondary,
+.form > .btn-danger {
+  width: 100%;
+}
+
+.form textarea {
   resize: vertical;
 }
 
-.dump-form input:hover,
-.dump-form textarea:hover,
-.auth-form input:hover,
-.auth-form textarea:hover {
+.form input:hover,
+.form textarea:hover {
   border-color: color-mix(
     in srgb,
     var(--color-accent) 45%,
@@ -290,10 +297,8 @@
   );
 }
 
-.dump-form input:focus,
-.dump-form textarea:focus,
-.auth-form input:focus,
-.auth-form textarea:focus {
+.form input:focus,
+.form textarea:focus {
   border-color: var(--color-accent);
   background-color: color-mix(
     in srgb,
@@ -304,13 +309,27 @@
     color-mix(in srgb, var(--color-accent) 18%, transparent);
 }
 
-.dump-form input:disabled,
-.dump-form textarea:disabled,
-.auth-form input:disabled,
-.auth-form textarea:disabled {
+.form input:disabled,
+.form textarea:disabled {
   opacity: 0.6;
 }
 
+.form-hint {
+  font-size: 0.8rem;
+  opacity: 0.7;
+  margin-top: 0.1rem;
+}
+
+.form-hint--error {
+  color: var(--color-error, #c0392b);
+  opacity: 1;
+}
+
+.form-success {
+  color: var(--color-success, green);
+  margin: 0;
+}
+
 .dump-create-title-row {
   display: flex;
   align-items: center;
@@ -2308,16 +2327,6 @@ body.has-player .fab-new {
   opacity: 0.85;
 }
 
-.auth-field-hint {
-  display: block;
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-}
-
-.auth-field-hint--error {
-  color: var(--color-error, #e53e3e);
-}
-
 /* ── Form pages (DumpCreate / DumpEdit) ── */
 @keyframes page-enter {
   from {
@@ -2348,7 +2357,9 @@ body.has-player .fab-new {
   .form-page--two-col .dump-edit-preview {
     border-radius: 0 0 0 12px;
   }
-  .form-page--two-col .dump-form {
+  /* Higher specificity than the generic `.form-page .form` below so the
+     form's bottom-left stays square where it meets the preview. */
+  .form-page.form-page--two-col .form {
     border-radius: 0 0 12px 0;
   }
 }
@@ -2395,10 +2406,7 @@ body.has-player .fab-new {
   gap: 0.75rem;
 }
 
-.dump-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+.form-page .form {
   background: var(--color-surface);
   border-radius: 0 0 12px 12px;
   padding: 1.25rem;
@@ -2421,7 +2429,13 @@ body.has-player .fab-new {
   margin-left: auto;
 }
 
+/* Subtle text action. Resets the global <button> chrome so it looks the same
+   whether rendered as a <button> (modal/page forms) or a <Link> (DumpEdit). */
 .form-cancel {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
   font-size: 0.9rem;
   color: var(--color-text);
   opacity: 0.6;
@@ -3189,30 +3203,6 @@ body.has-player .fab-new {
   background: color-mix(in srgb, var(--color-accent) 8%, transparent);
 }
 
-.modal-new-playlist-form {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.modal-new-playlist-form input,
-.modal-new-playlist-form textarea {
-  padding: 0.6rem 0.9rem;
-  border-radius: 8px;
-  border: 2px solid var(--color-border-subtle);
-  background: var(--color-bg);
-  color: var(--color-text);
-  font-size: 0.95rem;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-  resize: vertical;
-}
-
-.modal-new-playlist-form input:focus,
-.modal-new-playlist-form textarea:focus {
-  border-color: var(--color-accent);
-}
 
 /* ── Playlist detail page ── */
 .playlist-detail-header {
@@ -3341,6 +3331,12 @@ body.has-player .fab-new {
   font-weight: 700;
 }
 
+/* Inline edit form: stack the fields with a little more breathing room than
+   the tight display layout, and let the action row sit at the bottom. */
+.playlist-edit-content {
+  gap: 0.7rem;
+}
+
 .playlist-edit-input:focus,
 .playlist-edit-textarea:focus {
   border-color: var(--color-accent);