Error Feedback Service + friendly error handling across all pages

- Error Feedback Service: POST /api/feedback saves to JSONL, GET with admin token
- ErrorFeedback component: warm amber tones, friendly messages, 'Report Issue' button
- Replaced ALL red-themed error displays across 15+ pages with ErrorFeedback
- Kind classification: network, auth, location, upgrade, default messages
- QA test suite v2: 8-layer testing (system, API, render, scenario, edge, mobile, perf, security)
- Browser-based visual QA with Playwright (Layer 9)

src/app/refer/page.tsx

@@ -13,6 +13,7 @@ import {
   TrendingUp,
   Crown,
 } from "lucide-react";
+import ErrorFeedback from "@/components/ErrorFeedback";
 
 interface ReferralStats {
   totalReferrals: number;
@@ -138,34 +139,19 @@ export default function ReferPage() {
 
       <div className="px-4 space-y-5 animate-fade-in">
         {/* Toast Notification */}
-        {toast && (
-          <div
-            className={`flex items-center gap-2 p-3 rounded-xl text-sm ${
-              toast.type === "success"
-                ? "bg-emerald-900/20 border border-emerald-800/40 text-emerald-400"
-                : "bg-red-900/20 border border-red-800/40 text-red-400"
-            }`}
-          >
-            {toast.type === "success" ? (
-              <Check size={16} />
-            ) : (
-              <ExternalLink size={16} />
-            )}
+        {toast && toast.type === "success" && (
+          <div className="flex items-center gap-2 p-3 rounded-xl text-sm bg-emerald-900/20 border border-emerald-800/40 text-emerald-400">
+            <Check size={16} />
             {toast.text}
           </div>
         )}
+        {toast && toast.type === "error" && (
+          <ErrorFeedback error={toast.text} kind="default" onRetry={() => setToast(null)} context="referral" />
+        )}
 
         {/* Error State */}
         {error && !dataLoading && (
-          <div className="bg-red-900/20 border border-red-800/40 rounded-2xl p-5 text-center">
-            <p className="text-sm text-red-400 mb-3">{error}</p>
-            <button
-              onClick={fetchStats}
-              className="text-sm text-[#D4AF37] underline underline-offset-2"
-            >
-              Try again
-            </button>
-          </div>
+          <ErrorFeedback error={error} kind="network" onRetry={fetchStats} context="referral stats" />
         )}
 
         {/* Data Loading */}