Redesign Team, Support, AI & Rules; solid-orange brand system

- Team Management: crew hero, member gallery + list, role rings, invites
- Support Center: command-center Overview (live status, pulse ribbon, signal)
- AI Assistant: animated orb rings + textured stage
- Rules: rulebook cards (watermark, uniform orange), 3-up responsive grid
- Brand: --grad-brand now solid rgba(253,169,19,.92), white text/icons on
  orange, no orange gradients; dark surfaces (--card-grad/--panel-2) #060608
- Segmented tabs get an on-brand orange active state

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

src/components/dashboard/rules.tsx

@@ -2,6 +2,9 @@
 
 // ============================================================
 // Rules Checklist — the 1–13 business rules in one place.
+// A single filter bar + a uniform (brand-orange) card grid:
+// each rule card has a ghost watermark number, an icon and an
+// "enforced" footer. No per-category colours.
 // (house 181 · OTP to registered mobile · KYC two-docs ·
 //  password policy · ticket lifecycle · …)
 // ============================================================
@@ -10,6 +13,12 @@ import { useMemo, useState } from "react";
 import { rules } from "./account-data";
 import { Icon, PageHead, Pill, Segmented } from "./ui";
 
+// Each rule category maps to a glyph so cards read at a glance.
+const TAG_ICON: Record<string, string> = {
+  Profile: "user", Security: "shield", KYC: "verify", Support: "chat",
+  Notifications: "bell", Privacy: "privacy",
+};
+
 export function Rules() {
   const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
   const [tag, setTag] = useState("All");
@@ -29,14 +38,16 @@ export function Rules() {
 
       <div className="rules-grid view-body">
         {list.map((r) => (
-          <div className="card rule-card" key={r.n} style={{ ["--accent" as string]: r.tagColor }}>
+          <article className="card rule-card" key={r.n}>
+            <span className="rule-watermark" aria-hidden>{String(r.n).padStart(2, "0")}</span>
             <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>
+              <span className="rule-ic"><Icon name={TAG_ICON[r.tag] ?? "check-circle"} size={18} /></span>
+              <Pill tone="muted">{r.tag}</Pill>
             </div>
-            <div className="rule-title"><Icon name="check-circle" size={16} /> {r.title}</div>
+            <div className="rule-title">{r.title}</div>
             <p className="rule-detail">{r.detail}</p>
-          </div>
+            <div className="rule-foot"><Icon name="shield-check" size={13} /> Enforced · Rule {r.n}</div>
+          </article>
         ))}
       </div>
     </div>