rework email settings UX with guided flow and friendly errors

grouped providers by category, added per-provider key validation
with cross-provider detection, friendly delivery error messages,
retryable vs config error distinction, from-address in general
settings, and "Save settings" button to match admin conventions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -1277,11 +1277,27 @@
   border-radius: 9999px;
 }
 
+.theme-toggle-indicator {
+  position: absolute;
+  width: 33.333%;
+  height: 100%;
+  border-radius: 9999px;
+  background: var(--t-surface-raised, #fff);
+  left: 0;
+  transition: left 200ms ease;
+}
+
 .theme-toggle-btn {
   display: flex;
   padding: 0.5rem;
   cursor: pointer;
   width: 33.333%;
+  z-index: 1;
+  opacity: 0.6;
+
+  &[aria-pressed="true"] {
+    opacity: 1;
+  }
 }
 
 /* ── Setup page ── */
@@ -1290,11 +1306,26 @@
   max-width: 36rem;
   margin: 0 auto;
   padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .setup-header {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
+}
+
+.setup-footer {
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--admin-text-muted);
+}
+
+.setup-hint {
+  font-size: 0.75rem;
+  color: var(--admin-text-muted);
+  margin-top: -0.5rem;
 }
 
 .setup-title {
@@ -4206,23 +4237,120 @@
   padding-top: 1.5rem;
 }
 
+/* ── Email provider selection ── */
+
+.admin-provider-group-desc {
+  font-size: 0.75rem;
+  color: var(--admin-text-muted);
+  margin-top: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.admin-provider-other {
+  margin-top: 1rem;
+
+  & > .card-radio-grid {
+    margin-top: 0.5rem;
+  }
+}
+
+.admin-provider-other-toggle {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--admin-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+
+  &::before {
+    content: "\25B8 ";
+  }
+}
+
+.admin-provider-other[open] > .admin-provider-other-toggle::before {
+  content: "\25BE ";
+}
+
+.card-radio-recommended {
+  background: var(--admin-accent, oklch(0.65 0.2 145));
+  color: white;
+  font-weight: 500;
+}
+
+/* ── Numbered setup steps ── */
+
+.admin-setup-step {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.admin-setup-step-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.admin-setup-step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background: var(--admin-accent, oklch(0.65 0.2 145));
+  color: white;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.admin-setup-step-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  margin: 0;
+}
+
+.admin-setup-step-desc {
+  font-size: 0.8125rem;
+  color: var(--admin-text-secondary);
+  margin: 0;
+}
+
+.admin-setup-step-number-done {
+  background: oklch(0.55 0.15 145);
+}
+
+.admin-setup-step-number-error {
+  background: var(--t-status-error, oklch(0.6 0.2 25));
+}
+
+.admin-test-error {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--t-status-error, oklch(0.6 0.2 25));
+  margin: 0;
+}
+
+.admin-btn-error {
+  border-color: var(--t-status-error, oklch(0.6 0.2 25));
+  color: var(--t-status-error, oklch(0.6 0.2 25));
+}
+
 /* ── Email adapter config ── */
 
 .admin-adapter-config {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.5rem;
 
   &[hidden] {
     display: none;
   }
 }
 
-.admin-adapter-link {
-  font-weight: 400;
-}
-
 /* ── Campaign form ── */
 
 .admin-campaign-actions {