v3: error cards across the app, friendly network errors, code quality pass

src/App.css

@@ -1205,6 +1205,60 @@ body.has-player .fab-new {
   color: var(--color-danger);
 }
 
+/* ── ErrorCard ── */
+.error-card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.error-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+  background: var(--color-danger-bg);
+  color: var(--color-on-accent);
+  padding: 0.7rem 1rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
+.error-card-icon {
+  flex-shrink: 0;
+  line-height: 1.45;
+}
+
+.error-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.error-card-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.error-card-message {
+  margin: 0;
+  line-height: 1.45;
+  opacity: 0.85;
+}
+
+.error-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.page-error-wrap {
+  margin: 2rem auto;
+  max-width: 480px;
+  width: 100%;
+}
+
 .form-error {
   color: var(--color-danger);
   margin: 0;
@@ -1240,27 +1294,6 @@ body.has-player .fab-new {
   padding: 4rem 1rem;
 }
 
-.page-error {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 2rem 0;
-}
-
-.page-error-actions {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.error-banner {
-  background: var(--color-danger-bg);
-  color: var(--color-on-accent);
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  font-size: 0.9rem;
-}
-
 /* ── Shared header ── */
 .app-header {
   display: flex;
@@ -1552,6 +1585,12 @@ body.has-player .fab-new {
   box-shadow: none;
 }
 
+.btn-primary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .btn-secondary {
   background: none;
   border: 1px solid var(--color-border);
@@ -1635,11 +1674,6 @@ body.has-player .fab-new {
   padding: 3rem 1rem;
 }
 
-.index-status--error {
-  color: var(--color-danger);
-  opacity: 1;
-}
-
 /* ── Below-header strip (presence + sort on narrow viewports) ── */
 .index-below-header {
   display: flex;
@@ -1695,6 +1729,14 @@ body.has-player .fab-new {
   }
 }
 
+.index-page .error-card-wrap {
+  max-width: 860px;
+  width: 100%;
+  padding: 1rem 1.25rem 0;
+  box-sizing: border-box;
+  align-self: center;
+}
+
 .dump-feed {
   list-style: none;
   margin: 0;
@@ -2580,12 +2622,6 @@ body.has-player .fab-new {
   cursor: default;
 }
 
-.comment-form-error {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-danger);
-}
-
 .comment-node-inner--deleted {
   opacity: 0.35;
 }