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/support.tsx

@@ -86,10 +86,40 @@ function Overview({ onChannel, onSection }: { onChannel: (id: string) => void; o
   const mini = supportChannels.filter((c) => ["ticket", "callback", "email", "help"].includes(c.id));
   const recent = ticketSeed.slice(0, 4);
 
+  // Derived "live" metrics so the command-center ribbon stays in sync with data.
+  const openCount = ticketSeed.filter((t) => !["resolved", "closed"].includes(t.status)).length;
+  const avgRating = (supportTeam.reduce((s, a) => s + a.rating, 0) / supportTeam.length).toFixed(1);
+  const pulse = [
+    { icon: "people", value: String(online.length), label: "Agents online", live: true },
+    { icon: "clock", value: "< 2m", label: "Avg wait time" },
+    { icon: "ticket", value: String(openCount), label: "Open tickets" },
+    { icon: "star", value: avgRating, label: "Avg CSAT rating" },
+  ];
+
   return (
-    <div className="support-bento">
+    <div className="support-ov">
+      {/* Live command-center ribbon */}
+      <div className="sup-status">
+        <span className="sup-status-l"><span className="sup-status-dot" /> All systems operational</span>
+        <span className="sup-status-r">Support · Live status</span>
+      </div>
+      <div className="sup-pulse">
+        {pulse.map((p) => (
+          <div className="sup-stat" key={p.label}>
+            <span className="sup-stat-ic"><Icon name={p.icon} size={17} /></span>
+            <div className="sup-stat-txt">
+              <b>{p.value}{p.icon === "star" && <Icon name="star" size={12} />}</b>
+              <span>{p.label}</span>
+            </div>
+            {p.live && <span className="sup-stat-live" />}
+          </div>
+        ))}
+      </div>
+
+      <div className="support-bento">
       {/* Hero — live chat */}
       <button className="bento-tile bento-chat" onClick={() => onChannel("chat")}>
+        <span className="bento-chat-sig" aria-hidden><span /><span /><span /></span>
         <div className="bento-chat-top">
           <span className="bento-chat-badge"><StatusDot status="online" /> Agents online now</span>
           <span className="bento-chat-wait"><Icon name="clock" size={13} /> Avg wait &lt; 2 min</span>
@@ -148,6 +178,7 @@ function Overview({ onChannel, onSection }: { onChannel: (id: string) => void; o
           ))}
         </div>
       </div>
+      </div>
     </div>
   );
 }