Replace dashboard with Profile, Support Center & Rules modules

- Remove old dashboard stats/charts content; keep sidebar + header shell
  which now routes between Profile, Support Center and Rules views.
- Profile: hero card + 6 tabs (Personal Info with verify-to-reveal +
  editable contacts via OTP, KYC two-doc rule + completion %, Security
  password policy + 2FA, Notifications matrix + contact windows, Privacy
  consents, Devices + activity timeline).
- Support Center: 5 channel cards, support team, Message Center with
  typing, New Ticket category->department routing + attachment rules,
  My Tickets + status-timeline modal, Live Chat handshake, Callback/Email
  modals, Help Center search + accordion.
- Rules: the 1-13 business-rules checklist.
- Shared design system (Icon, Avatar, PageHead, Pill, Toggle, OtpField,
  Modal, Toast, Field, Tabs) + full mock data in account-data.ts.
- Premium dark visual pass: brand gradients, depth, glow accents, pill tabs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/dashboard/rules.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+// ============================================================
+// Rules Checklist — the 1–13 business rules in one place.
+// (plot 181 · OTP to registered mobile · KYC two-docs ·
+//  password policy · ticket lifecycle · …)
+// ============================================================
+
+import { useMemo, useState } from "react";
+import { rules } from "./account-data";
+import { Icon, PageHead, Pill, Segmented } from "./ui";
+
+export function Rules() {
+  const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
+  const [tag, setTag] = useState("All");
+  const list = tag === "All" ? rules : rules.filter((r) => r.tag === tag);
+
+  return (
+    <div className="view">
+      <PageHead
+        eyebrow="Reference"
+        title="Rules Checklist"
+        subtitle="The 13 business rules that govern Profile & Support — one source of truth."
+        icon="check-circle"
+        actions={<Pill tone="blue">{rules.length} rules</Pill>}
+      />
+
+      <Segmented value={tag} onChange={setTag} options={tags.map((t) => ({ value: t, label: t }))} />
+
+      <div className="rules-grid view-body">
+        {list.map((r) => (
+          <div className="card rule-card" key={r.n} style={{ ["--accent" as string]: r.tagColor }}>
+            <div className="rule-top">
+              <span className="rule-n">{String(r.n).padStart(2, "0")}</span>
+              <Pill tone="custom" style={{ color: r.tagColor, background: `color-mix(in srgb, ${r.tagColor} 16%, transparent)` }}>{r.tag}</Pill>
+            </div>
+            <div className="rule-title"><Icon name="check-circle" size={16} /> {r.title}</div>
+            <p className="rule-detail">{r.detail}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}