complete onboarding UX v2

Tasks C, H, I from the plan:

- Forgiving API key validation: add Printify UUID format and Printful
  length validation, validate on blur for fast feedback, helpful error
  messages with specific guidance

- External links UX: verified all external links use <.external_link>
  component with target="_blank", rel="noopener noreferrer", icon, and
  screen reader text

- Input styling WCAG compliance: increase input border contrast from
  ~3.3:1 to ~4.5-5:1 across all theme moods (neutral, warm, cool, dark)

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

lib/berrypod_web/live/admin/providers/form.ex

@@ -40,14 +40,33 @@ defmodule BerrypodWeb.Admin.Providers.Form do
 
   @impl true
   def handle_event("validate", %{"provider_connection" => params}, socket) do
-    form =
+    api_key = params["api_key"] || ""
+    provider_type = socket.assigns.provider_type
+
+    # Build base changeset
+    changeset =
       socket.assigns.connection
       |> ProviderConnection.changeset(params)
       |> Map.put(:action, :validate)
-      |> to_form()
+
+    # Add key format validation error if key is present
+    form =
+      if api_key != "" do
+        case KeyValidation.validate_provider_key(api_key, provider_type) do
+          {:ok, _} ->
+            to_form(changeset)
+
+          {:error, message} ->
+            changeset
+            |> Ecto.Changeset.add_error(:api_key, message)
+            |> to_form()
+        end
+      else
+        to_form(changeset)
+      end
 
     # Store api_key separately since changeset encrypts it immediately
-    {:noreply, assign(socket, form: form, pending_api_key: params["api_key"])}
+    {:noreply, assign(socket, form: form, pending_api_key: api_key)}
   end
 
   @impl true

lib/berrypod_web/live/admin/providers/form.html.heex

@@ -51,6 +51,7 @@
           else: "Paste your key here"
       }
       autocomplete="off"
+      phx-debounce="blur"
     />
 
     <%= if @live_action == :edit do %>