diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index df84659..ff50fae 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -15,7 +15,6 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
-import { SettingsModalProvider } from '@/lib/settings-modal-context'
 import { UnifiedSettingsProvider, useUnifiedSettings } from '@/lib/unified-settings-context'
 import UnifiedSettingsModal from '@/components/settings/unified/UnifiedSettingsModal'
 
@@ -164,10 +163,8 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
 
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
   return (
-    <SettingsModalProvider>
-      <UnifiedSettingsProvider>
-        <LayoutInner>{children}</LayoutInner>
-      </UnifiedSettingsProvider>
-    </SettingsModalProvider>
+    <UnifiedSettingsProvider>
+      <LayoutInner>{children}</LayoutInner>
+    </UnifiedSettingsProvider>
   )
 }
diff --git a/app/notifications/page.tsx b/app/notifications/page.tsx
index eb31ee3..417fc0c 100644
--- a/app/notifications/page.tsx
+++ b/app/notifications/page.tsx
@@ -16,6 +16,7 @@ import {
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { NotificationsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import { toast } from '@ciphera-net/ui'
 
@@ -23,6 +24,7 @@ const PAGE_SIZE = 50
 
 export default function NotificationsPage() {
   const { user } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
   const [loading, setLoading] = useState(true)
@@ -125,9 +127,9 @@ export default function NotificationsPage() {
         <h1 className="text-2xl font-bold text-white mb-2">Notifications</h1>
         <p className="text-sm text-neutral-400 mb-6">
           Manage which notifications you receive in{' '}
-          <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+          <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
             Organization Settings → Notifications
-          </Link>
+          </button>
         </p>
 
         {showSkeleton ? (
@@ -141,9 +143,9 @@ export default function NotificationsPage() {
             <p>No notifications yet</p>
             <p className="text-sm mt-2">
               Manage which notifications you receive in{' '}
-              <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+              <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
                 Organization Settings → Notifications
-              </Link>
+              </button>
             </p>
           </div>
         ) : (
diff --git a/app/org-settings/page.tsx b/app/org-settings/page.tsx
index 2d7fdab..f9a8d6f 100644
--- a/app/org-settings/page.tsx
+++ b/app/org-settings/page.tsx
@@ -1,30 +1,43 @@
-import { Suspense } from 'react'
-import OrganizationSettings from '@/components/settings/OrganizationSettings'
-import { SettingsFormSkeleton } from '@/components/skeletons'
+'use client'
 
-export const metadata = {
-  title: 'Organization Settings - Pulse',
-  description: 'Manage your organization settings',
-}
+import { Suspense, useEffect } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { Spinner } from '@ciphera-net/ui'
+
+function OrgSettingsInner() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { openUnifiedSettings } = useUnifiedSettings()
+
+  useEffect(() => {
+    const tab = searchParams.get('tab')
+
+    const tabMap: Record<string, string> = {
+      general: 'general',
+      members: 'members',
+      billing: 'billing',
+      notifications: 'notifications',
+      audit: 'audit',
+    }
+
+    const mappedTab = tab ? tabMap[tab] || 'general' : 'general'
+    // Go back to wherever the user came from (not always /)
+    router.back()
+    setTimeout(() => openUnifiedSettings({ context: 'workspace', tab: mappedTab }), 200)
+  }, [searchParams, router, openUnifiedSettings])
 
-export default function OrgSettingsPage() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
-      <div>
-        <Suspense fallback={
-          <div className="space-y-8">
-            <div>
-              <div className="h-8 w-56 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
-              <div className="h-4 w-80 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-            </div>
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8">
-              <SettingsFormSkeleton />
-            </div>
-          </div>
-        }>
-          <OrganizationSettings />
-        </Suspense>
-      </div>
+    <div className="flex items-center justify-center py-24">
+      <Spinner className="w-6 h-6 text-neutral-500" />
     </div>
   )
 }
+
+export default function OrgSettingsRedirect() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center py-24"><Spinner className="w-6 h-6 text-neutral-500" /></div>}>
+      <OrgSettingsInner />
+    </Suspense>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index fda9c5f..22c4b7c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,11 +24,13 @@ import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
 import { formatDate } from '@/lib/utils/formatDate'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
   const { user, loading: authLoading } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [sitesLoading, setSitesLoading] = useState(true)
   const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
@@ -355,9 +357,9 @@ export default function HomePage() {
               )}
               <div className="mt-2 flex gap-2">
                 {subscription.has_payment_method ? (
-                  <Link href="/org-settings?tab=billing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
+                  <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'billing' })} className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded cursor-pointer">
                     Manage billing
-                  </Link>
+                  </button>
                 ) : (
                   <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
                     Upgrade
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 594c431..25e2e68 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import * as Flags from 'country-flag-icons/react/3x2'
 
 const DottedMap = dynamic(() => import('@/components/dashboard/DottedMap'), { ssr: false })
@@ -115,6 +115,8 @@ export default function CDNPage() {
   const [period, setPeriod] = useState('7')
   const [dateRange, setDateRange] = useState(() => getDateRange(7))
 
+  const { openUnifiedSettings } = useUnifiedSettings()
+
   // Data fetching
   const { data: bunnyStatus } = useBunnyStatus(siteId)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
@@ -183,13 +185,13 @@ export default function CDNPage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 1d34768..9b23553 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -25,7 +25,7 @@ import dynamic from 'next/dynamic'
 import { DashboardSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import FilterBar from '@/components/dashboard/FilterBar'
 import AddFilterDropdown, { type FilterSuggestion, type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
-import Chart from '@/components/dashboard/Chart'
+const Chart = dynamic(() => import('@/components/dashboard/Chart'), { ssr: false })
 import ContentStats from '@/components/dashboard/ContentStats'
 import TopReferrers from '@/components/dashboard/TopReferrers'
 import Locations from '@/components/dashboard/Locations'
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index bc2a444..4f1dd5f 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { CaretDown, CaretUp, MagnifyingGlass, ArrowSquareOut } from '@phosphor-icons/react'
@@ -36,6 +36,7 @@ const PAGE_SIZE = 50
 export default function SearchConsolePage() {
   const params = useParams()
   const siteId = params.id as string
+  const { openUnifiedSettings } = useUnifiedSettings()
 
   // Date range
   const [period, setPeriod] = useState('28')
@@ -172,13 +173,13 @@ export default function SearchConsolePage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             See how your site performs in Google Search. View top queries, pages, click-through rates, and average position data.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 6182b99..530a37b 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -1,2640 +1,77 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
-import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
-import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, listAlertSchedules, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
-import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
-import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
-import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
-import type { BunnyPullZone } from '@/lib/api/bunny'
-import { toast, getDateRange } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { formatDateTime } from '@/lib/utils/formatDate'
-import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
-import VerificationModal from '@/components/sites/VerificationModal'
-import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
-import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
-import { PasswordInput } from '@ciphera-net/ui'
-import { Select, Modal, Button } from '@ciphera-net/ui'
-import { APP_URL } from '@/lib/api/client'
-import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
-import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats, usePageSpeedConfig } from '@/lib/swr/dashboard'
-import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
-import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
-import { motion, AnimatePresence } from 'framer-motion'
-import { useAuth } from '@/lib/auth/context'
-import {
-  SettingsIcon,
-  GlobeIcon,
-  CheckIcon,
-  AlertTriangleIcon,
-  ZapIcon,
-} from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug, BellSimple } from '@phosphor-icons/react'
-import { SiDiscord } from '@icons-pack/react-simple-icons'
-
-function SlackIcon({ size = 16 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" style={{ fill: 'none' }}>
-      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" style={{ fill: '#E01E5A' }}/>
-      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" style={{ fill: '#36C5F0' }}/>
-      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" style={{ fill: '#2EB67D' }}/>
-      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" style={{ fill: '#ECB22E' }}/>
-    </svg>
-  )
-}
-
-const CHANNEL_ICONS: Record<string, React.ReactNode> = {
-  email: <Envelope className="w-4 h-4" />,
-  slack: <SlackIcon size={16} />,
-  discord: <SiDiscord size={16} color="#5865F2" />,
-  webhook: <WebhooksLogo className="w-4 h-4" />,
-}
-
-const CHANNEL_ICONS_LG: Record<string, React.ReactNode> = {
-  email: <Envelope className="w-5 h-5 text-neutral-400" />,
-  slack: <SlackIcon size={18} />,
-  discord: <SiDiscord size={18} color="#5865F2" />,
-  webhook: <WebhooksLogo className="w-5 h-5 text-neutral-400" />,
-}
-
-const TIMEZONES = [
-  'UTC',
-  'America/New_York',
-  'America/Los_Angeles',
-  'America/Chicago',
-  'America/Toronto',
-  'Europe/London',
-  'Europe/Paris',
-  'Europe/Berlin',
-  'Europe/Amsterdam',
-  'Asia/Tokyo',
-  'Asia/Singapore',
-  'Asia/Dubai',
-  'Australia/Sydney',
-  'Pacific/Auckland',
-]
-
-export default function SiteSettingsPage() {
-  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+import { toast } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { useGSCStatus } from '@/lib/swr/dashboard'
+import { Spinner } from '@ciphera-net/ui'
 
+/**
+ * Legacy settings page — now a redirect handler.
+ *
+ * The unified settings modal has replaced the full-page settings.
+ * This page only exists to handle:
+ * 1. GSC OAuth callbacks (?gsc=connected|denied|error|no_property)
+ * 2. Deep links with ?tab= params
+ * 3. Direct navigation — redirects to site dashboard and opens modal
+ */
+export default function SettingsRedirect() {
   const params = useParams()
   const router = useRouter()
-  const siteId = params.id as string
-
-  const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
-  const [saving, setSaving] = useState(false)
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'notifications' | 'integrations'>('general')
   const searchParams = useSearchParams()
+  const siteId = params.id as string
+  const { openUnifiedSettings } = useUnifiedSettings()
+  const { mutate: mutateGSCStatus } = useGSCStatus(siteId)
 
-  const [formData, setFormData] = useState({
-    name: '',
-    timezone: 'UTC',
-    is_public: false,
-    password: '',
-    excluded_paths: '',
-    // Data collection settings
-    collect_page_paths: true,
-    collect_referrers: true,
-    collect_device_info: true,
-    collect_geo_data: 'full' as GeoDataLevel,
-    collect_screen_resolution: true,
-    // Bot and noise filtering
-    filter_bots: true,
-    // Hide unknown locations
-    hide_unknown_locations: false,
-    // Data retention (6 = free-tier max; safe default)
-    data_retention_months: 6
-  })
-  const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
-  const [linkCopied, setLinkCopied] = useState(false)
-  const [snippetCopied, setSnippetCopied] = useState(false)
-  const [showVerificationModal, setShowVerificationModal] = useState(false)
-  const [isPasswordEnabled, setIsPasswordEnabled] = useState(false)
-  const { data: goals = [], isLoading: goalsLoading, mutate: mutateGoals } = useGoals(siteId)
-  const [goalModalOpen, setGoalModalOpen] = useState(false)
-  const [editingGoal, setEditingGoal] = useState<Goal | null>(null)
-  const [goalForm, setGoalForm] = useState({ name: '', event_name: '' })
-  const [goalSaving, setGoalSaving] = useState(false)
-  const initialFormRef = useRef<string>('')
-
-  // Report schedules
-  const { data: reportSchedules = [], isLoading: reportLoading, mutate: mutateReportSchedules } = useReportSchedules(siteId)
-  // Alert schedules (uptime alerts)
-  const { data: alertSchedules = [], isLoading: alertLoading, mutate: mutateAlertSchedules } = useAlertSchedules(siteId)
-  const { data: gscStatus, mutate: mutateGSCStatus } = useGSCStatus(siteId)
-  const [gscConnecting, setGscConnecting] = useState(false)
-  const [gscDisconnecting, setGscDisconnecting] = useState(false)
-  const { data: bunnyStatus, mutate: mutateBunnyStatus } = useBunnyStatus(siteId)
-  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
-  const [bunnyApiKey, setBunnyApiKey] = useState('')
-  const [bunnyPullZones, setBunnyPullZones] = useState<BunnyPullZone[]>([])
-  const [bunnySelectedZone, setBunnySelectedZone] = useState<BunnyPullZone | null>(null)
-  const [bunnyLoadingZones, setBunnyLoadingZones] = useState(false)
-  const [bunnyConnecting, setBunnyConnecting] = useState(false)
-  const [bunnyDisconnecting, setBunnyDisconnecting] = useState(false)
-  const [reportModalOpen, setReportModalOpen] = useState(false)
-  const [editingSchedule, setEditingSchedule] = useState<ReportSchedule | null>(null)
-  const [reportSaving, setReportSaving] = useState(false)
-  const [reportTesting, setReportTesting] = useState<string | null>(null)
-  const [reportForm, setReportForm] = useState({
-    channel: 'email' as string,
-    recipients: '',
-    webhookUrl: '',
-    frequency: 'weekly' as string,
-    reportType: 'summary' as string,
-    timezone: '',
-    sendHour: 9,
-    sendDay: 1,
-  })
-
-  // Alert channel state
-  const [alertModalOpen, setAlertModalOpen] = useState(false)
-  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
-  const [alertSaving, setAlertSaving] = useState(false)
-  const [alertTesting, setAlertTesting] = useState<string | null>(null)
-  const [alertForm, setAlertForm] = useState({
-    channel: 'email' as string,
-    recipients: '',
-    webhookUrl: '',
-  })
-
-  // Bot & Spam tab state
-  const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
-  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
-  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
-  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
-  const { data: sessions, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
-  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
-
-  const handleBotFilter = async (sessionIds: string[]) => {
-    try {
-      await botFilterSessions(siteId, sessionIds)
-      toast.success(`${sessionIds.length} session(s) flagged as bot`)
-      setSelectedSessions(new Set())
-      mutateSessions()
-      mutateBotStats()
-    } catch {
-      toast.error('Failed to flag sessions')
-    }
-  }
-
-  const handleBotUnfilter = async (sessionIds: string[]) => {
-    try {
-      await botUnfilterSessions(siteId, sessionIds)
-      toast.success(`${sessionIds.length} session(s) unblocked`)
-      setSelectedSessions(new Set())
-      mutateSessions()
-      mutateBotStats()
-    } catch {
-      toast.error('Failed to unblock sessions')
-    }
-  }
-
-  useEffect(() => {
-    if (!site) return
-    setFormData({
-      name: site.name,
-      timezone: site.timezone || 'UTC',
-      is_public: site.is_public || false,
-      password: '',
-      excluded_paths: (site.excluded_paths || []).join('\n'),
-      collect_page_paths: site.collect_page_paths ?? true,
-      collect_referrers: site.collect_referrers ?? true,
-      collect_device_info: site.collect_device_info ?? true,
-      collect_geo_data: site.collect_geo_data || 'full',
-      collect_screen_resolution: site.collect_screen_resolution ?? true,
-      filter_bots: site.filter_bots ?? true,
-      hide_unknown_locations: site.hide_unknown_locations ?? false,
-      data_retention_months: site.data_retention_months ?? 6
-    })
-    initialFormRef.current = JSON.stringify({
-      name: site.name,
-      timezone: site.timezone || 'UTC',
-      is_public: site.is_public || false,
-      excluded_paths: (site.excluded_paths || []).join('\n'),
-      collect_page_paths: site.collect_page_paths ?? true,
-      collect_referrers: site.collect_referrers ?? true,
-      collect_device_info: site.collect_device_info ?? true,
-      collect_geo_data: site.collect_geo_data || 'full',
-      collect_screen_resolution: site.collect_screen_resolution ?? true,
-      filter_bots: site.filter_bots ?? true,
-      hide_unknown_locations: site.hide_unknown_locations ?? false,
-      data_retention_months: site.data_retention_months ?? 6
-    })
-    setIsPasswordEnabled(!!site.has_password)
-  }, [site])
-
-  // * Snap data_retention_months to nearest valid option when subscription loads
-  useEffect(() => {
-    if (!subscription) return
-    const opts = getRetentionOptionsForPlan(subscription.plan_id)
-    const values = opts.map(o => o.value)
-    const maxVal = Math.max(...values)
-    setFormData(prev => {
-      if (values.includes(prev.data_retention_months)) return prev
-      const bestFit = values.filter(v => v <= prev.data_retention_months).pop() ?? maxVal
-      return { ...prev, data_retention_months: Math.min(bestFit, maxVal) }
-    })
-  }, [subscription])
-
-  const resetReportForm = () => {
-    setReportForm({
-      channel: 'email',
-      recipients: '',
-      webhookUrl: '',
-      frequency: 'weekly',
-      reportType: 'summary',
-      timezone: site?.timezone || '',
-      sendHour: 9,
-      sendDay: 1,
-    })
-  }
-
-  const openEditSchedule = (schedule: ReportSchedule) => {
-    setEditingSchedule(schedule)
-    const isEmail = schedule.channel === 'email'
-    setReportForm({
-      channel: schedule.channel,
-      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
-      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
-      frequency: schedule.frequency,
-      reportType: schedule.report_type,
-      timezone: schedule.timezone || site?.timezone || '',
-      sendHour: schedule.send_hour ?? 9,
-      sendDay: schedule.send_day ?? (schedule.frequency === 'monthly' ? 1 : 0),
-    })
-    setReportModalOpen(true)
-  }
-
-  const handleReportSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    let channelConfig: EmailConfig | WebhookConfig
-    if (reportForm.channel === 'email') {
-      const recipients = reportForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
-      if (recipients.length === 0) {
-        toast.error('At least one recipient email is required')
-        return
-      }
-      channelConfig = { recipients }
-    } else {
-      if (!reportForm.webhookUrl.trim()) {
-        toast.error('Webhook URL is required')
-        return
-      }
-      channelConfig = { url: reportForm.webhookUrl.trim() }
-    }
-
-    const payload: CreateReportScheduleRequest = {
-      channel: reportForm.channel,
-      channel_config: channelConfig,
-      frequency: reportForm.frequency,
-      timezone: reportForm.timezone || undefined,
-      report_type: reportForm.reportType,
-      send_hour: reportForm.sendHour,
-      ...(reportForm.frequency !== 'daily' ? { send_day: reportForm.sendDay } : {}),
-    }
-
-    setReportSaving(true)
-    try {
-      if (editingSchedule) {
-        await updateReportSchedule(siteId, editingSchedule.id, payload)
-        toast.success('Report schedule updated')
-      } else {
-        await createReportSchedule(siteId, payload)
-        toast.success('Report schedule created')
-      }
-      setReportModalOpen(false)
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save report schedule')
-    } finally {
-      setReportSaving(false)
-    }
-  }
-
-  const handleReportDelete = async (schedule: ReportSchedule) => {
-    if (!confirm('Delete this report schedule?')) return
-    try {
-      await deleteReportSchedule(siteId, schedule.id)
-      toast.success('Report schedule deleted')
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete report schedule')
-    }
-  }
-
-  const handleReportToggle = async (schedule: ReportSchedule) => {
-    try {
-      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
-      toast.success(schedule.enabled ? 'Report paused' : 'Report enabled')
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update report schedule')
-    }
-  }
-
-  const handleReportTest = async (schedule: ReportSchedule) => {
-    setReportTesting(schedule.id)
-    try {
-      await testReportSchedule(siteId, schedule.id)
-      toast.success('Test report sent successfully')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to send test report')
-    } finally {
-      setReportTesting(null)
-    }
-  }
-
-  // Alert channel handlers
-  const resetAlertForm = () => {
-    setAlertForm({
-      channel: 'email',
-      recipients: '',
-      webhookUrl: '',
-    })
-  }
-
-  const openEditAlert = (schedule: ReportSchedule) => {
-    setEditingAlert(schedule)
-    const isEmail = schedule.channel === 'email'
-    setAlertForm({
-      channel: schedule.channel,
-      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
-      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
-    })
-    setAlertModalOpen(true)
-  }
-
-  const handleAlertSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    let channelConfig: EmailConfig | WebhookConfig
-    if (alertForm.channel === 'email') {
-      const recipients = alertForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
-      if (recipients.length === 0) {
-        toast.error('At least one recipient email is required')
-        return
-      }
-      channelConfig = { recipients }
-    } else {
-      if (!alertForm.webhookUrl.trim()) {
-        toast.error('Webhook URL is required')
-        return
-      }
-      channelConfig = { url: alertForm.webhookUrl.trim() }
-    }
-
-    const payload: CreateReportScheduleRequest = {
-      channel: alertForm.channel,
-      channel_config: channelConfig,
-      frequency: 'daily',
-      purpose: 'alert',
-    }
-
-    setAlertSaving(true)
-    try {
-      if (editingAlert) {
-        await updateReportSchedule(siteId, editingAlert.id, { ...payload, purpose: 'alert' })
-        toast.success('Alert channel updated')
-      } else {
-        await createReportSchedule(siteId, payload)
-        toast.success('Alert channel created')
-      }
-      setAlertModalOpen(false)
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save alert channel')
-    } finally {
-      setAlertSaving(false)
-    }
-  }
-
-  const handleAlertDelete = async (schedule: ReportSchedule) => {
-    if (!confirm('Delete this alert channel?')) return
-    try {
-      await deleteReportSchedule(siteId, schedule.id)
-      toast.success('Alert channel deleted')
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete alert channel')
-    }
-  }
-
-  const handleAlertToggle = async (schedule: ReportSchedule) => {
-    try {
-      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
-      toast.success(schedule.enabled ? 'Alert paused' : 'Alert enabled')
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update alert channel')
-    }
-  }
-
-  const handleAlertTest = async (schedule: ReportSchedule) => {
-    setAlertTesting(schedule.id)
-    try {
-      await testReportSchedule(siteId, schedule.id)
-      toast.success('Test alert sent successfully')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to send test alert')
-    } finally {
-      setAlertTesting(null)
-    }
-  }
-
-  const getChannelLabel = (channel: string) => {
-    switch (channel) {
-      case 'email': return 'Email'
-      case 'slack': return 'Slack'
-      case 'discord': return 'Discord'
-      case 'webhook': return 'Webhook'
-      default: return channel
-    }
-  }
-
-  const getFrequencyLabel = (frequency: string) => {
-    switch (frequency) {
-      case 'daily': return 'Daily'
-      case 'weekly': return 'Weekly'
-      case 'monthly': return 'Monthly'
-      default: return frequency
-    }
-  }
-
-  const WEEKDAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-
-  const formatHour = (hour: number) => {
-    if (hour === 0) return '12:00 AM'
-    if (hour === 12) return '12:00 PM'
-    return hour < 12 ? `${hour}:00 AM` : `${hour - 12}:00 PM`
-  }
-
-  const getScheduleDescription = (schedule: ReportSchedule) => {
-    const hour = formatHour(schedule.send_hour ?? 9)
-    const tz = schedule.timezone || 'UTC'
-    switch (schedule.frequency) {
-      case 'daily':
-        return `Every day at ${hour} (${tz})`
-      case 'weekly': {
-        const day = WEEKDAY_NAMES[schedule.send_day ?? 0] || 'Monday'
-        return `Every ${day} at ${hour} (${tz})`
-      }
-      case 'monthly': {
-        const d = schedule.send_day ?? 1
-        const suffix = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th'
-        return `${d}${suffix} of each month at ${hour} (${tz})`
-      }
-      default:
-        return schedule.frequency
-    }
-  }
-
-  const getReportTypeLabel = (type: string) => {
-    switch (type) {
-      case 'summary': return 'Summary'
-      case 'pages': return 'Pages'
-      case 'sources': return 'Sources'
-      case 'goals': return 'Goals'
-      default: return type
-    }
-  }
-
-  const openAddGoal = () => {
-    setEditingGoal(null)
-    setGoalForm({ name: '', event_name: '' })
-    setGoalModalOpen(true)
-  }
-
-  const openEditGoal = (goal: Goal) => {
-    setEditingGoal(goal)
-    setGoalForm({ name: goal.name, event_name: goal.event_name })
-    setGoalModalOpen(true)
-  }
-
-  const handleGoalSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!goalForm.name.trim() || !goalForm.event_name.trim()) {
-      toast.error('Name and event name are required')
-      return
-    }
-    const eventName = goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_')
-    if (eventName.length > 64) {
-      toast.error('Event name must be 64 characters or less')
-      return
-    }
-    if (!/^[a-zA-Z0-9_]+$/.test(eventName)) {
-      toast.error('Event name can only contain letters, numbers, and underscores')
-      return
-    }
-    const duplicateEventName = editingGoal
-      ? goals.some((g) => g.id !== editingGoal.id && g.event_name === eventName)
-      : goals.some((g) => g.event_name === eventName)
-    if (duplicateEventName) {
-      toast.error('A goal with this event name already exists')
-      return
-    }
-    setGoalSaving(true)
-    try {
-      if (editingGoal) {
-        await updateGoal(siteId, editingGoal.id, { name: goalForm.name.trim(), event_name: eventName })
-        toast.success('Goal updated')
-      } else {
-        await createGoal(siteId, { name: goalForm.name.trim(), event_name: eventName })
-        toast.success('Goal created')
-      }
-      setGoalModalOpen(false)
-      mutateGoals()
-    } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to save goal')
-    } finally {
-      setGoalSaving(false)
-    }
-  }
-
-  const handleDeleteGoal = async (goal: Goal) => {
-    if (!confirm(`Delete goal "${goal.name}"?`)) return
-    try {
-      await deleteGoal(siteId, goal.id)
-      toast.success('Goal deleted')
-      mutateGoals()
-    } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete goal')
-    }
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setSaving(true)
-
-    try {
-      const excludedPathsArray = formData.excluded_paths
-        .split('\n')
-        .map(p => p.trim())
-        .filter(p => p.length > 0)
-
-      await updateSite(siteId, {
-        name: formData.name,
-        timezone: formData.timezone,
-        is_public: formData.is_public,
-        password: isPasswordEnabled ? (formData.password || undefined) : undefined,
-        clear_password: !isPasswordEnabled,
-        excluded_paths: excludedPathsArray,
-        // Data collection settings
-        collect_page_paths: formData.collect_page_paths,
-        collect_referrers: formData.collect_referrers,
-        collect_device_info: formData.collect_device_info,
-        collect_geo_data: formData.collect_geo_data,
-        collect_screen_resolution: formData.collect_screen_resolution,
-        // Bot and noise filtering
-        filter_bots: formData.filter_bots,
-        // Hide unknown locations
-        hide_unknown_locations: formData.hide_unknown_locations,
-        // Data retention
-        data_retention_months: formData.data_retention_months
-      })
-      toast.success('Site updated successfully')
-      initialFormRef.current = JSON.stringify({
-        name: formData.name,
-        timezone: formData.timezone,
-        is_public: formData.is_public,
-        excluded_paths: formData.excluded_paths,
-        collect_page_paths: formData.collect_page_paths,
-        collect_referrers: formData.collect_referrers,
-        collect_device_info: formData.collect_device_info,
-        collect_geo_data: formData.collect_geo_data,
-        collect_screen_resolution: formData.collect_screen_resolution,
-        filter_bots: formData.filter_bots,
-        hide_unknown_locations: formData.hide_unknown_locations,
-        data_retention_months: formData.data_retention_months
-      })
-      mutateSite()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save site settings')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleResetData = async () => {
-    if (!confirm('Are you sure you want to delete ALL data for this site? This action cannot be undone.')) {
-      return
-    }
-
-    try {
-      await resetSiteData(siteId)
-      toast.success('All site data has been reset')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to reset site data')
-    }
-  }
-
-  const handleDeleteSite = () => {
-    setShowDeleteModal(true)
-  }
-
-  const copyLink = () => {
-    const link = `${APP_URL}/share/${siteId}`
-    navigator.clipboard.writeText(link)
-    setLinkCopied(true)
-    toast.success('Link copied to clipboard')
-    setTimeout(() => setLinkCopied(false), 2000)
-  }
-
-  const copySnippet = () => {
-    if (!site) return
-    navigator.clipboard.writeText(generatePrivacySnippet(site))
-    setSnippetCopied(true)
-    toast.success('Privacy snippet copied to clipboard')
-    setTimeout(() => setSnippetCopied(false), 2000)
-  }
-
-  const isFormDirty = initialFormRef.current !== '' && JSON.stringify({
-    name: formData.name,
-    timezone: formData.timezone,
-    is_public: formData.is_public,
-    excluded_paths: formData.excluded_paths,
-    collect_page_paths: formData.collect_page_paths,
-    collect_referrers: formData.collect_referrers,
-    collect_device_info: formData.collect_device_info,
-    collect_geo_data: formData.collect_geo_data,
-    collect_screen_resolution: formData.collect_screen_resolution,
-    filter_bots: formData.filter_bots,
-    hide_unknown_locations: formData.hide_unknown_locations,
-    data_retention_months: formData.data_retention_months
-  }) !== initialFormRef.current
-
-  useUnsavedChanges(isFormDirty)
-
-  useEffect(() => {
-    if (site?.domain) document.title = `Settings · ${site.domain} | Pulse`
-  }, [site?.domain])
-
-  // Handle GSC OAuth callback query params
   useEffect(() => {
     const gsc = searchParams.get('gsc')
-    if (!gsc) return
-    switch (gsc) {
-      case 'connected':
-        toast.success('Google Search Console connected successfully')
-        mutateGSCStatus()
-        break
-      case 'denied':
-        toast.error('Google authorization was denied')
-        break
-      case 'no_property':
-        toast.error('No matching Search Console property found for this site')
-        break
-      case 'error':
-        toast.error('Failed to connect Google Search Console')
-        break
+    const tab = searchParams.get('tab')
+
+    // Handle GSC OAuth callback
+    if (gsc) {
+      switch (gsc) {
+        case 'connected':
+          toast.success('Google Search Console connected successfully')
+          mutateGSCStatus()
+          break
+        case 'denied':
+          toast.error('Google authorization was denied')
+          break
+        case 'no_property':
+          toast.error('No matching Search Console property found for this site')
+          break
+        case 'token_error':
+        case 'error':
+          toast.error('Failed to connect Google Search Console')
+          break
+      }
+      // Redirect to site page and open integrations tab
+      router.replace(`/sites/${siteId}`)
+      setTimeout(() => openUnifiedSettings({ context: 'site', tab: 'integrations' }), 100)
+      return
     }
-    setActiveTab('integrations')
-    window.history.replaceState({}, '', window.location.pathname)
-  }, [searchParams, mutateGSCStatus])
 
-  const showSkeleton = useMinimumLoading(siteLoading && !site)
-  const fadeClass = useSkeletonFade(showSkeleton)
+    // Handle deep links with ?tab= param
+    const tabMap: Record<string, string> = {
+      general: 'general',
+      visibility: 'visibility',
+      data: 'privacy',
+      privacy: 'privacy',
+      bot: 'bot-spam',
+      goals: 'goals',
+      notifications: 'reports',
+      integrations: 'integrations',
+    }
 
-  if (showSkeleton) {
-    return (
-      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
-        <div className="space-y-8">
-          <div>
-            <div className="h-8 w-40 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
-            <div className="h-4 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-          </div>
-          <div className="flex flex-col md:flex-row gap-8">
-            <nav className="w-full md:w-64 flex-shrink-0 space-y-1">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="h-12 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-              ))}
-            </nav>
-            <div className="flex-1 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8">
-              <SettingsFormSkeleton />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (!site) {
-    return (
-      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
-        <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
-      </div>
-    )
-  }
+    const mappedTab = tab ? tabMap[tab] || 'general' : 'general'
+    router.replace(`/sites/${siteId}`)
+    setTimeout(() => openUnifiedSettings({ context: 'site', tab: mappedTab }), 100)
+  }, [siteId, searchParams, router, openUnifiedSettings, mutateGSCStatus])
 
   return (
-    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-
-      <div className="space-y-8">
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-200">Site Settings</h1>
-          <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-            Manage settings for <span className="font-medium text-white">{site.domain}</span>
-          </p>
-        </div>
-
-        <div className="flex flex-col md:flex-row gap-8">
-        {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Site settings sections">
-          <button
-            onClick={() => setActiveTab('general')}
-            role="tab"
-            aria-selected={activeTab === 'general'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'general'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <SettingsIcon className="w-5 h-5" />
-            General
-          </button>
-          <button
-            onClick={() => setActiveTab('visibility')}
-            role="tab"
-            aria-selected={activeTab === 'visibility'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'visibility'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <GlobeIcon className="w-5 h-5" />
-            Visibility
-          </button>
-          <button
-            onClick={() => setActiveTab('data')}
-            role="tab"
-            aria-selected={activeTab === 'data'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'data'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <ShieldCheck className="w-5 h-5" />
-            Data & Privacy
-          </button>
-          <button
-            onClick={() => setActiveTab('bot')}
-            role="tab"
-            aria-selected={activeTab === 'bot'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'bot'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <Bug className="w-5 h-5" />
-            Bot & Spam
-          </button>
-          <button
-            onClick={() => setActiveTab('goals')}
-            role="tab"
-            aria-selected={activeTab === 'goals'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'goals'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <ZapIcon className="w-5 h-5" />
-            Goals & Events
-          </button>
-          <button
-            onClick={() => setActiveTab('notifications')}
-            role="tab"
-            aria-selected={activeTab === 'notifications'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'notifications'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BellSimple className="w-5 h-5" />
-            Notifications
-          </button>
-          <button
-            onClick={() => setActiveTab('integrations')}
-            role="tab"
-            aria-selected={activeTab === 'integrations'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'integrations'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <Plugs className="w-5 h-5" />
-            Integrations
-          </button>
-        </nav>
-
-        {/* Content Area */}
-        <div className="flex-1 relative">
-          {!canEdit && (
-            <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/10 text-amber-800 dark:text-amber-200 rounded-xl border border-amber-200 dark:border-amber-800 flex items-center gap-3">
-              <AlertTriangleIcon className="w-5 h-5" />
-              <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
-            </div>
-          )}
-
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.2 }}
-            className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8 shadow-sm"
-          >
-            {activeTab === 'general' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">General Configuration</h2>
-                    <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="space-y-1.5">
-                      <label htmlFor="name" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Site Name
-                      </label>
-                      <input
-                        type="text"
-                        id="name"
-                        required
-                        maxLength={100}
-                        value={formData.name}
-                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900 
-                        focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white"
-                      />
-                      {formData.name.length > 80 && (
-                        <span className={`text-xs tabular-nums ${formData.name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{formData.name.length}/100</span>
-                      )}
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <label htmlFor="timezone" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Timezone
-                      </label>
-                      <Select
-                        id="timezone"
-                        value={formData.timezone}
-                        onChange={(v) => setFormData({ ...formData, timezone: v })}
-                        options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
-                        variant="input"
-                        fullWidth
-                        align="left"
-                      />
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Domain
-                      </label>
-                      <input
-                        type="text"
-                        value={site.domain}
-                        disabled
-                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-400 cursor-not-allowed"
-                      />
-                      <p className="text-xs text-neutral-400">
-                        Domain cannot be changed after creation
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-lg font-semibold text-white mb-2">Tracking Script</h3>
-                    <p className="text-sm text-neutral-400 mb-4">
-                      Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
-                    </p>
-                    <ScriptSetupBlock
-                      site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
-                      showFrameworkPicker
-                      className="mb-4"
-                      onFeaturesChange={async (features) => {
-                        try {
-                          await updateSite(siteId, { name: site.name, script_features: features })
-                          mutateSite()
-                        } catch { /* silent — not critical */ }
-                      }}
-                    />
-
-                    <div className="flex items-center gap-4 mt-4">
-                      <button
-                        type="button"
-                        onClick={() => setShowVerificationModal(true)}
-                        className={`flex items-center gap-2 px-4 py-2 border rounded-xl transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
-                          site.is_verified
-                            ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/20 focus-visible:ring-green-500'
-                            : 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 focus-visible:ring-brand-orange'
-                        }`}
-                      >
-                        {site.is_verified ? <CheckIcon className="w-4 h-4" /> : <ZapIcon className="w-4 h-4" />}
-                        {site.is_verified ? 'Verified' : 'Verify Installation'}
-                      </button>
-                      <p className="text-xs text-neutral-400">
-                        {site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
-                      </p>
-                    </div>
-                  </div>
-
-                    <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                    </div>
-                  </form>
-
-                  {canEdit && (
-                  <div className="space-y-6">
-                    <div>
-                      <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
-                    </div>
-
-                  <div className="space-y-4">
-                    <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                      <div>
-                        <h3 className="font-medium text-red-900 dark:text-red-200">Reset Data</h3>
-                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Delete all stats and events. This cannot be undone.</p>
-                      </div>
-                      <button
-                        onClick={handleResetData}
-                        className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                      >
-                        Reset Data
-                      </button>
-                    </div>
-
-                    <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                      <div>
-                        <h3 className="font-medium text-red-900 dark:text-red-200">Delete Site</h3>
-                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Schedule this site for deletion with a 7-day grace period.</p>
-                      </div>
-                      <button
-                        onClick={handleDeleteSite}
-                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                      >
-                        Delete Site...
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'visibility' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">Visibility Settings</h2>
-                    <p className="text-sm text-neutral-400">Manage who can view your dashboard.</p>
-                  </div>
-
-                  <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white dark:bg-neutral-800 rounded-lg text-neutral-400">
-                          <GlobeIcon className="w-6 h-6" />
-                        </div>
-                        <div>
-                          <h3 className="font-medium text-white">Public Dashboard</h3>
-                          <p className="text-sm text-neutral-400">
-                            Allow anyone with the link to view this dashboard
-                          </p>
-                        </div>
-                      </div>
-                      
-                      <label className="relative inline-flex items-center cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={formData.is_public}
-                          onChange={(e) => setFormData({ ...formData, is_public: e.target.checked })}
-                          className="sr-only peer"
-                        />
-                        <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                      </label>
-                    </div>
-
-                    <AnimatePresence>
-                      {formData.is_public && (
-                        <motion.div
-                          initial={{ opacity: 0, height: 0 }}
-                          animate={{ opacity: 1, height: 'auto' }}
-                          exit={{ opacity: 0, height: 0 }}
-                          className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800 overflow-hidden space-y-6"
-                        >
-                          <div>
-                            <label className="block text-sm font-medium mb-2 text-white">
-                              Public Link
-                            </label>
-                            <div className="flex gap-2">
-                              <input
-                                type="text"
-                                readOnly
-                                value={`${APP_URL}/share/${siteId}`}
-                                className="flex-1 px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 font-mono text-sm"
-                              />
-                              <button
-                                type="button"
-                                onClick={copyLink}
-                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-                              >
-                                {linkCopied ? 'Copied!' : 'Copy Link'}
-                              </button>
-                            </div>
-                            <p className="mt-2 text-xs text-neutral-400">
-                              Share this link with others to view the dashboard.
-                            </p>
-                          </div>
-
-                          <div>
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center gap-3">
-                                <div>
-                                  <h3 className="text-sm font-medium text-white">Password Protection</h3>
-                                  <p className="text-xs text-neutral-500 mt-0.5">Restrict access to this dashboard.</p>
-                                </div>
-                                {isPasswordEnabled && site?.has_password && !formData.password && (
-                                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/30 text-green-400 border border-green-500/20">
-                                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
-                                    Password set
-                                  </span>
-                                )}
-                              </div>
-                              <label className="relative inline-flex items-center cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  checked={isPasswordEnabled}
-                                  onChange={(e) => {
-                                    setIsPasswordEnabled(e.target.checked);
-                                    if (!e.target.checked) setFormData({...formData, password: ''});
-                                  }}
-                                  className="sr-only peer"
-                                />
-                                <div className="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-orange"></div>
-                              </label>
-                            </div>
-
-                            <AnimatePresence>
-                              {isPasswordEnabled && (
-                                <motion.div
-                                  initial={{ opacity: 0, height: 0 }}
-                                  animate={{ opacity: 1, height: 'auto' }}
-                                  exit={{ opacity: 0, height: 0 }}
-                                  className="overflow-hidden"
-                                >
-                                  <div className="mt-4 space-y-3">
-                                    <PasswordInput
-                                      id="password"
-                                      value={formData.password}
-                                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                                      placeholder="Enter new password"
-                                    />
-                                    {site?.has_password && (
-                                      <p className="text-xs text-neutral-500">
-                                        Current password will remain unchanged unless you enter a new one.
-                                      </p>
-                                    )}
-                                    {site?.has_password && (
-                                      <button
-                                        type="button"
-                                        onClick={() => {
-                                          setIsPasswordEnabled(false)
-                                          setFormData({ ...formData, password: '' })
-                                        }}
-                                        className="text-xs font-medium text-red-400 hover:text-red-300 transition-colors"
-                                      >
-                                        Remove password protection
-                                      </button>
-                                    )}
-                                    {!site?.has_password && (
-                                      <p className="text-xs text-neutral-500">
-                                        Visitors will need to enter this password to view the dashboard.
-                                      </p>
-                                    )}
-                                  </div>
-                                </motion.div>
-                              )}
-                            </AnimatePresence>
-                          </div>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                  </div>
-                </form>
-              </div>
-            )}
-
-            {activeTab === 'data' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">Data & Privacy</h2>
-                    <p className="text-sm text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
-                  </div>
-
-                  {/* Data Collection Controls */}
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Data Collection</h3>
-
-                    {/* Page Paths Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Page Paths</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track which pages visitors view
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_page_paths}
-                            onChange={(e) => setFormData({ ...formData, collect_page_paths: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Referrers Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Referrers</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track where visitors come from
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_referrers}
-                            onChange={(e) => setFormData({ ...formData, collect_referrers: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Device Info Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Device Info</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track browser, OS, and device type
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_device_info}
-                            onChange={(e) => setFormData({ ...formData, collect_device_info: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Geographic Data Dropdown */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Geographic Data</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Control location tracking granularity
-                          </p>
-                        </div>
-                        <Select
-                          value={formData.collect_geo_data}
-                          onChange={(v) => setFormData({ ...formData, collect_geo_data: v as GeoDataLevel })}
-                          options={[
-                            { value: 'full', label: 'Full (country, region, city)' },
-                            { value: 'country', label: 'Country only' },
-                            { value: 'none', label: 'None' },
-                          ]}
-                          variant="input"
-                          align="right"
-                          className="min-w-[200px]"
-                        />
-                      </div>
-                    </div>
-
-                    {/* Screen Resolution Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Screen Resolution</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track visitor screen sizes
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_screen_resolution}
-                            onChange={(e) => setFormData({ ...formData, collect_screen_resolution: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Filtering */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Filtering</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Hide unknown locations</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Exclude entries where geographic data could not be resolved from location stats
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.hide_unknown_locations}
-                            onChange={(e) => setFormData({ ...formData, hide_unknown_locations: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Data Retention */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Data Retention</h3>
-                    {!!subscriptionError && (
-                      <div className="p-3 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 flex items-center justify-between gap-3">
-                        <p className="text-sm text-amber-800 dark:text-amber-200">
-                          Plan limits could not be loaded. Options shown may be limited.
-                        </p>
-                        <button
-                          type="button"
-                          onClick={() => mutateSubscription()}
-                          className="shrink-0 text-sm font-medium text-amber-800 dark:text-amber-200 hover:underline"
-                        >
-                          Retry
-                        </button>
-                      </div>
-                    )}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Keep raw event data for</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Events older than this are automatically deleted. Aggregated daily stats are kept permanently.
-                          </p>
-                        </div>
-                        <Select
-                          value={String(formData.data_retention_months)}
-                          onChange={(v) => setFormData({ ...formData, data_retention_months: Number(v) })}
-                          options={getRetentionOptionsForPlan(subscription?.plan_id).map(opt => ({
-                            value: String(opt.value),
-                            label: opt.label,
-                          }))}
-                          variant="input"
-                          align="right"
-                          className="min-w-[160px]"
-                        />
-                      </div>
-                      {subscription?.plan_id && subscription.plan_id !== 'free' && (
-                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
-                          Your {subscription.plan_id} plan supports up to {formatRetentionMonths(
-                            getRetentionOptionsForPlan(subscription.plan_id).at(-1)?.value ?? 6
-                          )} of data retention.
-                        </p>
-                      )}
-                      {(!subscription?.plan_id || subscription.plan_id === 'free') && (
-                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
-                          Free plan supports up to 6 months. <a href="/pricing" className="text-brand-orange hover:underline">Upgrade</a> for longer retention.
-                        </p>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* PageSpeed Monitoring */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">PageSpeed Monitoring</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Check frequency</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            How often PageSpeed Insights runs automated checks on your site.
-                          </p>
-                        </div>
-                        {psiConfig?.enabled ? (
-                          <Select
-                            value={psiConfig.frequency}
-                            onChange={async (v) => {
-                              try {
-                                await updatePageSpeedConfig(siteId, { enabled: true, frequency: v })
-                                mutatePSIConfig()
-                                toast.success(`PageSpeed frequency updated to ${v}`)
-                              } catch {
-                                toast.error('Failed to update frequency')
-                              }
-                            }}
-                            options={[
-                              { value: 'daily', label: 'Daily' },
-                              { value: 'weekly', label: 'Weekly' },
-                              { value: 'monthly', label: 'Monthly' },
-                            ]}
-                            variant="input"
-                            align="right"
-                            className="min-w-[130px]"
-                          />
-                        ) : (
-                          <span className="text-sm text-neutral-400 dark:text-neutral-500">
-                            Not enabled
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Excluded Paths */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Path Filtering</h3>
-                    <div className="space-y-1.5">
-                      <label htmlFor="excludedPaths" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Excluded Paths
-                      </label>
-                      <div className="relative">
-                        <textarea
-                          id="excludedPaths"
-                          rows={4}
-                          value={formData.excluded_paths}
-                          onChange={(e) => setFormData({ ...formData, excluded_paths: e.target.value })}
-                          placeholder="/admin/*&#10;/staging/*"
-                          className="w-full px-4 py-3 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900
-                          focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white font-mono text-sm"
-                        />
-                      </div>
-                      <p className="text-sm text-neutral-400 mt-2">
-                        Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* For your privacy policy */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                      For your privacy policy
-                    </h3>
-                    <p className="text-sm text-neutral-400">
-                      Copy the text below into your site&apos;s Privacy Policy to describe your use of Pulse.
-                      It updates automatically based on your saved settings above.
-                    </p>
-                    <p className="text-xs text-amber-600 dark:text-amber-500">
-                      This is provided for convenience and is not legal advice. You are responsible for ensuring
-                      your privacy policy is accurate and complies with applicable laws.
-                    </p>
-                    <div className="relative">
-                      <textarea
-                        readOnly
-                        rows={6}
-                        value={site ? generatePrivacySnippet(site) : ''}
-                        className="w-full px-4 py-3 pr-12 border border-neutral-200 dark:border-neutral-800 rounded-xl
-                          bg-neutral-50 dark:bg-neutral-900/50 font-sans text-sm text-neutral-700 dark:text-neutral-300
-                          focus:outline-none resize-y"
-                      />
-                      <button
-                        type="button"
-                        onClick={copySnippet}
-                        className="absolute top-3 right-3 p-2 rounded-lg bg-neutral-200 dark:bg-neutral-700
-                          hover:bg-neutral-300 dark:hover:bg-neutral-600 text-neutral-600 dark:text-neutral-300
-                          transition-colors"
-                        title="Copy snippet"
-                      >
-                        {snippetCopied ? (
-                          <CheckIcon className="w-4 h-4 text-green-600" />
-                        ) : (
-                          <svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                          </svg>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                  </div>
-                </form>
-              </div>
-            )}
-
-            {activeTab === 'bot' && (
-              <div className="flex-1 space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Bot & Spam</h2>
-                  <p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
-                </div>
-
-                {/* Automated Filtering Section */}
-                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
-                  <h3 className="font-semibold text-white mb-3">Automated Filtering</h3>
-                  <div className="flex items-center justify-between py-3">
-                    <div>
-                      <p className="font-medium text-white">Filter bots and referrer spam</p>
-                      <p className="text-sm text-neutral-400 mt-0.5">Automatically block known bots, crawlers, and spam referrers</p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={formData.filter_bots}
-                        onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                    </label>
-                  </div>
-                  {botStats && (
-                    <div className="mt-3 pt-3 border-t border-neutral-800 flex gap-6 text-sm">
-                      <div>
-                        <span className="text-neutral-400">Auto-blocked this month:</span>
-                        <span className="ml-2 font-medium text-white">{botStats.auto_blocked_this_month.toLocaleString()}</span>
-                      </div>
-                      <div>
-                        <span className="text-neutral-400">Manually flagged:</span>
-                        <span className="ml-2 font-medium text-white">{botStats.filtered_sessions} sessions ({botStats.filtered_events} events)</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                {/* Session Review Section */}
-                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
-                  <div className="flex items-center justify-between mb-4">
-                    <h3 className="font-semibold text-white">Session Review</h3>
-                    <div className="flex items-center gap-3">
-                      {/* Review / Blocked toggle */}
-                      <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
-                        <button
-                          onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
-                          className={`px-3 py-1.5 transition-colors ${botView === 'review' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
-                        >
-                          Review
-                        </button>
-                        <button
-                          onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
-                          className={`px-3 py-1.5 transition-colors ${botView === 'blocked' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
-                        >
-                          Blocked
-                        </button>
-                      </div>
-                      {botView === 'review' && (
-                        <label className="flex items-center gap-2 text-sm text-neutral-400 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={suspiciousOnly}
-                            onChange={(e) => setSuspiciousOnly(e.target.checked)}
-                            className="w-4 h-4 cursor-pointer"
-                            style={{ accentColor: '#FD5E0F' }}
-                          />
-                          Suspicious only
-                        </label>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Bulk actions */}
-                  {selectedSessions.size > 0 && (
-                    <div className="mb-3 flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg">
-                      <span className="text-sm text-brand-orange font-medium">{selectedSessions.size} selected</span>
-                      {botView === 'review' ? (
-                        <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-sm font-medium text-red-400 hover:text-red-300">
-                          Flag as bot
-                        </button>
-                      ) : (
-                        <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-sm font-medium text-green-400 hover:text-green-300">
-                          Unblock
-                        </button>
-                      )}
-                      <button onClick={() => setSelectedSessions(new Set())} className="text-sm text-neutral-400 hover:text-white ml-auto">
-                        Clear
-                      </button>
-                    </div>
-                  )}
-
-                  {/* Session cards */}
-                  <div className="space-y-2">
-                    {(sessions?.sessions || [])
-                      .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
-                      .map((session) => (
-                      <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
-                        <input
-                          type="checkbox"
-                          checked={selectedSessions.has(session.session_id)}
-                          onChange={(e) => {
-                            const next = new Set(selectedSessions)
-                            if (e.target.checked) next.add(session.session_id)
-                            else next.delete(session.session_id)
-                            setSelectedSessions(next)
-                          }}
-                          className="w-4 h-4 shrink-0 cursor-pointer"
-                          style={{ accentColor: '#FD5E0F' }}
-                        />
-
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-sm font-medium text-white truncate">{session.first_page}</span>
-                            <span className={`shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                              session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
-                              session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
-                              'bg-neutral-800 text-neutral-400'
-                            }`}>
-                              {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-3 text-xs text-neutral-500">
-                            <span>{session.pageviews} page{session.pageviews !== 1 ? 's' : ''}</span>
-                            <span>{session.duration != null ? `${Math.round(session.duration)}s` : 'No duration'}</span>
-                            <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
-                            <span>{session.browser || 'Unknown browser'}</span>
-                            <span>{session.referrer || 'Direct'}</span>
-                          </div>
-                        </div>
-
-                        {botView === 'review' ? (
-                          <button
-                            onClick={() => handleBotFilter([session.session_id])}
-                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-500/20 rounded-lg border border-red-500/20 transition-colors"
-                          >
-                            Flag as bot
-                          </button>
-                        ) : (
-                          <button
-                            onClick={() => handleBotUnfilter([session.session_id])}
-                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-green-400 hover:text-white hover:bg-green-500/20 rounded-lg border border-green-500/20 transition-colors"
-                          >
-                            Unblock
-                          </button>
-                        )}
-                      </div>
-                    ))}
-                    {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
-                      <div className="py-12 text-center text-neutral-500 text-sm">
-                        {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'goals' && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Goals & Events</h2>
-                  <p className="text-sm text-neutral-400">
-                    Define goals to label custom events (e.g. signup, purchase). Track with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs">pulse.track(&apos;event_name&apos;)</code> in your snippet.
-                  </p>
-                </div>
-                {goalsLoading ? (
-                  <GoalsListSkeleton />
-                ) : (
-                  <>
-                    {canEdit && (
-                      <Button onClick={openAddGoal} variant="primary">
-                        Add goal
-                      </Button>
-                    )}
-                    <div className="space-y-2">
-                      {goals.length === 0 ? (
-                        <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                          No goals yet. Add a goal to give custom events a display name in the dashboard.
-                        </div>
-                      ) : (
-                        goals.map((goal) => (
-                          <div
-                            key={goal.id}
-                            className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50"
-                          >
-                            <div>
-                              <span className="font-medium text-white">{goal.name}</span>
-                              <span className="text-neutral-400 text-sm ml-2">({goal.event_name})</span>
-                            </div>
-                            {canEdit && (
-                              <div className="flex items-center gap-2">
-                                <button
-                                  type="button"
-                                  onClick={() => openEditGoal(goal)}
-                                  className="text-sm text-brand-orange hover:underline"
-                                >
-                                  Edit
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => handleDeleteGoal(goal)}
-                                  className="text-sm text-red-600 dark:text-red-400 hover:underline"
-                                >
-                                  Delete
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        ))
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'notifications' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Notifications</h2>
-                  <p className="text-sm text-neutral-400">Configure how you receive reports and alerts.</p>
-                </div>
-
-                {/* Reports subsection */}
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-base font-medium text-white">Reports</h3>
-                      <p className="text-sm text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
-                    </div>
-                    {canEdit && (
-                      <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
-                        Add Report
-                      </Button>
-                    )}
-                  </div>
-
-                  {reportLoading ? (
-                    <div className="space-y-2">
-                      {Array.from({ length: 3 }).map((_, i) => (
-                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                      ))}
-                    </div>
-                  ) : reportSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                      No scheduled reports yet. Add a report to automatically receive analytics summaries.
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {reportSchedules.map((schedule) => (
-                        <div
-                          key={schedule.id}
-                          className={`rounded-xl border p-4 transition-colors ${
-                            schedule.enabled
-                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-start gap-3 min-w-0">
-                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                              </div>
-                              <div className="min-w-0">
-                                <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-white">
-                                    {getChannelLabel(schedule.channel)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
-                                    {getFrequencyLabel(schedule.frequency)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                                    {getReportTypeLabel(schedule.report_type)}
-                                  </span>
-                                </div>
-                                <p className="text-sm text-neutral-400 mt-1 truncate">
-                                  {schedule.channel === 'email'
-                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                    : (schedule.channel_config as WebhookConfig).url}
-                                </p>
-                                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                                  {getScheduleDescription(schedule)}
-                                </p>
-                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                  <span>
-                                    Last sent: {schedule.last_sent_at
-                                      ? formatDateTime(new Date(schedule.last_sent_at))
-                                      : 'Never'}
-                                  </span>
-                                </div>
-                                {schedule.last_error && (
-                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                    Error: {schedule.last_error}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {canEdit && (
-                              <div className="flex items-center gap-2 flex-shrink-0">
-                                <button
-                                  type="button"
-                                  onClick={() => handleReportTest(schedule)}
-                                  disabled={reportTesting === schedule.id}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                  title="Send test report"
-                                >
-                                  {reportTesting === schedule.id ? (
-                                    <SpinnerGap className="w-4 h-4 animate-spin" />
-                                  ) : (
-                                    <Play className="w-4 h-4" />
-                                  )}
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => openEditSchedule(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                  title="Edit schedule"
-                                >
-                                  <PencilSimple className="w-4 h-4" />
-                                </button>
-                                <label className="relative inline-flex items-center cursor-pointer">
-                                  <input
-                                    type="checkbox"
-                                    checked={schedule.enabled}
-                                    onChange={() => handleReportToggle(schedule)}
-                                    className="sr-only peer"
-                                  />
-                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                                </label>
-                                <button
-                                  type="button"
-                                  onClick={() => handleReportDelete(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                  title="Delete schedule"
-                                >
-                                  <Trash className="w-4 h-4" />
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-
-                {/* Divider */}
-                <div className="border-t border-neutral-200 dark:border-neutral-800" />
-
-                {/* Alerts subsection */}
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-base font-medium text-white">Alerts</h3>
-                      <p className="text-sm text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
-                    </div>
-                    {canEdit && (
-                      <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
-                        Add Alert Channel
-                      </Button>
-                    )}
-                  </div>
-
-                  {alertLoading ? (
-                    <div className="space-y-2">
-                      {Array.from({ length: 2 }).map((_, i) => (
-                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                      ))}
-                    </div>
-                  ) : alertSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                      No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {alertSchedules.map((schedule) => (
-                        <div
-                          key={schedule.id}
-                          className={`rounded-xl border p-4 transition-colors ${
-                            schedule.enabled
-                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-start gap-3 min-w-0">
-                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                              </div>
-                              <div className="min-w-0">
-                                <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-white">
-                                    {getChannelLabel(schedule.channel)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
-                                    Uptime Alert
-                                  </span>
-                                </div>
-                                <p className="text-sm text-neutral-400 mt-1 truncate">
-                                  {schedule.channel === 'email'
-                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                    : (schedule.channel_config as WebhookConfig).url}
-                                </p>
-                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                  <span>
-                                    Last sent: {schedule.last_sent_at
-                                      ? formatDateTime(new Date(schedule.last_sent_at))
-                                      : 'Never'}
-                                  </span>
-                                </div>
-                                {schedule.last_error && (
-                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                    Error: {schedule.last_error}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {canEdit && (
-                              <div className="flex items-center gap-2 flex-shrink-0">
-                                <button
-                                  type="button"
-                                  onClick={() => handleAlertTest(schedule)}
-                                  disabled={alertTesting === schedule.id}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                  title="Send test alert"
-                                >
-                                  {alertTesting === schedule.id ? (
-                                    <SpinnerGap className="w-4 h-4 animate-spin" />
-                                  ) : (
-                                    <Play className="w-4 h-4" />
-                                  )}
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => openEditAlert(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                  title="Edit alert channel"
-                                >
-                                  <PencilSimple className="w-4 h-4" />
-                                </button>
-                                <label className="relative inline-flex items-center cursor-pointer">
-                                  <input
-                                    type="checkbox"
-                                    checked={schedule.enabled}
-                                    onChange={() => handleAlertToggle(schedule)}
-                                    className="sr-only peer"
-                                  />
-                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                                </label>
-                                <button
-                                  type="button"
-                                  onClick={() => handleAlertDelete(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                  title="Delete alert channel"
-                                >
-                                  <Trash className="w-4 h-4" />
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'integrations' && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Integrations</h2>
-                  <p className="text-sm text-neutral-400">Connect external services to enrich your analytics data.</p>
-                </div>
-
-                {/* Google Search Console */}
-                <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-6">
-                  {!gscStatus?.connected ? (
-                    <div className="space-y-4">
-                      <div className="flex items-start gap-4">
-                        <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                          <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
-                            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" fill="#4285F4"/>
-                            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23Z" fill="#34A853"/>
-                            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62Z" fill="#FBBC05"/>
-                            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z" fill="#EA4335"/>
-                          </svg>
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
-                          <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
-                            See which search queries bring visitors to your site, with impressions, clicks, CTR, and ranking position.
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-start gap-2 p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                        <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-                        </svg>
-                        <p className="text-xs text-neutral-400">
-                          Pulse only requests read-only access. Your tokens are encrypted at rest and all data can be fully removed at any time.
-                        </p>
-                      </div>
-                      {canEdit && (
-                        <button
-                          onClick={async () => {
-                            setGscConnecting(true)
-                            try {
-                              const { auth_url } = await getGSCAuthURL(siteId)
-                              window.location.href = auth_url
-                            } catch (error: unknown) {
-                              toast.error(getAuthErrorMessage(error) || 'Failed to start Google authorization')
-                              setGscConnecting(false)
-                            }
-                          }}
-                          disabled={gscConnecting}
-                          className="inline-flex items-center gap-2 px-4 py-2.5 bg-brand-orange text-white text-sm font-medium rounded-xl hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50"
-                        >
-                          {gscConnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                          Connect Google Search Console
-                        </button>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-4">
-                          <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                            <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
-                              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" fill="#4285F4"/>
-                              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23Z" fill="#34A853"/>
-                              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62Z" fill="#FBBC05"/>
-                              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z" fill="#EA4335"/>
-                            </svg>
-                          </div>
-                          <div>
-                            <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
-                            <div className="flex items-center gap-2 mt-1.5">
-                              <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
-                                gscStatus.status === 'active'
-                                  ? 'text-green-600 dark:text-green-400'
-                                  : gscStatus.status === 'syncing'
-                                  ? 'text-amber-600 dark:text-amber-400'
-                                  : 'text-red-600 dark:text-red-400'
-                              }`}>
-                                <span className={`w-2 h-2 rounded-full ${
-                                  gscStatus.status === 'active'
-                                    ? 'bg-green-500'
-                                    : gscStatus.status === 'syncing'
-                                    ? 'bg-amber-500 animate-pulse'
-                                    : 'bg-red-500'
-                                }`} />
-                                {gscStatus.status === 'active' ? 'Connected' : gscStatus.status === 'syncing' ? 'Syncing...' : 'Error'}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        {gscStatus.google_email && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Google Account</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.google_email}</p>
-                          </div>
-                        )}
-                        {gscStatus.gsc_property && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Property</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
-                          </div>
-                        )}
-                        {gscStatus.last_synced_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(gscStatus.last_synced_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                        {gscStatus.created_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(gscStatus.created_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-
-                      {gscStatus.status === 'error' && gscStatus.error_message && (
-                        <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/30">
-                          <p className="text-sm text-red-700 dark:text-red-300">{gscStatus.error_message}</p>
-                        </div>
-                      )}
-
-                      {canEdit && (
-                        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
-                          <button
-                            onClick={async () => {
-                              if (!confirm('Disconnect Google Search Console? All search data will be removed from Pulse.')) return
-                              setGscDisconnecting(true)
-                              try {
-                                await disconnectGSC(siteId)
-                                mutateGSCStatus()
-                                toast.success('Google Search Console disconnected')
-                              } catch (error: unknown) {
-                                toast.error(getAuthErrorMessage(error) || 'Failed to disconnect')
-                              } finally {
-                                setGscDisconnecting(false)
-                              }
-                            }}
-                            disabled={gscDisconnecting}
-                            className="inline-flex items-center gap-2 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
-                          >
-                            {gscDisconnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                            Disconnect
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-
-                {/* BunnyCDN */}
-                <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-6">
-                  {!bunnyStatus?.connected ? (
-                    <div className="space-y-4">
-                      <div className="flex items-start gap-4">
-                        <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                          <svg className="w-6 h-6" viewBox="0 0 23 26" fill="none">
-                            <path fillRule="evenodd" clipRule="evenodd" d="M9.94 7.77l5.106.883c-3.83-.663-4.065-3.85-9.218-6.653-.562 1.859.603 5.21 4.112 5.77z" fill="url(#b1)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M5.828 2c5.153 2.803 5.388 5.99 9.218 6.653 1.922.332.186 3.612-1.864 3.266 3.684 1.252 7.044-2.085 5.122-3.132L5.828 2z" fill="url(#b2)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M13.186 11.92c-.241-.041-.486-.131-.731-.284-1.542-.959-3.093-1.269-4.496-1.118 2.93.359 5.716 4.196 5.37 7.036.06.97-.281 1.958-1.021 2.699l-1.69 1.69c1.303.858 3.284-.037 3.889-1.281l3.41-7.014c.836-.198 6.176-1.583 3.767-3.024l-3.37-1.833c1.907 1.05-1.449 4.378-5.125 3.129z" fill="url(#b3)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M7.953 10.518c-4.585.499-7.589 5.94-3.506 9.873l3.42 3.42c-2.243-2.243-2.458-5.525-1.073-7.806.149-.255.333-.495.551-.713 1.37-1.37 3.59-1.37 4.96 0 .629.628.969 1.436 1.02 2.26.346-2.84-2.439-6.675-5.367-7.035h-.005z" fill="url(#b4)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M7.868 23.812l1.925 1.925c.643-.511 1.028-2.01.031-3.006l-2.48-2.48c-1.151-1.151-1.334-2.903-.55-4.246-1.385 2.281-1.17 5.563 1.074 7.807z" fill="url(#b5)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M12.504 4.54l5.739 3.122L12.925.6c-.728.829-1.08 2.472-.421 3.94z" fill="url(#b6)"/>
-                            <circle cx="9.825" cy="17.772" r="1.306" fill="url(#b7)"/>
-                            <circle cx="1.507" cy="11.458" r="1.306" fill="url(#b8)"/>
-                            <defs>
-                              <linearGradient id="b1" x1="5.69" y1="8.5" x2="15.04" y2="8.5" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b2" x1="5.83" y1="12.65" x2="18.87" y2="12.65" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b3" x1="7.95" y1="22.04" x2="22.3" y2="22.04" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b4" x1="2.51" y1="22.59" x2="13.35" y2="22.59" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b5" x1="11.35" y1="20.74" x2="7.98" y2="17.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b6" x1="12.16" y1="7.48" x2="18.24" y2="7.48" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b7" x1="8.52" y1="19.08" x2="11.13" y2="19.08" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b8" x1=".2" y1="12.76" x2="2.81" y2="12.76" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
-                          <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
-                            Monitor CDN performance with bandwidth usage, cache hit rates, response times, and geographic distribution.
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-start gap-2 p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                        <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-                        </svg>
-                        <p className="text-xs text-neutral-400">
-                          Your API key is encrypted at rest and only used to fetch read-only statistics. You can disconnect at any time.
-                        </p>
-                      </div>
-                      {canEdit && (
-                        <div className="space-y-3">
-                          <div className="flex gap-2">
-                            <input
-                              type="password"
-                              value={bunnyApiKey}
-                              onChange={(e) => {
-                                setBunnyApiKey(e.target.value)
-                                setBunnyPullZones([])
-                                setBunnySelectedZone(null)
-                              }}
-                              placeholder="BunnyCDN API key"
-                              className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm placeholder:text-neutral-400"
-                            />
-                            <button
-                              onClick={async () => {
-                                if (!bunnyApiKey.trim()) {
-                                  toast.error('Please enter your BunnyCDN API key')
-                                  return
-                                }
-                                setBunnyLoadingZones(true)
-                                setBunnyPullZones([])
-                                setBunnySelectedZone(null)
-                                try {
-                                  const { pull_zones, message } = await getBunnyPullZones(siteId, bunnyApiKey)
-                                  if (pull_zones.length === 0) {
-                                    toast.error(message || 'No pull zones match this site\'s domain')
-                                  } else {
-                                    setBunnyPullZones(pull_zones)
-                                    setBunnySelectedZone(pull_zones[0])
-                                  }
-                                } catch (error: unknown) {
-                                  toast.error(getAuthErrorMessage(error) || 'Failed to load pull zones')
-                                } finally {
-                                  setBunnyLoadingZones(false)
-                                }
-                              }}
-                              disabled={bunnyLoadingZones || !bunnyApiKey.trim()}
-                              className="inline-flex items-center gap-2 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 text-sm font-medium rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors disabled:opacity-50"
-                            >
-                              {bunnyLoadingZones && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                              Load Zones
-                            </button>
-                          </div>
-
-                          {bunnyPullZones.length > 0 && (
-                            <div className="space-y-3">
-                              <div>
-                                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Pull Zone</label>
-                                <select
-                                  value={bunnySelectedZone?.id ?? ''}
-                                  onChange={(e) => {
-                                    const zone = bunnyPullZones.find(z => z.id === Number(e.target.value))
-                                    setBunnySelectedZone(zone || null)
-                                  }}
-                                  className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm"
-                                >
-                                  {bunnyPullZones.map((zone) => (
-                                    <option key={zone.id} value={zone.id}>{zone.name}</option>
-                                  ))}
-                                </select>
-                              </div>
-                              <button
-                                onClick={async () => {
-                                  if (!bunnySelectedZone) return
-                                  setBunnyConnecting(true)
-                                  try {
-                                    await connectBunny(siteId, bunnyApiKey, bunnySelectedZone.id, bunnySelectedZone.name)
-                                    mutateBunnyStatus()
-                                    setBunnyApiKey('')
-                                    setBunnyPullZones([])
-                                    setBunnySelectedZone(null)
-                                    toast.success('BunnyCDN connected successfully')
-                                  } catch (error: unknown) {
-                                    toast.error(getAuthErrorMessage(error) || 'Failed to connect BunnyCDN')
-                                  } finally {
-                                    setBunnyConnecting(false)
-                                  }
-                                }}
-                                disabled={bunnyConnecting || !bunnySelectedZone}
-                                className="inline-flex items-center gap-2 px-4 py-2.5 bg-brand-orange text-white text-sm font-medium rounded-xl hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50"
-                              >
-                                {bunnyConnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                                Connect BunnyCDN
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-4">
-                          <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                            <svg className="w-6 h-6" viewBox="0 0 23 26" fill="none">
-                              <path fillRule="evenodd" clipRule="evenodd" d="M9.94 7.77l5.106.883c-3.83-.663-4.065-3.85-9.218-6.653-.562 1.859.603 5.21 4.112 5.77z" fill="url(#b1c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M5.828 2c5.153 2.803 5.388 5.99 9.218 6.653 1.922.332.186 3.612-1.864 3.266 3.684 1.252 7.044-2.085 5.122-3.132L5.828 2z" fill="url(#b2c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M13.186 11.92c-.241-.041-.486-.131-.731-.284-1.542-.959-3.093-1.269-4.496-1.118 2.93.359 5.716 4.196 5.37 7.036.06.97-.281 1.958-1.021 2.699l-1.69 1.69c1.303.858 3.284-.037 3.889-1.281l3.41-7.014c.836-.198 6.176-1.583 3.767-3.024l-3.37-1.833c1.907 1.05-1.449 4.378-5.125 3.129z" fill="url(#b3c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M7.953 10.518c-4.585.499-7.589 5.94-3.506 9.873l3.42 3.42c-2.243-2.243-2.458-5.525-1.073-7.806.149-.255.333-.495.551-.713 1.37-1.37 3.59-1.37 4.96 0 .629.628.969 1.436 1.02 2.26.346-2.84-2.439-6.675-5.367-7.035h-.005z" fill="url(#b4c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M7.868 23.812l1.925 1.925c.643-.511 1.028-2.01.031-3.006l-2.48-2.48c-1.151-1.151-1.334-2.903-.55-4.246-1.385 2.281-1.17 5.563 1.074 7.807z" fill="url(#b5c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M12.504 4.54l5.739 3.122L12.925.6c-.728.829-1.08 2.472-.421 3.94z" fill="url(#b6c)"/>
-                              <circle cx="9.825" cy="17.772" r="1.306" fill="url(#b7c)"/>
-                              <circle cx="1.507" cy="11.458" r="1.306" fill="url(#b8c)"/>
-                              <defs>
-                                <linearGradient id="b1c" x1="5.69" y1="8.5" x2="15.04" y2="8.5" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b2c" x1="5.83" y1="12.65" x2="18.87" y2="12.65" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b3c" x1="7.95" y1="22.04" x2="22.3" y2="22.04" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b4c" x1="2.51" y1="22.59" x2="13.35" y2="22.59" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b5c" x1="11.35" y1="20.74" x2="7.98" y2="17.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b6c" x1="12.16" y1="7.48" x2="18.24" y2="7.48" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b7c" x1="8.52" y1="19.08" x2="11.13" y2="19.08" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b8c" x1=".2" y1="12.76" x2="2.81" y2="12.76" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              </defs>
-                            </svg>
-                          </div>
-                          <div>
-                            <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
-                            <div className="flex items-center gap-2 mt-1.5">
-                              <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
-                                bunnyStatus.status === 'active'
-                                  ? 'text-green-600 dark:text-green-400'
-                                  : bunnyStatus.status === 'syncing'
-                                  ? 'text-amber-600 dark:text-amber-400'
-                                  : 'text-red-600 dark:text-red-400'
-                              }`}>
-                                <span className={`w-2 h-2 rounded-full ${
-                                  bunnyStatus.status === 'active'
-                                    ? 'bg-green-500'
-                                    : bunnyStatus.status === 'syncing'
-                                    ? 'bg-amber-500 animate-pulse'
-                                    : 'bg-red-500'
-                                }`} />
-                                {bunnyStatus.status === 'active' ? 'Connected' : bunnyStatus.status === 'syncing' ? 'Syncing...' : 'Error'}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        {bunnyStatus.pull_zone_name && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Pull Zone</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
-                          </div>
-                        )}
-                        {bunnyStatus.last_synced_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(bunnyStatus.last_synced_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                        {bunnyStatus.created_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(bunnyStatus.created_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-
-                      {bunnyStatus.status === 'error' && bunnyStatus.error_message && (
-                        <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/30">
-                          <p className="text-sm text-red-700 dark:text-red-300">{bunnyStatus.error_message}</p>
-                        </div>
-                      )}
-
-                      {canEdit && (
-                        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
-                          <button
-                            onClick={async () => {
-                              if (!confirm('Disconnect BunnyCDN? All CDN analytics data will be removed from Pulse.')) return
-                              setBunnyDisconnecting(true)
-                              try {
-                                await disconnectBunny(siteId)
-                                mutateBunnyStatus()
-                                toast.success('BunnyCDN disconnected')
-                              } catch (error: unknown) {
-                                toast.error(getAuthErrorMessage(error) || 'Failed to disconnect')
-                              } finally {
-                                setBunnyDisconnecting(false)
-                              }
-                            }}
-                            disabled={bunnyDisconnecting}
-                            className="inline-flex items-center gap-2 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
-                          >
-                            {bunnyDisconnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                            Disconnect
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </motion.div>
-        </div>
-      </div>
-    </div>
-
-      <Modal
-        isOpen={goalModalOpen}
-        onClose={() => setGoalModalOpen(false)}
-        title={editingGoal ? 'Edit goal' : 'Add goal'}
-      >
-        <form onSubmit={handleGoalSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Display name</label>
-            <input
-              type="text"
-              value={goalForm.name}
-              onChange={(e) => setGoalForm({ ...goalForm, name: e.target.value })}
-              placeholder="e.g. Signups"
-              autoFocus
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-              required
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Event name</label>
-            <input
-              type="text"
-              value={goalForm.event_name}
-              onChange={(e) => setGoalForm({ ...goalForm, event_name: e.target.value })}
-              placeholder="e.g. signup_click (letters, numbers, underscores only)"
-              maxLength={64}
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-              required
-            />
-            <div className="flex justify-between mt-1">
-              <p className="text-xs text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
-              <span className={`text-xs tabular-nums ${goalForm.event_name.length > 56 ? 'text-amber-500' : 'text-neutral-400'}`}>{goalForm.event_name.length}/64</span>
-            </div>
-            {editingGoal && goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_') !== editingGoal.event_name && (
-              <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">Changing event name does not reassign events already tracked under the previous name.</p>
-            )}
-          </div>
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setGoalModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={goalSaving}>
-              {goalSaving ? 'Saving…' : editingGoal ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <Modal
-        isOpen={reportModalOpen}
-        onClose={() => setReportModalOpen(false)}
-        title={editingSchedule ? 'Edit report schedule' : 'Add report schedule'}
-      >
-        <form onSubmit={handleReportSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
-            <div className="grid grid-cols-2 gap-2">
-              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
-                <button
-                  key={ch}
-                  type="button"
-                  onClick={() => setReportForm({ ...reportForm, channel: ch })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                    reportForm.channel === ch
-                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
-                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
-                  }`}
-                >
-                  {CHANNEL_ICONS[ch]}
-                  {getChannelLabel(ch)}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {reportForm.channel === 'email' ? (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
-              <input
-                type="text"
-                value={reportForm.recipients}
-                onChange={(e) => setReportForm({ ...reportForm, recipients: e.target.value })}
-                placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
-            </div>
-          ) : (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                {reportForm.channel === 'slack' ? 'Slack Webhook URL' : reportForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
-              </label>
-              <input
-                type="url"
-                value={reportForm.webhookUrl}
-                onChange={(e) => setReportForm({ ...reportForm, webhookUrl: e.target.value })}
-                placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Frequency</label>
-            <Select
-              value={reportForm.frequency}
-              onChange={(v) => setReportForm({ ...reportForm, frequency: v })}
-              options={[
-                { value: 'daily', label: 'Daily' },
-                { value: 'weekly', label: 'Weekly' },
-                { value: 'monthly', label: 'Monthly' },
-              ]}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          {reportForm.frequency === 'weekly' && (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Day of week</label>
-              <Select
-                value={String(reportForm.sendDay)}
-                onChange={(v) => setReportForm({ ...reportForm, sendDay: parseInt(v) })}
-                options={WEEKDAY_NAMES.map((name, i) => ({ value: String(i), label: name }))}
-                variant="input"
-                fullWidth
-                align="left"
-              />
-            </div>
-          )}
-
-          {reportForm.frequency === 'monthly' && (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Day of month</label>
-              <Select
-                value={String(reportForm.sendDay)}
-                onChange={(v) => setReportForm({ ...reportForm, sendDay: parseInt(v) })}
-                options={Array.from({ length: 28 }, (_, i) => {
-                  const d = i + 1
-                  const suffix = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th'
-                  return { value: String(d), label: `${d}${suffix}` }
-                })}
-                variant="input"
-                fullWidth
-                align="left"
-              />
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Time</label>
-            <Select
-              value={String(reportForm.sendHour)}
-              onChange={(v) => setReportForm({ ...reportForm, sendHour: parseInt(v) })}
-              options={Array.from({ length: 24 }, (_, i) => ({
-                value: String(i),
-                label: formatHour(i),
-              }))}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Timezone</label>
-            <Select
-              value={reportForm.timezone || 'UTC'}
-              onChange={(v) => setReportForm({ ...reportForm, timezone: v })}
-              options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Report Type</label>
-            <Select
-              value={reportForm.reportType}
-              onChange={(v) => setReportForm({ ...reportForm, reportType: v })}
-              options={[
-                { value: 'summary', label: 'Summary' },
-                { value: 'pages', label: 'Pages' },
-                { value: 'sources', label: 'Sources' },
-                { value: 'goals', label: 'Goals' },
-              ]}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setReportModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={reportSaving}>
-              {reportSaving ? 'Saving...' : editingSchedule ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <Modal
-        isOpen={alertModalOpen}
-        onClose={() => setAlertModalOpen(false)}
-        title={editingAlert ? 'Edit alert channel' : 'Add alert channel'}
-      >
-        <form onSubmit={handleAlertSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
-            <div className="grid grid-cols-2 gap-2">
-              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
-                <button
-                  key={ch}
-                  type="button"
-                  onClick={() => setAlertForm({ ...alertForm, channel: ch })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                    alertForm.channel === ch
-                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
-                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
-                  }`}
-                >
-                  {CHANNEL_ICONS[ch]}
-                  {getChannelLabel(ch)}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {alertForm.channel === 'email' ? (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
-              <input
-                type="text"
-                value={alertForm.recipients}
-                onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
-                placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
-            </div>
-          ) : (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                {alertForm.channel === 'slack' ? 'Slack Webhook URL' : alertForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
-              </label>
-              <input
-                type="url"
-                value={alertForm.webhookUrl}
-                onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
-                placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-            </div>
-          )}
-
-          <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-            <p className="text-xs text-neutral-400">
-              Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
-            </p>
-          </div>
-
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setAlertModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={alertSaving}>
-              {alertSaving ? 'Saving...' : editingAlert ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <VerificationModal
-        isOpen={showVerificationModal}
-        onClose={() => setShowVerificationModal(false)}
-        site={site}
-        onVerified={() => mutateSite()}
-      />
-
-      <DeleteSiteModal
-        open={showDeleteModal}
-        onClose={() => setShowDeleteModal(false)}
-        onDeleted={() => router.push('/')}
-        siteName={site?.name || ''}
-        siteDomain={site?.domain || ''}
-        siteId={siteId}
-      />
+    <div className="flex items-center justify-center py-24">
+      <Spinner className="w-6 h-6 text-neutral-500" />
     </div>
   )
 }
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 9eceb86..700caa6 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -431,6 +431,7 @@ export default function Chart({
                 xDataKey="dateObj"
                 aspectRatio="2.5 / 1"
                 margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
+                animationDuration={400}
               >
                 <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
                 <VisxArea
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 0f5b7d9..f65c63c 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -327,6 +327,38 @@ function NavLink({
   )
 }
 
+// ─── Settings Button (opens unified modal instead of navigating) ─────
+
+function SettingsButton({
+  item, collapsed, onClick,
+}: {
+  item: NavItem; collapsed: boolean; onClick?: () => void
+}) {
+  const { openUnifiedSettings } = useUnifiedSettings()
+
+  return (
+    <div className="relative group/nav">
+      <button
+        onClick={() => {
+          openUnifiedSettings({ context: 'site', tab: 'general' })
+          onClick?.()
+        }}
+        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <item.icon className="w-[18px] h-[18px]" weight="regular" />
+        </span>
+        <Label collapsed={collapsed}>{item.label}</Label>
+      </button>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {item.label}
+        </span>
+      )}
+    </div>
+  )
+}
+
 // ─── Sidebar Content ────────────────────────────────────────
 
 interface SidebarContentProps {
@@ -347,12 +379,13 @@ interface SidebarContentProps {
   orgs: OrganizationMember[]
   onSwitchOrganization: (orgId: string | null) => Promise<void>
   openSettings: () => void
+  openOrgSettings: () => void
 }
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
   onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
-  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
+  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
 }: SidebarContentProps) {
   const router = useRouter()
   const c = isMobile ? false : collapsed
@@ -401,7 +434,7 @@ function SidebarContent({
                 <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
               ))}
               {group.label === 'Infrastructure' && canEdit && (
-                <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+                <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
               )}
             </div>
           </div>
@@ -432,6 +465,7 @@ function SidebarContent({
               onCreateOrganization={() => router.push('/onboarding')}
               allowPersonalOrganization={false}
               onOpenSettings={openSettings}
+              onOpenOrgSettings={openOrgSettings}
               compact
               anchor="right"
             >
@@ -533,6 +567,7 @@ export default function Sidebar({
           orgs={orgs}
           onSwitchOrganization={handleSwitchOrganization}
           openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
         />
       </aside>
 
@@ -576,6 +611,7 @@ export default function Sidebar({
               orgs={orgs}
               onSwitchOrganization={handleSwitchOrganization}
               openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
             />
           </aside>
         </>
diff --git a/components/dashboard/SiteNav.tsx b/components/dashboard/SiteNav.tsx
index e8eb496..0ee505f 100644
--- a/components/dashboard/SiteNav.tsx
+++ b/components/dashboard/SiteNav.tsx
@@ -4,7 +4,6 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
-import { useAuth } from '@/lib/auth/context'
 
 interface SiteNavProps {
   siteId: string
@@ -13,8 +12,6 @@ interface SiteNavProps {
 export default function SiteNav({ siteId }: SiteNavProps) {
   const pathname = usePathname()
   const handleTabKeyDown = useTabListKeyboard()
-  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
 
   const tabs = [
     { label: 'Dashboard', href: `/sites/${siteId}` },
@@ -24,7 +21,6 @@ export default function SiteNav({ siteId }: SiteNavProps) {
     { label: 'Search', href: `/sites/${siteId}/search` },
     { label: 'CDN', href: `/sites/${siteId}/cdn` },
     { label: 'Uptime', href: `/sites/${siteId}/uptime` },
-    ...(canEdit ? [{ label: 'Settings', href: `/sites/${siteId}/settings` }] : []),
   ]
 
   const isActive = (href: string) => {
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 749979c..cf7f00c 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -12,6 +12,7 @@ import { listNotifications, markNotificationRead, markAllNotificationsRead, type
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { SettingsIcon } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { SkeletonLine, SkeletonCircle } from '@/components/skeletons'
 
 // * Bell icon (simple SVG, no extra deps)
@@ -58,6 +59,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null)
+  const { openUnifiedSettings } = useUnifiedSettings()
 
   const updatePosition = useCallback(() => {
     if (anchor === 'right' && buttonRef.current) {
@@ -319,14 +321,16 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
               >
                 View all
               </Link>
-              <Link
-                href="/org-settings?tab=notifications"
-                onClick={() => setOpen(false)}
-                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+              <button
+                onClick={() => {
+                  setOpen(false)
+                  openUnifiedSettings({ context: 'workspace', tab: 'notifications' })
+                }}
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
               >
                 <SettingsIcon className="w-4 h-4" aria-hidden="true" />
                 Manage settings
-              </Link>
+              </button>
             </div>
           </motion.div>
             )}
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
deleted file mode 100644
index 708931e..0000000
--- a/components/settings/OrganizationSettings.tsx
+++ /dev/null
@@ -1,1577 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { setSessionAction } from '@/app/actions/auth'
-import { logger } from '@/lib/utils/logger'
-import { useAuth } from '@/lib/auth/context'
-import { 
-  deleteOrganization, 
-  switchContext, 
-  getOrganizationMembers, 
-  getInvitations, 
-  sendInvitation, 
-  revokeInvitation,
-  updateOrganization,
-  getOrganization,
-  OrganizationMember,
-  OrganizationInvitation,
-  Organization
-} from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getOrders, cancelSubscription, resumeSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Order } from '@/lib/api/billing'
-import { TRAFFIC_TIERS, PLAN_ID_SOLO, PLAN_ID_TEAM, PLAN_ID_BUSINESS, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
-import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
-import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
-import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { formatDate, formatDateTime, formatDateLong } from '@/lib/utils/formatDate'
-import { motion, AnimatePresence } from 'framer-motion'
-import {
-  AlertTriangleIcon,
-  PlusIcon,
-  BoxIcon,
-  UserIcon,
-  CheckIcon,
-  XIcon,
-  Captcha,
-  BookOpenIcon,
-  ExternalLinkIcon,
-  LayoutDashboardIcon,
-  Spinner,
-} from '@ciphera-net/ui'
-import { MembersListSkeleton, InvoicesListSkeleton, AuditLogSkeleton, SettingsFormSkeleton, SkeletonCard } from '@/components/skeletons'
-
-// * Bell icon for notifications tab
-function BellIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-  )
-}
-import { Button, Input } from '@ciphera-net/ui'
-
-export default function OrganizationSettings() {
-  const { user } = useAuth()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  // Initialize from URL, default to 'general'
-  const [activeTab, setActiveTab] = useState<'general' | 'members' | 'billing' | 'notifications' | 'audit'>(() => {
-    const tab = searchParams.get('tab')
-    return (tab === 'billing' || tab === 'members' || tab === 'notifications' || tab === 'audit') ? tab : 'general'
-  })
-
-  // Sync URL with state without triggering navigation/reload
-  const handleTabChange = (tab: 'general' | 'members' | 'billing' | 'notifications' | 'audit') => {
-    setActiveTab(tab)
-    const url = new URL(window.location.href)
-    url.searchParams.set('tab', tab)
-    window.history.replaceState({}, '', url)
-  }
-
-  const [showDeletePrompt, setShowDeletePrompt] = useState(false)
-  const [deleteConfirm, setDeleteConfirm] = useState('')
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isLoadingDeleteData, setIsLoadingDeleteData] = useState(false)
-
-  // Members State
-  const [members, setMembers] = useState<OrganizationMember[]>([])
-  const [invitations, setInvitations] = useState<OrganizationInvitation[]>([])
-  const [isLoadingMembers, setIsLoadingMembers] = useState(true)
-  
-  // Billing State
-  const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
-  const [isLoadingSubscription, setIsLoadingSubscription] = useState(false)
-  const [isRedirectingToPortal, setIsRedirectingToPortal] = useState(false)
-  const [cancelLoadingAction, setCancelLoadingAction] = useState<'period_end' | 'immediate' | null>(null)
-  const [showCancelPrompt, setShowCancelPrompt] = useState(false)
-  const [isResuming, setIsResuming] = useState(false)
-  const [showChangePlanModal, setShowChangePlanModal] = useState(false)
-  const [changePlanId, setChangePlanId] = useState<string>(PLAN_ID_SOLO)
-  const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
-  const [changePlanYearly, setChangePlanYearly] = useState(false)
-  const [isChangingPlan, setIsChangingPlan] = useState(false)
-  const [orders, setOrders] = useState<Order[]>([])
-  const [isLoadingInvoices, setIsLoadingInvoices] = useState(false)
-
-  // Invite State
-  const [inviteEmail, setInviteEmail] = useState('')
-  const [inviteRole, setInviteRole] = useState('member')
-  const [isInviting, setIsInviting] = useState(false)
-  
-  // Captcha State
-  const [captchaId, setCaptchaId] = useState('')
-  const [captchaSolution, setCaptchaSolution] = useState('')
-  const [captchaToken, setCaptchaToken] = useState('')
-
-  // Org Update State
-  const [orgDetails, setOrgDetails] = useState<Organization | null>(null)
-  const [isEditing, setIsEditing] = useState(false)
-  const [orgName, setOrgName] = useState('')
-  const [orgSlug, setOrgSlug] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-
-  // Audit log State
-  const [auditEntries, setAuditEntries] = useState<AuditLogEntry[]>([])
-  const [auditTotal, setAuditTotal] = useState(0)
-  const [isLoadingAudit, setIsLoadingAudit] = useState(false)
-  const [auditPage, setAuditPage] = useState(0)
-  const [auditFetchTrigger, setAuditFetchTrigger] = useState(0)
-  const auditPageSize = 20
-  const [auditActionFilter, setAuditActionFilter] = useState('')
-  const [auditLogIdFilter, setAuditLogIdFilter] = useState('')
-  const [auditStartDate, setAuditStartDate] = useState('')
-  const [auditEndDate, setAuditEndDate] = useState('')
-
-  // Notification settings state
-  const [notificationSettings, setNotificationSettings] = useState<Record<string, boolean>>({})
-  const [notificationCategories, setNotificationCategories] = useState<{ id: string; label: string; description: string }[]>([])
-  const [isLoadingNotificationSettings, setIsLoadingNotificationSettings] = useState(false)
-  const [isSavingNotificationSettings, setIsSavingNotificationSettings] = useState(false)
-
-  // Refs for filters to keep loadAudit stable and avoid rapid re-renders
-  const filtersRef = useRef({
-    action: auditActionFilter,
-    logId: auditLogIdFilter,
-    startDate: auditStartDate,
-    endDate: auditEndDate
-  })
-
-  // Update refs when state changes (no useEffect needed)
-  filtersRef.current = {
-    action: auditActionFilter,
-    logId: auditLogIdFilter,
-    startDate: auditStartDate,
-    endDate: auditEndDate
-  }
-
-  const getOrgIdFromToken = () => {
-    return user?.org_id || null
-  }
-
-  const currentOrgId = getOrgIdFromToken()
-
-  const loadMembers = useCallback(async () => {
-    if (!currentOrgId) {
-      setIsLoadingMembers(false)
-      return
-    }
-    setIsLoadingMembers(true)
-    try {
-      const [membersData, invitesData, orgData] = await Promise.all([
-        getOrganizationMembers(currentOrgId),
-        getInvitations(currentOrgId),
-        getOrganization(currentOrgId)
-      ])
-      setMembers(membersData)
-      setInvitations(invitesData)
-      setOrgDetails(orgData)
-      setOrgName(orgData.name)
-      setOrgSlug(orgData.slug)
-    } catch (error) {
-      logger.error('Failed to load data:', error)
-      // toast.error('Failed to load members')
-    } finally {
-      setIsLoadingMembers(false)
-    }
-  }, [currentOrgId])
-
-  const loadSubscription = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingSubscription(true)
-    try {
-      const sub = await getSubscription()
-      setSubscription(sub)
-    } catch (error) {
-      logger.error('Failed to load subscription:', error)
-      // toast.error('Failed to load subscription details')
-    } finally {
-      setIsLoadingSubscription(false)
-    }
-  }, [currentOrgId])
-
-  const loadOrders = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingInvoices(true)
-    try {
-      const ords = await getOrders()
-      setOrders(ords)
-    } catch (error) {
-      logger.error('Failed to load orders:', error)
-    } finally {
-      setIsLoadingInvoices(false)
-    }
-  }, [currentOrgId])
-
-  useEffect(() => {
-    if (currentOrgId) {
-      loadMembers()
-    } else {
-      setIsLoadingMembers(false)
-    }
-  }, [currentOrgId, loadMembers])
-
-  // Removed useEffect that syncs searchParams to activeTab to prevent flickering
-  // The initial state is already set from searchParams, and handleTabChange updates the URL manually
-  /* 
-  useEffect(() => {
-    const tab = searchParams.get('tab')
-    const validTab = (tab === 'billing' || tab === 'members' || tab === 'audit') ? tab : 'general'
-    if (validTab !== activeTab) {
-      setActiveTab(validTab)
-    }
-  }, [searchParams, activeTab])
-  */
-
-  useEffect(() => {
-    if (activeTab === 'billing' && currentOrgId) {
-      loadSubscription()
-      loadOrders()
-    }
-  }, [activeTab, currentOrgId, loadSubscription, loadOrders])
-
-  const loadAudit = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingAudit(true)
-    try {
-      const params: GetAuditLogParams = {
-        limit: auditPageSize,
-        offset: auditPage * auditPageSize,
-      }
-      if (filtersRef.current.action) params.action = filtersRef.current.action
-      if (filtersRef.current.logId) params.log_id = filtersRef.current.logId
-      if (filtersRef.current.startDate) params.start_date = filtersRef.current.startDate
-      if (filtersRef.current.endDate) params.end_date = filtersRef.current.endDate
-      const { entries, total } = await getAuditLog(params)
-      setAuditEntries(Array.isArray(entries) ? entries : [])
-      setAuditTotal(typeof total === 'number' ? total : 0)
-    } catch (error) {
-      logger.error('Failed to load audit log', error)
-      toast.error(getAuthErrorMessage(error as Error) || 'Failed to load audit log entries')
-    } finally {
-      setIsLoadingAudit(false)
-    }
-  }, [currentOrgId, auditPage])
-
-  // Debounced filter change handler
-  useEffect(() => {
-    if (activeTab !== 'audit') return
-    
-    const timer = setTimeout(() => {
-        setAuditPage(0) // Reset page on filter change
-        setAuditFetchTrigger(prev => prev + 1) // Trigger fetch
-    }, 500)
-    return () => clearTimeout(timer)
-  }, [auditActionFilter, auditLogIdFilter, auditStartDate, auditEndDate])
-
-  useEffect(() => {
-    if (activeTab === 'audit' && currentOrgId) {
-      loadAudit()
-    }
-  }, [activeTab, currentOrgId, loadAudit, auditFetchTrigger])
-
-  const loadNotificationSettings = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingNotificationSettings(true)
-    try {
-      const res = await getNotificationSettings()
-      setNotificationSettings(res.settings || {})
-      setNotificationCategories(res.categories || [])
-    } catch (error) {
-      logger.error('Failed to load notification settings', error)
-      toast.error(getAuthErrorMessage(error as Error) || 'Failed to load notification settings')
-    } finally {
-      setIsLoadingNotificationSettings(false)
-    }
-  }, [currentOrgId])
-
-  useEffect(() => {
-    if (activeTab === 'notifications' && currentOrgId && user?.role !== 'member') {
-      loadNotificationSettings()
-    }
-  }, [activeTab, currentOrgId, loadNotificationSettings, user?.role])
-
-  // * Redirect members away from Notifications tab (owners/admins only)
-  useEffect(() => {
-    if (activeTab === 'notifications' && user?.role === 'member') {
-      handleTabChange('general')
-    }
-  }, [activeTab, user?.role, handleTabChange])
-
-  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
-
-  useEffect(() => {
-    if (!showChangePlanModal || !hasActiveSubscription) {
-      return
-    }
-  }, [showChangePlanModal, hasActiveSubscription, changePlanId, changePlanTierIndex, changePlanYearly])
-
-  // If no org ID, we are in personal organization context, so don't show org settings
-  if (!currentOrgId) {
-    return (
-        <div className="p-6 text-center text-neutral-400">
-            <p>You are in your personal context. Switch to an Organization to manage its settings.</p>
-        </div>
-    )
-  }
-
-  const handleManageSubscription = async () => {
-    setIsRedirectingToPortal(true)
-    try {
-      const { url } = await createPortalSession()
-      window.location.href = url
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to open billing portal')
-      setIsRedirectingToPortal(false)
-    }
-  }
-
-  const handleCancelSubscription = async (atPeriodEnd: boolean) => {
-    setCancelLoadingAction(atPeriodEnd ? 'period_end' : 'immediate')
-    try {
-      await cancelSubscription({ at_period_end: atPeriodEnd })
-      toast.success(atPeriodEnd ? 'Subscription will cancel at the end of the billing period.' : 'Subscription canceled.')
-      setShowCancelPrompt(false)
-      loadSubscription()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to cancel subscription')
-    } finally {
-      setCancelLoadingAction(null)
-    }
-  }
-
-  const handleResumeSubscription = async () => {
-    setIsResuming(true)
-    try {
-      await resumeSubscription()
-      toast.success('Subscription will continue. Cancellation has been undone.')
-      loadSubscription()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to resume subscription')
-    } finally {
-      setIsResuming(false)
-    }
-  }
-
-  const openChangePlanModal = () => {
-    const currentPlan = subscription?.plan_id
-    if (currentPlan === PLAN_ID_TEAM || currentPlan === PLAN_ID_BUSINESS) {
-      setChangePlanId(currentPlan)
-    } else {
-      setChangePlanId(PLAN_ID_SOLO)
-    }
-    if (subscription?.pageview_limit != null && subscription.pageview_limit > 0) {
-      setChangePlanTierIndex(getTierIndexForLimit(subscription.pageview_limit))
-    } else {
-      setChangePlanTierIndex(2)
-    }
-    setChangePlanYearly(subscription?.billing_interval === 'year')
-    setShowChangePlanModal(true)
-  }
-
-  const handleChangePlanSubmit = async () => {
-    const interval = changePlanYearly ? 'year' : 'month'
-    const limit = getLimitForTierIndex(changePlanTierIndex)
-    setIsChangingPlan(true)
-    try {
-      if (hasActiveSubscription) {
-        await changePlan({ plan_id: changePlanId, interval, limit })
-        toast.success('Plan updated. Changes may take a moment to reflect.')
-        setShowChangePlanModal(false)
-        loadSubscription()
-      } else {
-        const { url } = await createCheckoutSession({ plan_id: changePlanId, interval, limit })
-        if (url) window.location.href = url
-        else throw new Error('No checkout URL')
-      }
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to update plan')
-    } finally {
-      setIsChangingPlan(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (deleteConfirm !== 'DELETE') return
-    
-    setIsDeleting(true)
-    try {
-      await deleteOrganization(currentOrgId)
-      toast.success('Organization deleted successfully')
-      
-      // * Clear sticky session
-      localStorage.removeItem('active_org_id')
-      
-      // * Switch to personal context explicitly
-      try {
-        const { access_token } = await switchContext(null)
-        await setSessionAction(access_token)
-        sessionStorage.setItem('pulse_switching_org', 'true')
-        window.location.href = '/'
-      } catch (switchErr) {
-        logger.error('Failed to switch to personal context after delete:', switchErr)
-        sessionStorage.setItem('pulse_switching_org', 'true')
-        window.location.href = '/'
-      }
-      
-    } catch (err: unknown) {
-      logger.error(err)
-      toast.error(getAuthErrorMessage(err) || (err instanceof Error ? err.message : '') || 'Failed to delete organization')
-      setIsDeleting(false)
-    }
-  }
-
-  const handleSendInvite = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!inviteEmail) return
-
-    if (!captchaToken) {
-        toast.error('Please complete the security check')
-        return
-    }
-
-    setIsInviting(true)
-    try {
-      await sendInvitation(currentOrgId, inviteEmail, inviteRole, {
-        captcha_id: captchaId,
-        captcha_solution: captchaSolution,
-        captcha_token: captchaToken
-      })
-      toast.success(`Invitation sent to ${inviteEmail}`)
-      setInviteEmail('')
-      // Reset captcha
-      setCaptchaId('')
-      setCaptchaSolution('')
-      setCaptchaToken('')
-      loadMembers() // Refresh list
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to send invitation')
-    } finally {
-      setIsInviting(false)
-    }
-  }
-
-  const handleRevokeInvite = async (inviteId: string) => {
-    try {
-      await revokeInvitation(currentOrgId, inviteId)
-      toast.success('Invitation revoked')
-      loadMembers() // Refresh list
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to revoke invitation')
-    }
-  }
-
-  const handleUpdateOrg = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!currentOrgId) return
-
-    setIsSaving(true)
-    try {
-      await updateOrganization(currentOrgId, orgName, orgSlug)
-      toast.success('Organization updated successfully')
-      setIsEditing(false)
-      loadMembers() 
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to save organization settings')
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  // Helper to find current org name (from members list if available, or just fallback)
-  // Ideally we'd have a full org object, but we have ID. 
-  // We can find the current user's membership entry which has org name.
-  const currentOrgName = members.find(m => m.user_id === user?.id)?.organization_name || 'Organization'
-
-  // handleTabChange is defined above
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-2xl font-bold text-white">Organization Settings</h1>
-        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-          Manage your organization workspace and members.
-        </p>
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-8">
-        {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Organization settings sections">
-          <button
-            onClick={() => handleTabChange('general')}
-            role="tab"
-            aria-selected={activeTab === 'general'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'general'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BoxIcon className="w-5 h-5" />
-            General
-          </button>
-          <button
-            onClick={() => handleTabChange('members')}
-            role="tab"
-            aria-selected={activeTab === 'members'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'members'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <UserIcon className="w-5 h-5" />
-            Members
-          </button>
-          <button
-            onClick={() => handleTabChange('billing')}
-            role="tab"
-            aria-selected={activeTab === 'billing'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'billing'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BoxIcon className="w-5 h-5" />
-            Billing
-          </button>
-          {(user?.role === 'owner' || user?.role === 'admin') && (
-            <button
-              onClick={() => handleTabChange('notifications')}
-              role="tab"
-              aria-selected={activeTab === 'notifications'}
-              className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-                activeTab === 'notifications'
-                  ? 'bg-brand-orange/10 text-brand-orange'
-                  : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-              }`}
-            >
-              <BellIcon className="w-5 h-5" />
-              Notifications
-            </button>
-          )}
-          <button
-            onClick={() => handleTabChange('audit')}
-            role="tab"
-            aria-selected={activeTab === 'audit'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'audit'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <LayoutDashboardIcon className="w-5 h-5" />
-            Audit log
-          </button>
-        </nav>
-
-        {/* Content Area - no min-w-0 so it uses full available width and table doesn't get cramped */}
-        <div className="flex-1 relative">
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.2 }}
-            className="w-full bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm"
-          >
-            {activeTab === 'general' && (
-              <div className="space-y-12">
-                 <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">General Information</h2>
-                    <p className="text-sm text-neutral-400">Basic details about your organization.</p>
-                  </div>
-
-                 <form onSubmit={handleUpdateOrg} className="space-y-4">
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Organization Name
-                      </label>
-                      <Input
-                        type="text"
-                        value={orgName}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrgName(e.target.value)}
-                        required
-                        minLength={2}
-                        maxLength={50}
-                        disabled={!isEditing}
-                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
-                      />
-                    </div>
-                    
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Organization Slug
-                      </label>
-                      <div className="flex rounded-xl shadow-sm">
-                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-400 text-sm">
-                          pulse.ciphera.net/
-                        </span>
-                        <Input
-                          type="text"
-                          value={orgSlug}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrgSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
-                          required
-                          minLength={3}
-                          maxLength={30}
-                          disabled={!isEditing}
-                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
-                        />
-                      </div>
-                      <p className="text-xs text-neutral-400">
-                        Changing the slug will change your organization's URL.
-                      </p>
-                    </div>
-
-                    <div className="flex justify-end gap-3">
-                        {!isEditing ? (
-                            <Button type="button" onClick={() => setIsEditing(true)}>
-                                Edit Details
-                            </Button>
-                        ) : (
-                            <>
-                                <Button 
-                                    type="button" 
-                                    variant="ghost" 
-                                    onClick={() => {
-                                        setIsEditing(false)
-                                        // Reset values
-                                        if (orgDetails) {
-                                            setOrgName(orgDetails.name)
-                                            setOrgSlug(orgDetails.slug)
-                                        }
-                                    }}
-                                    disabled={isSaving}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button type="submit" disabled={isSaving} isLoading={isSaving}>
-                                    Save Changes
-                                </Button>
-                            </>
-                        )}
-                    </div>
-                 </form>
-
-                 <div className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-400">Irreversible actions for this organization.</p>
-                  </div>
-
-                  <div className="p-6 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-red-900 dark:text-red-200">Delete Organization</h3>
-                      <p className="text-sm text-red-700 dark:text-red-300 mt-1">Permanently delete this organization and all its data.</p>
-                    </div>
-                    <button
-                      onClick={async () => {
-                        if (!subscription) {
-                          setIsLoadingDeleteData(true)
-                          try {
-                            const sub = await getSubscription()
-                            setSubscription(sub)
-                          } catch {
-                            // proceed without subscription data
-                          } finally {
-                            setIsLoadingDeleteData(false)
-                          }
-                        }
-                        setShowDeletePrompt(true)
-                      }}
-                      disabled={isLoadingDeleteData}
-                      className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium disabled:opacity-50 flex items-center gap-2"
-                    >
-                      {isLoadingDeleteData && <Spinner className="h-4 w-4" />}
-                      Delete Organization
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'members' && (
-              <div className="space-y-12">
-                {/* Invite Section */}
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Organization Members</h2>
-                  <p className="text-sm text-neutral-400 mb-6">Manage who has access to this organization.</p>
-                  
-                  <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
-                    <h3 className="text-sm font-medium text-white mb-3">Invite New Member</h3>
-                    <form onSubmit={handleSendInvite} className="flex gap-3 items-end">
-                      <div className="flex-1">
-                        <Input 
-                          type="email" 
-                          placeholder="colleague@company.com" 
-                          value={inviteEmail}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInviteEmail(e.target.value)}
-                          required
-                          className="bg-white dark:bg-neutral-900"
-                        />
-                      </div>
-                      <div className="w-32">
-                        <select 
-                          className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-brand-orange dark:text-white"
-                          value={inviteRole}
-                          onChange={(e) => setInviteRole(e.target.value)}
-                        >
-                          <option value="member">Member</option>
-                          <option value="admin">Admin</option>
-                          <option value="owner">Owner</option>
-                        </select>
-                      </div>
-                      <Button type="submit" disabled={isInviting} isLoading={isInviting}>
-                        <PlusIcon className="w-4 h-4 mr-2" />
-                        Invite
-                      </Button>
-                    </form>
-                    <div className="mt-4">
-                        <Captcha
-                            onVerify={(id, solution, token) => {
-                                setCaptchaId(id)
-                                setCaptchaSolution(solution)
-                                setCaptchaToken(token || '')
-                            }}
-                            apiUrl={process.env.NEXT_PUBLIC_CAPTCHA_API_URL}
-                            action="org-settings"
-                        />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Members List */}
-                <div className="space-y-4">
-                  <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Active Members</h3>
-                  <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                    {isLoadingMembers ? (
-                      <MembersListSkeleton />
-                    ) : members.length === 0 ? (
-                      <div className="p-8 text-center text-neutral-400">No members found.</div>
-                    ) : (
-                      members.map((member) => (
-                        <div key={member.user_id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-                          <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-full bg-brand-orange/10 flex items-center justify-center text-brand-orange font-medium">
-                              {member.user_email?.[0].toUpperCase() || '?'}
-                            </div>
-                            <div>
-                              <div className="text-sm font-medium text-white">
-                                {member.user_email || 'Unknown User'}
-                              </div>
-                              <div className="text-xs text-neutral-400">
-                                Joined {formatDate(new Date(member.joined_at))}
-                              </div>
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-4">
-                            <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
-                              member.role === 'owner' 
-                                ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
-                                : member.role === 'admin'
-                                ? 'bg-brand-orange/10 text-brand-orange'
-                                : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                            }`}>
-                              {member.role}
-                            </span>
-                          </div>
-                        </div>
-                      ))
-                    )}
-                  </div>
-                </div>
-
-                {/* Pending Invitations */}
-                {invitations.length > 0 && (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
-                    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                      {invitations.map((invite) => (
-                        <div key={invite.id} className="p-4 flex items-center justify-between">
-                          <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-400">
-                              <div className="w-2 h-2 rounded-full bg-neutral-400 animate-pulse"></div>
-                            </div>
-                            <div>
-                              <div className="text-sm font-medium text-white">
-                                {invite.email}
-                              </div>
-                              <div className="text-xs text-neutral-400">
-                                Invited as <span className="capitalize font-medium">{invite.role}</span> • Expires {formatDate(new Date(invite.expires_at))}
-                              </div>
-                            </div>
-                          </div>
-                          <Button 
-                            variant="ghost" 
-                            onClick={() => handleRevokeInvite(invite.id)}
-                            className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 h-9 px-3"
-                          >
-                            Revoke
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'billing' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Billing & Subscription</h2>
-                  <p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
-                </div>
-
-                {isLoadingSubscription ? (
-                  <div className="space-y-4">
-                    <SkeletonCard className="h-32" />
-                    <SkeletonCard className="h-20" />
-                  </div>
-                ) : !subscription ? (
-                  <div className="p-6 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
-                    <p className="text-neutral-400">Could not load subscription details.</p>
-                    <Button variant="ghost" onClick={loadSubscription} className="mt-4">Retry</Button>
-                  </div>
-                ) : (
-                  <div className="space-y-6">
-
-                    {/* Trial notice */}
-                    {subscription.subscription_status === 'trialing' && (
-                      <div className="p-6 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800 rounded-2xl flex flex-col sm:flex-row sm:items-center gap-3">
-                        <div className="flex-1">
-                          <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                            Your free trial ends on{' '}
-                            <span className="font-semibold">
-                              {(() => {
-                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                                return d && !Number.isNaN(d.getTime()) ? formatDateLong(d) : '—'
-                              })()}
-                            </span>
-                          </p>
-                          <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-0.5">
-                            After the trial you'll be charged automatically unless you cancel before then.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Past due notice */}
-                    {subscription.subscription_status === 'past_due' && (
-                      <div className="p-6 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                        <div className="flex-1">
-                          <p className="text-sm font-medium text-red-800 dark:text-red-200">
-                            Payment past due
-                          </p>
-                          <p className="text-xs text-red-700 dark:text-red-300 mt-0.5">
-                            We couldn't charge your payment method. Please update your billing info to avoid service interruption.
-                          </p>
-                        </div>
-                        <Button
-                          variant="secondary"
-                          onClick={handleManageSubscription}
-                          disabled={isRedirectingToPortal}
-                          isLoading={isRedirectingToPortal}
-                          className="shrink-0"
-                        >
-                          Update payment method
-                        </Button>
-                      </div>
-                    )}
-
-                    {/* Cancel-at-period-end notice */}
-                    {subscription.cancel_at_period_end && (
-                      <div className="p-6 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                        <div>
-                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                            Your subscription will end on{' '}
-                            <span className="font-semibold">
-                              {(() => {
-                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                                return d && !Number.isNaN(d.getTime()) ? formatDateLong(d) : '—'
-                              })()}
-                            </span>
-                          </p>
-                          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                            You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
-                          </p>
-                        </div>
-                        <Button
-                          variant="secondary"
-                          onClick={handleResumeSubscription}
-                          disabled={isResuming}
-                          isLoading={isResuming}
-                          className="shrink-0"
-                        >
-                          Keep my subscription
-                        </Button>
-                      </div>
-                    )}
-
-                    {/* Plan & Usage card */}
-                    <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-                      {/* Plan header */}
-                      <div className="p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                        <div className="flex items-center gap-3">
-                          <span className="text-xl font-bold text-white capitalize">
-                            {subscription.plan_id?.startsWith('price_') ? 'Pro' : (subscription.plan_id === 'free' || !subscription.plan_id ? 'Free' : subscription.plan_id)} Plan
-                          </span>
-                          <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
-                            subscription.subscription_status === 'active'
-                              ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
-                              : subscription.subscription_status === 'trialing'
-                              ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300'
-                              : subscription.subscription_status === 'past_due'
-                              ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                              : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                          }`}>
-                            {subscription.subscription_status === 'trialing' ? 'Trial' : subscription.subscription_status === 'past_due' ? 'Past Due' : (subscription.subscription_status || 'Free')}
-                          </span>
-                          {subscription.billing_interval && (
-                            <span className="text-xs text-neutral-500 capitalize">
-                              Billed {subscription.billing_interval}ly
-                            </span>
-                          )}
-                        </div>
-                        <Button onClick={openChangePlanModal} disabled={subscription.cancel_at_period_end}>
-                          Change plan
-                        </Button>
-                      </div>
-                      {(subscription.business_name || subscription.tax_id) && (
-                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-400">
-                          {subscription.business_name && (
-                            <div>Billing for: {subscription.business_name}</div>
-                          )}
-                          {subscription.tax_id && (
-                            <span>
-                              Tax ID: {subscription.tax_id.value} ({subscription.tax_id.type})
-                            </span>
-                          )}
-                        </div>
-                      )}
-
-                      {/* Usage stats */}
-                      <div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
-                          <div className="text-lg font-semibold text-white">
-                            {typeof subscription.sites_count === 'number'
-                              ? (() => {
-                                  const limit = getSitesLimitForPlan(subscription.plan_id)
-                                  return limit != null ? `${subscription.sites_count} / ${limit}` : `${subscription.sites_count}`
-                                })()
-                              : '—'}
-                          </div>
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Pageviews</div>
-                          <div className="text-lg font-semibold text-white">
-                            {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number'
-                              ? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
-                              : '—'}
-                          </div>
-                          {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
-                            <div className="mt-2 h-1.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700 overflow-hidden">
-                              <div
-                                className={`h-full rounded-full transition-all ${
-                                  subscription.pageview_usage / subscription.pageview_limit >= 1
-                                    ? 'bg-red-500'
-                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.9
-                                    ? 'bg-red-400'
-                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.8
-                                    ? 'bg-amber-400'
-                                    : 'bg-green-500'
-                                }`}
-                                style={{ width: `${Math.min(100, (subscription.pageview_usage / subscription.pageview_limit) * 100)}%` }}
-                              />
-                            </div>
-                          )}
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
-                            {subscription.subscription_status === 'trialing' ? 'Trial ends' : (subscription.cancel_at_period_end ? 'Access until' : 'Renews')}
-                          </div>
-                          <div className="text-lg font-semibold text-white">
-                            {(() => {
-                              const ts = subscription.current_period_end
-                              const d = ts ? new Date(ts) : null
-                              return d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
-                                ? formatDate(d)
-                                : '—'
-                            })()}
-                          </div>
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Limit</div>
-                          <div className="text-lg font-semibold text-white">
-                            {subscription.pageview_limit > 0 ? `${subscription.pageview_limit.toLocaleString()} / mo` : 'Unlimited'}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Quick actions */}
-                    <div className="flex flex-wrap items-center gap-4">
-                      {subscription.has_payment_method && (
-                        <button
-                          type="button"
-                          onClick={handleManageSubscription}
-                          disabled={isRedirectingToPortal}
-                          className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded"
-                        >
-                          <ExternalLinkIcon className="w-4 h-4" />
-                          Payment method & invoices
-                        </button>
-                      )}
-                      {subscription.has_payment_method && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && !subscription.cancel_at_period_end && (
-                        <button
-                          type="button"
-                          onClick={() => setShowCancelPrompt(true)}
-                          className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                        >
-                          Cancel subscription
-                        </button>
-                      )}
-                    </div>
-
-                    {/* Order History */}
-                    <div>
-                      <h3 className="text-lg font-semibold text-white mb-3">Recent orders</h3>
-                      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                        {isLoadingInvoices ? (
-                          <InvoicesListSkeleton />
-                        ) : orders.length === 0 ? (
-                          <div className="p-8 text-center text-neutral-400">No orders found.</div>
-                        ) : (
-                          <>
-                            {orders.map((order) => (
-                              <div key={order.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-                                <div className="flex items-center gap-3">
-                                  <div>
-                                    <span className="font-medium text-sm text-white">
-                                      {(order.total_amount / 100).toLocaleString('en-US', { style: 'currency', currency: order.currency.toUpperCase() })}
-                                    </span>
-                                    <span className="text-xs text-neutral-500 ml-2">
-                                      {formatDate(new Date(order.created_at))}
-                                    </span>
-                                  </div>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium capitalize ${
-                                    order.status === 'paid'
-                                      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
-                                      : order.status === 'open'
-                                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-                                      : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                                  }`}>
-                                    {order.status}
-                                  </span>
-                                </div>
-                              </div>
-                            ))}
-                          </>
-                        )
-                        }
-                        </div>
-                      </div>
-                    </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'notifications' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Notification Settings</h2>
-                  <p className="text-sm text-neutral-400 mb-6">
-                    Choose which notification types you want to receive. These apply to the notification center for owners and admins.
-                  </p>
-                </div>
-
-                {isLoadingNotificationSettings ? (
-                  <SettingsFormSkeleton />
-                ) : (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Notification categories</h3>
-                    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                      {notificationCategories.map((cat) => (
-                        <div
-                          key={cat.id}
-                          className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
-                        >
-                          <div className="flex-1">
-                            <p className="text-sm font-medium text-white">{cat.label}</p>
-                            <p className="text-sm text-neutral-400 mt-0.5">{cat.description}</p>
-                          </div>
-                          <div className="flex items-center shrink-0">
-                            <button
-                              type="button"
-                              role="switch"
-                              aria-checked={notificationSettings[cat.id] !== false}
-                              aria-label={`${notificationSettings[cat.id] !== false ? 'Disable' : 'Enable'} ${cat.label} notifications`}
-                              onClick={() => {
-                                const prev = { ...notificationSettings }
-                                const next = { ...notificationSettings, [cat.id]: notificationSettings[cat.id] === false }
-                                setNotificationSettings(next)
-                                setIsSavingNotificationSettings(true)
-                                updateNotificationSettings(next)
-                                  .then(() => {
-                                    toast.success('Notification settings updated')
-                                  })
-                                  .catch((err) => {
-                                    toast.error(getAuthErrorMessage(err) || 'Failed to save notification preferences')
-                                    setNotificationSettings(prev)
-                                  })
-                                  .finally(() => setIsSavingNotificationSettings(false))
-                              }}
-                              disabled={isSavingNotificationSettings}
-                              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
-                                notificationSettings[cat.id] !== false ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
-                              }`}
-                            >
-                              <span
-                                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                                  notificationSettings[cat.id] !== false ? 'translate-x-5' : 'translate-x-0'
-                                }`}
-                              />
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'audit' && (
-              <div className="space-y-12">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Audit log</h2>
-                  <p className="text-sm text-neutral-400">Who did what and when for this organization.</p>
-                </div>
-
-                {/* Advanced Filters */}
-                <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4 mb-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">Log ID</label>
-                      <input
-                        type="text"
-                        placeholder="e.g. 8a2b3c"
-                        value={auditLogIdFilter}
-                        onChange={(e) => setAuditLogIdFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">Action</label>
-                      <input
-                        type="text"
-                        placeholder="e.g. site_created"
-                        value={auditActionFilter}
-                        onChange={(e) => setAuditActionFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">From date</label>
-                      <input
-                        type="date"
-                        value={auditStartDate}
-                        onChange={(e) => setAuditStartDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">To date</label>
-                      <input
-                        type="date"
-                        value={auditEndDate}
-                        onChange={(e) => setAuditEndDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-4 flex justify-end gap-2">
-                    <Button
-                        variant="ghost"
-                        onClick={() => {
-                            setAuditLogIdFilter('')
-                            setAuditActionFilter('')
-                            setAuditStartDate('')
-                            setAuditEndDate('')
-                            setAuditPage(0)
-                            setAuditFetchTrigger(prev => prev + 1)
-                        }}
-                        disabled={isLoadingAudit}
-                    >
-                        Clear Filters
-                    </Button>
-                  </div>
-                </div>
-
-                {/* Table */}
-                <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-                  {isLoadingAudit ? (
-                    <AuditLogSkeleton />
-                  ) : (auditEntries ?? []).length === 0 ? (
-                    <div className="p-8 text-center text-neutral-500">No audit events found.</div>
-                  ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-sm min-w-full">
-                        <thead>
-                          <tr className="border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Log ID</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Time</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Actor</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Action</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Resource</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {(auditEntries ?? []).map((entry) => (
-                            <tr key={entry.id} className="border-b border-neutral-100 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/30">
-                              <td className="px-4 py-3 text-neutral-500 dark:text-neutral-500 font-mono text-xs whitespace-nowrap" title={entry.id}>
-                                {entry.id}
-                              </td>
-                              <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400 whitespace-nowrap">
-                                {formatDateTime(new Date(entry.occurred_at))}
-                              </td>
-                              <td className="px-4 py-3 text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
-                                {entry.actor_email || entry.actor_id || 'System'}
-                              </td>
-                              <td className="px-4 py-3 font-medium text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
-                              <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400">{entry.resource_type}</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-
-                  {/* Pagination */}
-                  {auditTotal > auditPageSize && (
-                    <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-                      <span className="text-sm text-neutral-400">
-                        {auditPage * auditPageSize + 1}–{Math.min((auditPage + 1) * auditPageSize, auditTotal)} of {auditTotal}
-                      </span>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="ghost"
-                          onClick={() => setAuditPage((p) => Math.max(0, p - 1))}
-                          disabled={auditPage === 0 || isLoadingAudit}
-                          className="text-sm py-2 px-3"
-                        >
-                          Previous
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          onClick={() => setAuditPage((p) => p + 1)}
-                          disabled={(auditPage + 1) * auditPageSize >= auditTotal || isLoadingAudit}
-                          className="text-sm py-2 px-3"
-                        >
-                          Next
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </motion.div>
-        </div>
-      </div>
-
-      {/* Delete Confirmation Modal — portal to body so backdrop-blur covers the fixed header */}
-      {typeof document !== 'undefined' && createPortal(
-      <AnimatePresence>
-        {showDeletePrompt && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="w-full max-w-sm bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-red-200 dark:border-red-900 shadow-xl pointer-events-auto"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-red-600 dark:text-red-500">Delete {orgName || 'Organization'}?</h3>
-                <button
-                  onClick={() => {
-                    setShowDeletePrompt(false)
-                    setDeleteConfirm('')
-                  }}
-                  className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-white"
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-
-              <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-                This action is <span className="font-bold">irreversible</span>. The following will be permanently deleted:
-              </p>
-
-              <div className="mb-5 space-y-2">
-                {typeof subscription?.sites_count === 'number' && subscription.sites_count > 0 && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      {subscription.sites_count} {subscription.sites_count === 1 ? 'site' : 'sites'} and all analytics data
-                    </span>
-                  </div>
-                )}
-                {members.length > 1 && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      {members.length - 1} {members.length - 1 === 1 ? 'member' : 'members'} will be removed
-                    </span>
-                  </div>
-                )}
-                {subscription?.plan_id && subscription.plan_id !== 'free' && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      Active subscription will be cancelled
-                    </span>
-                  </div>
-                )}
-                <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                  <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                  <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                    All notifications and settings
-                  </span>
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                    Type <span className="font-mono font-bold text-red-600 dark:text-red-400">DELETE</span> to confirm
-                  </label>
-                  <input
-                    type="text"
-                    value={deleteConfirm}
-                    onChange={(e) => setDeleteConfirm(e.target.value)}
-                    autoComplete="off"
-                    className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
-                    placeholder="DELETE"
-                  />
-                </div>
-
-                <div className="flex gap-3">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowDeletePrompt(false)
-                      setDeleteConfirm('')
-                    }}
-                    className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
-                    disabled={isDeleting}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={handleDelete}
-                    disabled={deleteConfirm !== 'DELETE' || isDeleting}
-                    className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {isDeleting ? 'Deleting...' : 'Delete Forever'}
-                  </button>
-                </div>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>,
-      document.body
-      )}
-
-      {/* Cancel subscription confirmation modal */}
-      <AnimatePresence>
-        {showCancelPrompt && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-white">Cancel subscription?</h3>
-                <button
-                  onClick={() => setShowCancelPrompt(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
-                  disabled={cancelLoadingAction != null}
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-              <p className="text-neutral-600 dark:text-neutral-300 mb-4">
-                You can cancel at the end of your billing period (you keep access until then) or cancel immediately. Your data is retained for 30 days after access ends.
-              </p>
-              <div className="flex flex-col gap-2">
-                <Button
-                  onClick={() => handleCancelSubscription(true)}
-                  disabled={cancelLoadingAction != null}
-                  isLoading={cancelLoadingAction === 'period_end'}
-                >
-                  Cancel at period end
-                </Button>
-                <Button
-                  variant="ghost"
-                  className="text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
-                  onClick={() => handleCancelSubscription(false)}
-                  disabled={cancelLoadingAction != null}
-                  isLoading={cancelLoadingAction === 'immediate'}
-                >
-                  Cancel immediately
-                </Button>
-                <Button variant="ghost" onClick={() => setShowCancelPrompt(false)} disabled={cancelLoadingAction != null}>
-                  Keep subscription
-                </Button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Change plan modal */}
-      <AnimatePresence>
-        {showChangePlanModal && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-white">Change plan</h3>
-                <button
-                  type="button"
-                  onClick={() => setShowChangePlanModal(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded-lg p-1"
-                  disabled={isChangingPlan}
-                  aria-label="Close dialog"
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-              <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-                Choose your pageview limit and billing interval. {hasActiveSubscription ? 'Your next invoice will reflect prorations.' : 'You’ll start a new subscription.'}
-              </p>
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Plan</label>
-                  <div className="grid grid-cols-3 gap-2">
-                    {([
-                      { id: PLAN_ID_SOLO, name: 'Solo', sites: '1 site' },
-                      { id: PLAN_ID_TEAM, name: 'Team', sites: 'Up to 5 sites' },
-                      { id: PLAN_ID_BUSINESS, name: 'Business', sites: 'Up to 10 sites' },
-                    ] as const).map((plan) => {
-                      const isCurrentPlan = subscription?.plan_id === plan.id
-                      const isSelected = changePlanId === plan.id
-                      return (
-                        <button
-                          key={plan.id}
-                          type="button"
-                          onClick={() => setChangePlanId(plan.id)}
-                          className={`relative p-3 rounded-xl border text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
-                            isSelected
-                              ? 'border-brand-orange bg-brand-orange/5 dark:bg-brand-orange/10'
-                              : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
-                          }`}
-                        >
-                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-white'}`}>
-                            {plan.name}
-                          </span>
-                          <span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
-                          {isCurrentPlan && (
-                            <span className="absolute -top-2 right-2 px-1.5 py-0.5 text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full border border-neutral-200 dark:border-neutral-700">
-                              Current
-                            </span>
-                          )}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Pageviews per month</label>
-                  <select
-                    value={changePlanTierIndex}
-                    onChange={(e) => setChangePlanTierIndex(Number(e.target.value))}
-                    className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-white focus:ring-2 focus:ring-brand-orange outline-none"
-                  >
-                    {TRAFFIC_TIERS.map((tier, idx) => (
-                      <option key={tier.value} value={idx}>
-                        {tier.label} / month
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Billing</label>
-                  <div className="flex rounded-lg border border-neutral-200 dark:border-neutral-800 p-1 gap-1">
-                    <button
-                      type="button"
-                      onClick={() => setChangePlanYearly(false)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
-                    >
-                      Monthly
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setChangePlanYearly(true)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
-                    >
-                      Yearly
-                    </button>
-                  </div>
-                </div>
-              </div>
-              {hasActiveSubscription && (
-                <div className="mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                    Your plan will be updated. Any prorations will be reflected on your next invoice.
-                  </p>
-                </div>
-              )}
-              <div className="flex gap-2 mt-6">
-                <Button
-                  onClick={handleChangePlanSubmit}
-                  isLoading={isChangingPlan}
-                  disabled={isChangingPlan}
-                  className="flex-1"
-                >
-                  {hasActiveSubscription ? 'Update plan' : 'Start subscription'}
-                </Button>
-                <Button variant="ghost" onClick={() => setShowChangePlanModal(false)} disabled={isChangingPlan}>
-                  Cancel
-                </Button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
deleted file mode 100644
index 55c187e..0000000
--- a/components/settings/SettingsModalWrapper.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { SettingsModal, type SettingsSection } from '@ciphera-net/ui'
-import { UserIcon, LockIcon, BellIcon, ChevronRightIcon } from '@ciphera-net/ui'
-import { NotificationToggleList, type NotificationOption } from '@ciphera-net/ui'
-import ProfileSettings from '@/components/settings/ProfileSettings'
-import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
-import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
-import { useSettingsModal } from '@/lib/settings-modal-context'
-import { useAuth } from '@/lib/auth/context'
-import { updateUserPreferences } from '@/lib/api/user'
-
-// --- Security Alerts ---
-
-const SECURITY_ALERT_OPTIONS: NotificationOption[] = [
-  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
-  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
-  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
-]
-
-function SecurityAlertsCard() {
-  const { user } = useAuth()
-  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    if (user?.preferences?.email_notifications) {
-      setEmailNotifications(user.preferences.email_notifications)
-    } else {
-      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
-        ...acc,
-        [option.key]: true
-      }), {} as Record<string, boolean>)
-      setEmailNotifications(defaults)
-    }
-  }, [user])
-
-  const handleToggle = async (key: string) => {
-    const newState = {
-      ...emailNotifications,
-      [key]: !emailNotifications[key]
-    }
-    setEmailNotifications(newState)
-    try {
-      await updateUserPreferences({
-        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
-      })
-    } catch {
-      setEmailNotifications(prev => ({
-        ...prev,
-        [key]: !prev[key]
-      }))
-    }
-  }
-
-  return (
-    <NotificationToggleList
-      title="Security Alerts"
-      description="Choose which security events trigger email alerts"
-      icon={<BellIcon className="w-5 h-5 text-brand-orange" />}
-      options={SECURITY_ALERT_OPTIONS}
-      values={emailNotifications}
-      onToggle={handleToggle}
-    />
-  )
-}
-
-// --- Notification Center Placeholder ---
-
-function NotificationCenterPlaceholder() {
-  return (
-    <div className="text-center max-w-md mx-auto py-8">
-      <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-      <h3 className="text-lg font-medium text-white mb-2">Notification Center</h3>
-      <p className="text-sm text-neutral-500 mb-4">View and manage all your notifications in one place.</p>
-      <Link href="/notifications" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors">
-        Open Notification Center
-        <ChevronRightIcon className="w-4 h-4" />
-      </Link>
-    </div>
-  )
-}
-
-// --- Main Wrapper ---
-
-export default function SettingsModalWrapper() {
-  const { isOpen, closeSettings } = useSettingsModal()
-
-  const sections: SettingsSection[] = [
-    {
-      id: 'pulse',
-      label: 'Account',
-      icon: UserIcon,
-      defaultExpanded: true,
-      items: [
-        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" borderless hideDangerZone /> },
-        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" borderless /> },
-        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" borderless /> },
-        { id: 'danger-zone', label: 'Danger Zone', content: <ProfileSettings activeTab="danger-zone" borderless /> },
-      ],
-    },
-    {
-      id: 'security-section',
-      label: 'Security',
-      icon: LockIcon,
-      items: [
-        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
-        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
-      ],
-    },
-    {
-      id: 'notifications',
-      label: 'Notifications',
-      icon: BellIcon,
-      items: [
-        { id: 'security-alerts', label: 'Security Alerts', content: <SecurityAlertsCard /> },
-        { id: 'center', label: 'Notification Center', content: <NotificationCenterPlaceholder /> },
-      ],
-    },
-  ]
-
-  return <SettingsModal open={isOpen} onClose={closeSettings} sections={sections} />
-}
diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index d1e39ea..4cbee82 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -1,32 +1,32 @@
 'use client'
 
 import { useState, useCallback, useEffect, useRef } from 'react'
+import dynamic from 'next/dynamic'
 import { AnimatePresence, motion } from 'framer-motion'
 import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
-import { Button } from '@ciphera-net/ui'
+import { Button, Spinner } from '@ciphera-net/ui'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
 import { listSites, type Site } from '@/lib/api/sites'
 
-// Tab content components — Site
-import SiteGeneralTab from './tabs/SiteGeneralTab'
-import SiteGoalsTab from './tabs/SiteGoalsTab'
-import SiteVisibilityTab from './tabs/SiteVisibilityTab'
-import SitePrivacyTab from './tabs/SitePrivacyTab'
-import SiteBotSpamTab from './tabs/SiteBotSpamTab'
-import SiteReportsTab from './tabs/SiteReportsTab'
-import SiteIntegrationsTab from './tabs/SiteIntegrationsTab'
-// Tab content components — Workspace
-import WorkspaceGeneralTab from './tabs/WorkspaceGeneralTab'
-import WorkspaceBillingTab from './tabs/WorkspaceBillingTab'
-import WorkspaceMembersTab from './tabs/WorkspaceMembersTab'
-import WorkspaceNotificationsTab from './tabs/WorkspaceNotificationsTab'
-import WorkspaceAuditTab from './tabs/WorkspaceAuditTab'
-// Tab content components — Account
-import AccountProfileTab from './tabs/AccountProfileTab'
-import AccountSecurityTab from './tabs/AccountSecurityTab'
-import AccountDevicesTab from './tabs/AccountDevicesTab'
+// Lazy-load tab components — only loaded when the tab is first rendered
+const tabLoader = () => <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+const SiteGeneralTab = dynamic(() => import('./tabs/SiteGeneralTab'), { loading: tabLoader })
+const SiteGoalsTab = dynamic(() => import('./tabs/SiteGoalsTab'), { loading: tabLoader })
+const SiteVisibilityTab = dynamic(() => import('./tabs/SiteVisibilityTab'), { loading: tabLoader })
+const SitePrivacyTab = dynamic(() => import('./tabs/SitePrivacyTab'), { loading: tabLoader })
+const SiteBotSpamTab = dynamic(() => import('./tabs/SiteBotSpamTab'), { loading: tabLoader })
+const SiteReportsTab = dynamic(() => import('./tabs/SiteReportsTab'), { loading: tabLoader })
+const SiteIntegrationsTab = dynamic(() => import('./tabs/SiteIntegrationsTab'), { loading: tabLoader })
+const WorkspaceGeneralTab = dynamic(() => import('./tabs/WorkspaceGeneralTab'), { loading: tabLoader })
+const WorkspaceBillingTab = dynamic(() => import('./tabs/WorkspaceBillingTab'), { loading: tabLoader })
+const WorkspaceMembersTab = dynamic(() => import('./tabs/WorkspaceMembersTab'), { loading: tabLoader })
+const WorkspaceNotificationsTab = dynamic(() => import('./tabs/WorkspaceNotificationsTab'), { loading: tabLoader })
+const WorkspaceAuditTab = dynamic(() => import('./tabs/WorkspaceAuditTab'), { loading: tabLoader })
+const AccountProfileTab = dynamic(() => import('./tabs/AccountProfileTab'), { loading: tabLoader })
+const AccountSecurityTab = dynamic(() => import('./tabs/AccountSecurityTab'), { loading: tabLoader })
+const AccountDevicesTab = dynamic(() => import('./tabs/AccountDevicesTab'), { loading: tabLoader })
 
 // ─── Types ──────────────────────────────────────────────────────
 
@@ -72,46 +72,35 @@ function ContextSwitcher({
   onChange: (ctx: SettingsContext) => void
   activeSiteDomain: string | null
 }) {
+  const items: { id: SettingsContext; icon: React.ReactNode; label: string; visible: boolean }[] = [
+    { id: 'site', icon: <GearSix weight="bold" className="w-4 h-4" />, label: activeSiteDomain || '', visible: !!activeSiteDomain },
+    { id: 'workspace', icon: <Buildings weight="bold" className="w-4 h-4" />, label: 'Organization', visible: true },
+    { id: 'account', icon: <User weight="bold" className="w-4 h-4" />, label: 'Account', visible: true },
+  ]
+
   return (
     <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
-      {/* Site button — locked to current site, no dropdown */}
-      {activeSiteDomain && (
+      {items.filter(i => i.visible).map(item => (
         <button
-          onClick={() => onChange('site')}
-          className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-            active === 'site'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-white'
+          key={item.id}
+          onClick={() => onChange(item.id)}
+          className={`relative flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
+            active === item.id ? 'text-white' : 'text-neutral-400 hover:text-white'
           }`}
         >
-          <GearSix weight="bold" className="w-4 h-4" />
-          <span className="hidden sm:inline">{activeSiteDomain}</span>
+          {active === item.id && (
+            <motion.div
+              layoutId="context-switcher-bg"
+              className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
+              transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+            />
+          )}
+          <span className="relative z-10 flex items-center gap-2">
+            {item.icon}
+            <span className="hidden sm:inline">{item.label}</span>
+          </span>
         </button>
-      )}
-
-      <button
-        onClick={() => onChange('workspace')}
-        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-          active === 'workspace'
-            ? 'bg-neutral-700 text-white shadow-sm'
-            : 'text-neutral-400 hover:text-white'
-        }`}
-      >
-        <Buildings weight="bold" className="w-4 h-4" />
-        <span className="hidden sm:inline">Organization</span>
-      </button>
-
-      <button
-        onClick={() => onChange('account')}
-        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-          active === 'account'
-            ? 'bg-neutral-700 text-white shadow-sm'
-            : 'text-neutral-400 hover:text-white'
-        }`}
-      >
-        <User weight="bold" className="w-4 h-4" />
-        <span className="hidden sm:inline">Account</span>
-      </button>
+      ))}
     </div>
   )
 }
@@ -318,16 +307,20 @@ export default function UnifiedSettingsModal() {
       const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
       if (match) {
         setActiveSiteId(match[1])
-        setContext('site')
+        // Only default to site context if no specific context was requested
+        if (!initTab?.context) setContext('site')
       } else {
         setActiveSiteId(null)
         if (!initTab?.context) setContext('workspace')
       }
     }
 
-    listSites().then(data => {
-      setSites(Array.isArray(data) ? data : [])
-    }).catch(() => {})
+    // Only fetch sites if we don't have them yet
+    if (sites.length === 0) {
+      listSites().then(data => {
+        setSites(Array.isArray(data) ? data : [])
+      }).catch(() => {})
+    }
   }, [isOpen, user?.org_id])
 
   // Global keyboard shortcuts: `,` toggles settings, Escape closes
@@ -393,9 +386,10 @@ export default function UnifiedSettingsModal() {
               ? 'opacity-0 pointer-events-none transition-opacity duration-150'
               : 'opacity-0 pointer-events-none invisible'
         }`}
+        onClick={handleBackdropClick}
       >
         <div
-          className="relative w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+          className="relative w-full max-w-4xl h-[90vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
           {/* Content animates in/out */}
@@ -435,18 +429,9 @@ export default function UnifiedSettingsModal() {
 
               {/* Content */}
               <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.12 }}
-                    className="p-6"
-                  >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-                  </motion.div>
-                </AnimatePresence>
+                <div key={`${context}-${activeTab}`} className="p-6">
+                  <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
+                </div>
               </div>
 
               {/* Save bar */}
diff --git a/lib/settings-modal-context.tsx b/lib/settings-modal-context.tsx
deleted file mode 100644
index f4de243..0000000
--- a/lib/settings-modal-context.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { createContext, useContext, useState, useCallback } from 'react'
-
-interface SettingsModalContextType {
-  isOpen: boolean
-  openSettings: () => void
-  closeSettings: () => void
-}
-
-const SettingsModalContext = createContext<SettingsModalContextType>({
-  isOpen: false,
-  openSettings: () => {},
-  closeSettings: () => {},
-})
-
-export function SettingsModalProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const openSettings = useCallback(() => setIsOpen(true), [])
-  const closeSettings = useCallback(() => setIsOpen(false), [])
-
-  return (
-    <SettingsModalContext.Provider value={{ isOpen, openSettings, closeSettings }}>
-      {children}
-    </SettingsModalContext.Provider>
-  )
-}
-
-export function useSettingsModal() {
-  return useContext(SettingsModalContext)
-}
diff --git a/package-lock.json b/package-lock.json
index a8a1e01..8ae1ac3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.2",
+        "@ciphera-net/ui": "^0.3.3",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.2",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.2/f2271906ba6b3827dfc9598f6aed95bff20ae2a0",
-      "integrity": "sha512-bi8PANCpl27bCfIiHBmgyPFOKkTYgLHw/wOeUe9COAFHJj8MJGEj0rrXMa8L9Bf9IChw+MlITAojrklc1P8Kkw==",
+      "version": "0.3.3",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.3/e67893f5cadc93c0dcb0b9987b9d370dce0d073b",
+      "integrity": "sha512-Z5A8qj0ZuMMJq72ZREknxDlL1LciUoirmQmkHmp4H2Vl/5ZWELrvdm65V11hJuc2TZpXnCBxtWa2UoKi/SVOIw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 54beb66..93801dd 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.2",
+    "@ciphera-net/ui": "^0.3.3",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",