fix: Polish notification UI - mobile, colors, and layout

## ✅ All UI Improvements

### 1. Contextual Header
- Added contextual header to Notifications page
- Consistent with Payments and Shipping pages
- Saves vertical space

### 2. Mobile View Improvements
**Channels Page:**
- Responsive flex-col on mobile, flex-row on desktop
- Full-width buttons on mobile
- Better spacing and alignment
- Push subscription toggle in bordered container on mobile

**Templates Accordion:**
- Better mobile layout
- Badges wrap properly
- Icon and title alignment improved
- Responsive padding

### 3. Active State Colors
- **Green color for active channels** (consistent with Payments)
- `bg-green-500/20 text-green-600` for active
- `bg-muted text-muted-foreground` for inactive
- Applied to:
  - Events page channel icons
  - Channels page channel icons
  - Active badges

### 4. Badge Layout
- Badges moved under title on mobile
- Better visual hierarchy
- Title → Badges → Description flow
- Proper spacing between elements

### 5. Template Variables Card Removed
- Variables already in template editor modal
- Click-to-insert functionality
- No need for separate reference card
- Cleaner page layout

### 6. Accordion Polish
- Better padding and spacing
- Responsive layout
- Icon stays visible
- Badges wrap on small screens

---

**Next: Email toggle and push settings backend** 🎯

admin-spa/src/routes/Settings/Notifications.tsx

@@ -13,6 +13,7 @@ export default function NotificationsSettings() {
     <SettingsLayout
       title={__('Notifications')}
       description={__('Manage notification events, channels, and templates')}
+      action={<div />} // Empty action to trigger contextual header
     >
       <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
         <TabsList className="grid w-full grid-cols-3">