style: Unify Terminal backgrounds & redesign TLD detail page

- Remove all hardcoded 'bg-black' backgrounds from Terminal pages
- Let global background with emerald glow shine through
- Redesign TLD detail page to match Market/Radar/Intel style
- Use consistent StatCards, glassmorphism containers, and spacing
- Improve Quick Check section on TLD detail page
- Unify Watchlist and Listing page backgrounds for consistency

frontend/src/app/terminal/intel/[tld]/page.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState, useMemo, useRef } from 'react'
 import { useParams } from 'next/navigation'
 import { TerminalLayout } from '@/components/TerminalLayout'
-import { PageContainer, StatCard } from '@/components/PremiumTable'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
 import {
@@ -24,10 +23,69 @@ import {
   DollarSign,
   BarChart3,
   Shield,
+  Loader2,
+  Info,
+  ChevronDown
 } from 'lucide-react'
 import Link from 'next/link'
 import clsx from 'clsx'
 
+// ============================================================================
+// SHARED COMPONENTS
+// ============================================================================
+
+function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  return (
+    <div className="relative flex items-center group/tooltip w-fit">
+      {children}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
+        {content}
+        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
+      </div>
+    </div>
+  )
+}
+
+function StatCard({ 
+  label, 
+  value, 
+  subValue, 
+  icon: Icon, 
+  trend 
+}: { 
+  label: string
+  value: string | number
+  subValue?: string
+  icon: any
+  trend?: 'up' | 'down' | 'neutral' | 'active'
+}) {
+  return (
+    <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 flex items-start justify-between hover:bg-white/[0.02] transition-colors relative overflow-hidden group">
+      <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+      <div className="relative z-10">
+        <p className="text-[11px] font-semibold text-zinc-500 uppercase tracking-wider mb-1">{label}</p>
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-white tracking-tight">{value}</span>
+          {subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
+        </div>
+      </div>
+      <div className={clsx(
+        "relative z-10 p-2 rounded-lg bg-zinc-800/50 transition-colors",
+        trend === 'up' && "text-emerald-400 bg-emerald-500/10",
+        trend === 'down' && "text-rose-400 bg-rose-500/10",
+        trend === 'active' && "text-blue-400 bg-blue-500/10 animate-pulse",
+        trend === 'neutral' && "text-zinc-400"
+      )}>
+        <Icon className="w-4 h-4" />
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// TYPES & DATA
+// ============================================================================
+
 interface TldDetails {
   tld: string
   type: string
@@ -48,7 +106,6 @@ interface TldDetails {
     transfer_price: number
   }>
   cheapest_registrar: string
-  // New fields from table
   min_renewal_price: number
   price_change_1y: number
   price_change_3y: number
@@ -79,7 +136,6 @@ interface DomainCheckResult {
   expiration_date?: string | null
 }
 
-// Registrar URLs
 const REGISTRAR_URLS: Record<string, string> = {
   'Namecheap': 'https://www.namecheap.com/domains/registration/results/?domain=',
   'Porkbun': 'https://porkbun.com/checkout/search?q=',
@@ -92,7 +148,10 @@ const REGISTRAR_URLS: Record<string, string> = {
 
 type ChartPeriod = '1M' | '3M' | '1Y' | 'ALL'
 
-// Premium Chart Component with real data
+// ============================================================================
+// SUB-COMPONENTS
+// ============================================================================
+
 function PriceChart({ 
   data, 
   chartStats,
@@ -105,7 +164,7 @@ function PriceChart({
 
   if (data.length === 0) {
     return (
-      <div className="h-48 flex items-center justify-center text-foreground-muted">
+      <div className="h-48 flex items-center justify-center text-zinc-600 text-xs font-mono uppercase">
         No price history available
       </div>
     )
@@ -124,17 +183,17 @@ function PriceChart({
   const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')
   const areaPath = linePath + ` L${points[points.length - 1].x},100 L${points[0].x},100 Z`
 
-  const isRising = data[data.length - 1].price > data[0].price
+  const isRising = data[data.length - 1].price >= data[0].price
-  const strokeColor = isRising ? '#f97316' : '#00d4aa'
+  const strokeColor = isRising ? '#10b981' : '#f43f5e' // emerald-500 : rose-500
 
   return (
     <div 
       ref={containerRef}
-      className="relative h-48"
+      className="relative h-48 w-full"
       onMouseLeave={() => setHoveredIndex(null)}
     >
       <svg 
-        className="w-full h-full" 
+        className="w-full h-full overflow-visible" 
         viewBox="0 0 100 100" 
         preserveAspectRatio="none"
         onMouseMove={(e) => {
@@ -147,46 +206,59 @@ function PriceChart({
       >
         <defs>
           <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stopColor={strokeColor} stopOpacity="0.3" />
+            <stop offset="0%" stopColor={strokeColor} stopOpacity="0.2" />
-            <stop offset="100%" stopColor={strokeColor} stopOpacity="0.02" />
+            <stop offset="100%" stopColor={strokeColor} stopOpacity="0" />
           </linearGradient>
         </defs>
         <path d={areaPath} fill="url(#chartGradient)" />
-        <path d={linePath} fill="none" stroke={strokeColor} strokeWidth="2" />
+        <path d={linePath} fill="none" stroke={strokeColor} strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
         
         {hoveredIndex !== null && points[hoveredIndex] && (
+          <g>
+            <line 
+              x1={points[hoveredIndex].x} 
+              y1="0" 
+              x2={points[hoveredIndex].x} 
+              y2="100" 
+              stroke="#52525b" 
+              strokeWidth="1" 
+              strokeDasharray="2"
+              vectorEffect="non-scaling-stroke"
+            />
             <circle 
               cx={points[hoveredIndex].x} 
               cy={points[hoveredIndex].y} 
               r="4" 
-            fill={strokeColor}
+              fill="#09090b"
-            stroke="#0a0a0a"
+              stroke={strokeColor}
               strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
             />
+          </g>
         )}
       </svg>
       
       {/* Tooltip */}
       {hoveredIndex !== null && points[hoveredIndex] && (
         <div 
-          className="absolute -top-2 transform -translate-x-1/2 bg-background border border-border rounded-lg px-3 py-2 shadow-lg z-10 pointer-events-none"
+          className="absolute -top-10 transform -translate-x-1/2 bg-zinc-900 border border-zinc-800 rounded px-3 py-1.5 shadow-xl z-20 pointer-events-none"
           style={{ left: `${points[hoveredIndex].x}%` }}
         >
-          <p className="text-sm font-medium text-foreground">${points[hoveredIndex].price.toFixed(2)}</p>
+          <div className="flex flex-col items-center">
-          <p className="text-xs text-foreground-muted">{new Date(points[hoveredIndex].date).toLocaleDateString()}</p>
+             <span className="text-xs font-bold text-white font-mono">${points[hoveredIndex].price.toFixed(2)}</span>
+             <span className="text-[10px] text-zinc-500 font-mono">{new Date(points[hoveredIndex].date).toLocaleDateString()}</span>
+          </div>
+          <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-900" />
         </div>
       )}
-      
-      {/* Y-axis labels */}
-      <div className="absolute left-0 top-0 bottom-0 flex flex-col justify-between text-xs text-foreground-subtle -ml-12 w-10 text-right">
-        <span>${maxPrice.toFixed(2)}</span>
-        <span>${((maxPrice + minPrice) / 2).toFixed(2)}</span>
-        <span>${minPrice.toFixed(2)}</span>
-      </div>
     </div>
   )
 }
 
+// ============================================================================
+// MAIN PAGE
+// ============================================================================
+
 export default function CommandTldDetailPage() {
   const params = useParams()
   const { fetchSubscription } = useStore()
@@ -213,7 +285,7 @@ export default function CommandTldDetailPage() {
       const [historyData, compareData, overviewData] = await Promise.all([
         api.getTldHistory(tld, 365),
         api.getTldCompare(tld),
-        api.getTldOverview(1, 0, 'popularity', tld), // Get the specific TLD data
+        api.getTldOverview(1, 0, 'popularity', tld),
       ])
       
       if (historyData && compareData) {
@@ -221,7 +293,6 @@ export default function CommandTldDetailPage() {
           a.registration_price - b.registration_price
         )
         
-        // Get additional data from overview API (1y, 3y change, risk)
         const tldFromOverview = overviewData?.tlds?.[0]
         
         setDetails({
@@ -239,7 +310,6 @@ export default function CommandTldDetailPage() {
           },
           registrars: sortedRegistrars,
           cheapest_registrar: compareData.cheapest_registrar || sortedRegistrars[0]?.name || 'N/A',
-          // New fields from overview
           min_renewal_price: tldFromOverview?.min_renewal_price || sortedRegistrars[0]?.renewal_price || 0,
           price_change_1y: tldFromOverview?.price_change_1y || 0,
           price_change_3y: tldFromOverview?.price_change_3y || 0,
@@ -316,7 +386,6 @@ export default function CommandTldDetailPage() {
     return baseUrl
   }
 
-  // Calculate renewal trap info
   const getRenewalInfo = () => {
     if (!details?.registrars?.length) return null
     const cheapest = details.registrars[0]
@@ -331,23 +400,22 @@ export default function CommandTldDetailPage() {
 
   const renewalInfo = getRenewalInfo()
 
-  // Risk badge component
   const getRiskBadge = () => {
     if (!details) return null
     const level = details.risk_level
     const reason = details.risk_reason
     return (
       <span className={clsx(
-        "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium",
+        "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider",
-        level === 'high' && "bg-red-500/10 text-red-400",
+        level === 'high' && "bg-rose-500/10 text-rose-400 border border-rose-500/20",
-        level === 'medium' && "bg-amber-500/10 text-amber-400",
+        level === 'medium' && "bg-amber-500/10 text-amber-400 border border-amber-500/20",
-        level === 'low' && "bg-accent/10 text-accent"
+        level === 'low' && "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
       )}>
         <span className={clsx(
-          "w-2.5 h-2.5 rounded-full",
+          "w-1.5 h-1.5 rounded-full",
-          level === 'high' && "bg-red-400",
+          level === 'high' && "bg-rose-400 animate-pulse",
           level === 'medium' && "bg-amber-400",
-          level === 'low' && "bg-accent"
+          level === 'low' && "bg-emerald-400"
         )} />
         {reason}
       </span>
@@ -356,128 +424,198 @@ export default function CommandTldDetailPage() {
 
   if (loading) {
     return (
-      <TerminalLayout title={`.${tld}`} subtitle="Loading...">
+      <TerminalLayout hideHeaderSearch={true}>
-        <PageContainer>
+        <div className="flex items-center justify-center min-h-[50vh]">
-          <div className="flex items-center justify-center py-20">
+           <Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
-            <RefreshCw className="w-6 h-6 text-accent animate-spin" />
         </div>
-        </PageContainer>
       </TerminalLayout>
     )
   }
 
   if (error || !details) {
     return (
-      <TerminalLayout title="TLD Not Found" subtitle="Error loading data">
+      <TerminalLayout hideHeaderSearch={true}>
-        <PageContainer>
+        <div className="flex flex-col items-center justify-center min-h-[50vh] text-zinc-400">
-          <div className="text-center py-20">
+           <X className="w-12 h-12 text-zinc-600 mb-4" />
-            <div className="w-16 h-16 bg-background-secondary rounded-full flex items-center justify-center mx-auto mb-6">
+           <h1 className="text-xl font-bold text-white mb-2">TLD Not Found</h1>
-              <X className="w-8 h-8 text-foreground-subtle" />
+           <p className="mb-6">The extension .{tld} is not currently tracked.</p>
-            </div>
+           <Link href="/terminal/intel" className="text-emerald-400 hover:text-emerald-300 flex items-center gap-2">
-            <h1 className="text-xl font-medium text-foreground mb-2">TLD Not Found</h1>
+             <ArrowLeft className="w-4 h-4" /> Back to Intelligence
-            <p className="text-foreground-muted mb-8">{error || `The TLD .${tld} could not be found.`}</p>
-            <Link
-              href="/terminal/intel"
-              className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background rounded-xl font-medium hover:bg-accent-hover transition-all"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              Back to TLD Pricing
            </Link>
         </div>
-        </PageContainer>
       </TerminalLayout>
     )
   }
 
   return (
-    <TerminalLayout 
+    <TerminalLayout hideHeaderSearch={true}>
-      title={`.${details.tld}`}
+      <div className="relative">
-      subtitle={details.description}
+        
-    >
+        {/* Ambient Background Glow */}
-      <PageContainer>
+        <div className="pointer-events-none absolute inset-0 -z-10">
+          <div className="absolute top-[-200px] right-[-100px] w-[800px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] mix-blend-screen" />
+          <div className="absolute bottom-0 left-[-100px] w-[600px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] mix-blend-screen" />
+        </div>
+
+        <div className="space-y-6 pb-20 md:pb-0 relative">
+          
+          {/* Header Section */}
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-white/5 pb-8">
+            <div className="space-y-4">
                {/* Breadcrumb */}
-        <nav className="flex items-center gap-2 text-sm mb-6">
+              <nav className="flex items-center gap-2 text-xs font-medium text-zinc-500 uppercase tracking-widest">
-          <Link href="/terminal/intel" className="text-foreground-subtle hover:text-foreground transition-colors">
+                <Link href="/terminal/intel" className="hover:text-emerald-400 transition-colors">
-            TLD Pricing
+                  Intelligence
                 </Link>
-          <ChevronRight className="w-3.5 h-3.5 text-foreground-subtle" />
+                <ChevronRight className="w-3 h-3" />
-          <span className="text-foreground font-medium">.{details.tld}</span>
+                <span className="text-white">.{details.tld}</span>
               </nav>
 
-        {/* Stats Grid - All info from table */}
+              <div className="flex items-center gap-4">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <div className="h-12 w-1.5 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]" />
-          <div title="Lowest first-year registration price across all tracked registrars">
-            <StatCard 
-              title="Buy Price (1y)" 
-              value={`$${details.pricing.min.toFixed(2)}`}
-              subtitle={`at ${details.cheapest_registrar}`}
-              icon={DollarSign} 
-            />
-          </div>
-          <div title={renewalInfo?.isTrap 
-            ? `Warning: Renewal is ${renewalInfo.ratio.toFixed(1)}x the registration price` 
-            : 'Annual renewal price after first year'}>
-            <StatCard 
-              title="Renewal (1y)" 
-              value={details.min_renewal_price ? `$${details.min_renewal_price.toFixed(2)}` : '—'}
-              subtitle={renewalInfo?.isTrap ? `${renewalInfo.ratio.toFixed(1)}x registration` : 'per year'}
-              icon={RefreshCw} 
-            />
-          </div>
-          <div title="Price change over the last 12 months">
-            <StatCard 
-              title="1y Change" 
-              value={`${details.price_change_1y > 0 ? '+' : ''}${details.price_change_1y.toFixed(0)}%`}
-              icon={details.price_change_1y > 0 ? TrendingUp : details.price_change_1y < 0 ? TrendingDown : Minus} 
-            />
-          </div>
-          <div title="Price change over the last 3 years">
-            <StatCard 
-              title="3y Change" 
-              value={`${details.price_change_3y > 0 ? '+' : ''}${details.price_change_3y.toFixed(0)}%`}
-              icon={BarChart3} 
-            />
-          </div>
-        </div>
-
-        {/* Risk Level */}
-        <div className="flex items-center gap-4 p-4 bg-background-secondary/30 border border-border/50 rounded-xl">
-          <Shield className="w-5 h-5 text-foreground-muted" />
-          <div className="flex-1">
-            <p className="text-sm font-medium text-foreground">Risk Assessment</p>
-            <p className="text-xs text-foreground-muted">Based on renewal ratio, price volatility, and market trends</p>
-          </div>
-          {getRiskBadge()}
-        </div>
-
-        {/* Renewal Trap Warning */}
-        {renewalInfo?.isTrap && (
-          <div className="p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl flex items-start gap-3">
-            <AlertTriangle className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
                 <div>
-              <p className="text-sm font-medium text-amber-400">Renewal Trap Detected</p>
+                   <h1 className="text-4xl font-bold tracking-tight text-white flex items-center gap-3">
-              <p className="text-sm text-foreground-muted mt-1">
+                    .{details.tld}
-                The renewal price (${renewalInfo.renewal.toFixed(2)}) is {renewalInfo.ratio.toFixed(1)}x higher than the registration price (${renewalInfo.registration.toFixed(2)}). 
+                    {getRiskBadge()}
-                Consider the total cost of ownership before registering.
+                   </h1>
+                   <p className="text-zinc-400 text-sm mt-1 max-w-lg">
+                    {details.description}
                    </p>
                 </div>
               </div>
-        )}
+            </div>
             
-        {/* Price Chart */}
+            <div className="flex gap-2">
-        <div className="p-6 bg-background-secondary/30 border border-border/50 rounded-2xl">
+               <Link 
+                  href="/terminal/intel"
+                  className="px-4 py-2 rounded-lg bg-zinc-900 border border-white/10 hover:bg-white/5 text-sm font-medium text-zinc-300 transition-colors flex items-center gap-2"
+                >
+                  <ArrowLeft className="w-4 h-4" /> Back
+               </Link>
+            </div>
+          </div>
+
+          {/* Metric Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <StatCard 
+              label="Registration" 
+              value={`$${details.pricing.min.toFixed(2)}`}
+              subValue={`at ${details.cheapest_registrar}`}
+              icon={DollarSign}
+              trend="neutral"
+            />
+             <StatCard 
+              label="Renewal" 
+              value={details.min_renewal_price ? `$${details.min_renewal_price.toFixed(2)}` : '—'}
+              subValue={renewalInfo?.isTrap ? `${renewalInfo.ratio.toFixed(1)}x Markup` : '/ year'}
+              icon={RefreshCw}
+              trend={renewalInfo?.isTrap ? 'down' : 'neutral'}
+            />
+            <StatCard 
+              label="1y Trend" 
+              value={`${details.price_change_1y > 0 ? '+' : ''}${details.price_change_1y.toFixed(0)}%`}
+              subValue="Volatility"
+              icon={details.price_change_1y > 0 ? TrendingUp : TrendingDown}
+              trend={details.price_change_1y > 10 ? 'down' : details.price_change_1y < -10 ? 'up' : 'neutral'}
+            />
+             <StatCard 
+              label="Tracked" 
+              value={details.registrars.length}
+              subValue="Registrars"
+              icon={Building}
+            />
+          </div>
+
+          {/* Quick Check Bar */}
+          <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-6 backdrop-blur-sm relative overflow-hidden group hover:border-white/10 transition-colors">
+             <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-transparent pointer-events-none opacity-50" />
+             <div className="relative z-10 flex flex-col md:flex-row gap-6 items-center">
+                <div className="flex-1">
+                   <h2 className="text-lg font-bold text-white mb-1">Check Availability</h2>
+                   <p className="text-sm text-zinc-400">Instantly check if your desired .{details.tld} domain is available across all registrars.</p>
+                </div>
+                
+                <div className="flex-1 w-full max-w-xl flex gap-3">
+                   <div className="relative flex-1 group/input">
+                      <input
+                        type="text"
+                        value={domainSearch}
+                        onChange={(e) => setDomainSearch(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && handleDomainCheck()}
+                        placeholder={`example.${details.tld}`}
+                        className="w-full h-12 bg-black/50 border border-white/10 rounded-lg pl-4 pr-4 text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all font-mono"
+                      />
+                   </div>
+                   <button
+                      onClick={handleDomainCheck}
+                      disabled={checkingDomain || !domainSearch.trim()}
+                      className="h-12 px-8 bg-emerald-500 text-white font-bold rounded-lg hover:bg-emerald-400 transition-all disabled:opacity-50 shadow-lg shadow-emerald-500/20"
+                    >
+                      {checkingDomain ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Check'}
+                   </button>
+                </div>
+             </div>
+
+             {/* Check Result */}
+             {domainResult && (
+                <div className="mt-6 pt-6 border-t border-white/5 animate-in fade-in slide-in-from-top-2">
+                   <div className={clsx(
+                      "p-4 rounded-lg border flex items-center justify-between",
+                      domainResult.is_available 
+                        ? "bg-emerald-500/10 border-emerald-500/20" 
+                        : "bg-rose-500/10 border-rose-500/20"
+                   )}>
+                      <div className="flex items-center gap-3">
+                         {domainResult.is_available ? (
+                            <div className="p-2 rounded-full bg-emerald-500/20 text-emerald-400"><Check className="w-5 h-5" /></div>
+                         ) : (
+                            <div className="p-2 rounded-full bg-rose-500/20 text-rose-400"><X className="w-5 h-5" /></div>
+                         )}
+                         <div>
+                            <div className="font-mono font-bold text-white text-lg">{domainResult.domain}</div>
+                            <div className={clsx("text-xs font-medium uppercase tracking-wider", domainResult.is_available ? "text-emerald-400" : "text-rose-400")}>
+                               {domainResult.is_available ? 'Available for registration' : 'Already Registered'}
+                            </div>
+                         </div>
+                      </div>
+                      
+                      {domainResult.is_available && (
+                         <a
+                            href={getRegistrarUrl(details.cheapest_registrar, domainResult.domain)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="px-4 py-2 bg-emerald-500 text-white text-sm font-bold rounded hover:bg-emerald-400 transition-colors flex items-center gap-2"
+                         >
+                            Buy at {details.cheapest_registrar} <ExternalLink className="w-4 h-4" />
+                         </a>
+                      )}
+                   </div>
+                </div>
+             )}
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+             
+             {/* Left Column: Chart & Info */}
+             <div className="lg:col-span-2 space-y-8">
+                
+                {/* Price History Chart */}
+                <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-6 backdrop-blur-sm shadow-xl">
                    <div className="flex items-center justify-between mb-6">
-            <h2 className="text-lg font-medium text-foreground">Price History</h2>
+                      <div>
-            <div className="flex items-center gap-1 bg-foreground/5 rounded-lg p-1">
+                         <h3 className="text-lg font-bold text-white">Price History</h3>
+                         <p className="text-xs text-zinc-500">Historical registration price trends</p>
+                      </div>
+                      <div className="flex bg-black/50 rounded-lg p-1 border border-white/5">
                         {(['1M', '3M', '1Y', 'ALL'] as ChartPeriod[]).map((period) => (
                           <button
                             key={period}
                             onClick={() => setChartPeriod(period)}
                             className={clsx(
-                    "px-3 py-1.5 text-xs font-medium rounded-md transition-all",
+                              "px-3 py-1 text-[10px] font-bold rounded transition-all",
                               chartPeriod === period
-                      ? "bg-accent text-background"
+                                ? "bg-zinc-800 text-white shadow-sm"
-                      : "text-foreground-muted hover:text-foreground"
+                                : "text-zinc-500 hover:text-zinc-300"
                             )}
                           >
                             {period}
@@ -486,118 +624,92 @@ export default function CommandTldDetailPage() {
                       </div>
                    </div>
                    
-          <div className="pl-14">
+                   <div className="h-64">
                       <PriceChart data={filteredHistory} chartStats={chartStats} />
                    </div>
 
-          {/* Chart Stats */}
+                   <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/5">
-          <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-border/30">
                       <div className="text-center">
-              <p className="text-xs text-foreground-subtle uppercase mb-1">Period High</p>
+                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">High</div>
-              <p className="text-lg font-medium text-foreground tabular-nums">${chartStats.high.toFixed(2)}</p>
+                         <div className="text-lg font-mono font-bold text-white">${chartStats.high.toFixed(2)}</div>
+                      </div>
+                      <div className="text-center border-l border-r border-white/5">
+                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">Average</div>
+                         <div className="text-lg font-mono font-bold text-white">${chartStats.avg.toFixed(2)}</div>
                       </div>
                       <div className="text-center">
-              <p className="text-xs text-foreground-subtle uppercase mb-1">Average</p>
+                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">Low</div>
-              <p className="text-lg font-medium text-foreground tabular-nums">${chartStats.avg.toFixed(2)}</p>
+                         <div className="text-lg font-mono font-bold text-emerald-400">${chartStats.low.toFixed(2)}</div>
-            </div>
-            <div className="text-center">
-              <p className="text-xs text-foreground-subtle uppercase mb-1">Period Low</p>
-              <p className="text-lg font-medium text-foreground tabular-nums">${chartStats.low.toFixed(2)}</p>
                       </div>
                    </div>
                 </div>
 
-        {/* Registrar Comparison */}
+                {/* TLD Info Cards */}
-        <div className="p-6 bg-background-secondary/30 border border-border/50 rounded-2xl">
+                <div className="grid grid-cols-2 gap-4">
-          <h2 className="text-lg font-medium text-foreground mb-6">Registrar Comparison</h2>
+                   <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 hover:border-white/10 transition-colors">
+                      <div className="flex items-center gap-2 text-zinc-500 mb-2">
+                         <Globe className="w-4 h-4" />
+                         <span className="text-xs uppercase tracking-widest">Type</span>
+                      </div>
+                      <div className="text-lg font-medium text-white capitalize">{details.type}</div>
+                   </div>
+                   <div className="bg-zinc-900/40 border border-white/5 rounded-xl p-4 hover:border-white/10 transition-colors">
+                      <div className="flex items-center gap-2 text-zinc-500 mb-2">
+                         <Building className="w-4 h-4" />
+                         <span className="text-xs uppercase tracking-widest">Registry</span>
+                      </div>
+                      <div className="text-lg font-medium text-white truncate" title={details.registry}>{details.registry}</div>
+                   </div>
+                </div>
+
+             </div>
+
+             {/* Right Column: Registrars Table */}
+             <div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm flex flex-col h-fit shadow-xl">
+                <div className="p-4 border-b border-white/5 bg-white/[0.02]">
+                   <h3 className="text-lg font-bold text-white">Registrar Prices</h3>
+                   <p className="text-xs text-zinc-500">Live comparison sorted by price</p>
+                </div>
                 
                 <div className="overflow-x-auto">
-            <table className="w-full">
+                   <table className="w-full text-left">
                       <thead>
-                <tr className="border-b border-border/30">
+                         <tr className="border-b border-white/5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider">
-                  <th className="text-left pb-3 text-sm font-medium text-foreground-muted">Registrar</th>
+                            <th className="px-4 py-3">Registrar</th>
-                  <th className="text-right pb-3 text-sm font-medium text-foreground-muted" title="First year registration price">Register</th>
+                            <th className="px-4 py-3 text-right">Reg</th>
-                  <th className="text-right pb-3 text-sm font-medium text-foreground-muted" title="Annual renewal price">Renew</th>
+                            <th className="px-4 py-3 text-right">Renew</th>
-                  <th className="text-right pb-3 text-sm font-medium text-foreground-muted" title="Transfer from another registrar">Transfer</th>
+                            <th className="px-4 py-3 text-right"></th>
-                  <th className="text-right pb-3"></th>
                          </tr>
                       </thead>
-              <tbody className="divide-y divide-border/20">
+                      <tbody className="divide-y divide-white/5">
                          {details.registrars.map((registrar, idx) => {
                             const hasRenewalTrap = registrar.renewal_price / registrar.registration_price > 1.5
-                  const isBestValue = idx === 0 && !hasRenewalTrap
+                            const isBest = idx === 0 && !hasRenewalTrap
 
                             return (
-                    <tr key={registrar.name} className={clsx(isBestValue && "bg-accent/5")}>
+                               <tr key={registrar.name} className="group hover:bg-white/[0.02] transition-colors">
-                      <td className="py-4">
+                                  <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
+                                     <div className="font-medium text-white text-sm">{registrar.name}</div>
-                          <span className="font-medium text-foreground">{registrar.name}</span>
+                                     {isBest && <span className="text-[10px] text-emerald-400 font-bold uppercase">Best Value</span>}
-                          {isBestValue && (
+                                     {idx === 0 && hasRenewalTrap && <span className="text-[10px] text-amber-400 font-bold uppercase">Renewal Trap</span>}
-                            <span 
-                              className="px-2 py-0.5 text-xs bg-accent/10 text-accent rounded-full cursor-help"
-                              title="Best overall value: lowest registration price without renewal trap"
-                            >
-                              Best
-                            </span>
-                          )}
-                          {idx === 0 && hasRenewalTrap && (
-                            <span 
-                              className="px-2 py-0.5 text-xs bg-amber-500/10 text-amber-400 rounded-full cursor-help"
-                              title="Cheapest registration but high renewal costs"
-                            >
-                              Cheap Start
-                            </span>
-                          )}
-                        </div>
                                   </td>
-                      <td className="py-4 text-right">
+                                  <td className="px-4 py-3 text-right">
-                        <span 
+                                     <div className={clsx("font-mono text-sm", isBest ? "text-emerald-400 font-bold" : "text-white")}>
-                          className={clsx(
-                            "font-medium tabular-nums cursor-help",
-                            isBestValue ? "text-accent" : "text-foreground"
-                          )}
-                          title={`First year: $${registrar.registration_price.toFixed(2)}`}
-                        >
                                         ${registrar.registration_price.toFixed(2)}
-                        </span>
-                      </td>
-                      <td className="py-4 text-right">
-                        <div className="flex items-center gap-1 justify-end">
-                          <span 
-                            className={clsx(
-                              "tabular-nums cursor-help",
-                              hasRenewalTrap ? "text-amber-400" : "text-foreground-muted"
-                            )}
-                            title={hasRenewalTrap 
-                              ? `Renewal is ${(registrar.renewal_price / registrar.registration_price).toFixed(1)}x the registration price` 
-                              : `Annual renewal: $${registrar.renewal_price.toFixed(2)}`}
-                          >
-                            ${registrar.renewal_price.toFixed(2)}
-                          </span>
-                          {hasRenewalTrap && (
-                            <span title={`Renewal trap: ${(registrar.renewal_price / registrar.registration_price).toFixed(1)}x registration price`}>
-                              <AlertTriangle className="w-3.5 h-3.5 text-amber-400 cursor-help" />
-                            </span>
-                          )}
                                      </div>
                                   </td>
-                      <td className="py-4 text-right">
+                                  <td className="px-4 py-3 text-right">
-                        <span 
+                                     <div className={clsx("font-mono text-sm", hasRenewalTrap ? "text-amber-400" : "text-zinc-500")}>
-                          className="text-foreground-muted tabular-nums cursor-help"
+                                        ${registrar.renewal_price.toFixed(2)}
-                          title={`Transfer from another registrar: $${registrar.transfer_price.toFixed(2)}`}
+                                     </div>
-                        >
-                          ${registrar.transfer_price.toFixed(2)}
-                        </span>
                                   </td>
-                      <td className="py-4 text-right">
+                                  <td className="px-4 py-3 text-right">
                                      <a 
                                         href={getRegistrarUrl(registrar.name)}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-sm text-accent hover:text-accent/80 transition-colors"
+                                        className="p-1.5 rounded bg-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-colors inline-block"
-                          title={`Register at ${registrar.name}`}
                                      >
-                          Visit
                                         <ExternalLink className="w-3.5 h-3.5" />
                                      </a>
                                   </td>
@@ -609,113 +721,10 @@ export default function CommandTldDetailPage() {
                 </div>
              </div>
 
-        {/* Quick Domain Check */}
-        <div className="p-6 bg-background-secondary/30 border border-border/50 rounded-2xl">
-          <h2 className="text-lg font-medium text-foreground mb-4">Quick Domain Check</h2>
-          <p className="text-sm text-foreground-muted mb-4">
-            Check if a domain is available with .{tld}
-          </p>
-          
-          <div className="flex gap-3">
-            <div className="flex-1 relative">
-              <input
-                type="text"
-                value={domainSearch}
-                onChange={(e) => setDomainSearch(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleDomainCheck()}
-                placeholder={`example or example.${tld}`}
-                className="w-full h-11 px-4 bg-background border border-border/50 rounded-xl
-                           text-sm text-foreground placeholder:text-foreground-subtle
-                           focus:outline-none focus:border-accent/50 transition-all"
-              />
-            </div>
-            <button
-              onClick={handleDomainCheck}
-              disabled={checkingDomain || !domainSearch.trim()}
-              className="h-11 px-6 bg-accent text-background font-medium rounded-xl
-                         hover:bg-accent-hover transition-all disabled:opacity-50"
-            >
-              {checkingDomain ? (
-                <RefreshCw className="w-4 h-4 animate-spin" />
-              ) : (
-                'Check'
-              )}
-            </button>
           </div>
 
-          {/* Result */}
-          {domainResult && (
-            <div className={clsx(
-              "mt-4 p-4 rounded-xl border",
-              domainResult.is_available 
-                ? "bg-accent/10 border-accent/30" 
-                : "bg-foreground/5 border-border/50"
-            )}>
-              <div className="flex items-center gap-3">
-                {domainResult.is_available ? (
-                  <Check className="w-5 h-5 text-accent" />
-                ) : (
-                  <X className="w-5 h-5 text-foreground-subtle" />
-                )}
-                <div>
-                  <p className="font-medium text-foreground">{domainResult.domain}</p>
-                  <p className="text-sm text-foreground-muted">
-                    {domainResult.is_available ? 'Available for registration!' : 'Already registered'}
-                  </p>
         </div>
       </div>
-              
-              {domainResult.is_available && (
-                <a
-                  href={getRegistrarUrl(details.cheapest_registrar, domainResult.domain)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-accent text-background text-sm font-medium rounded-lg hover:bg-accent-hover transition-all"
-                >
-                  Register at {details.cheapest_registrar}
-                  <ExternalLink className="w-3.5 h-3.5" />
-                </a>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* TLD Info */}
-        <div className="p-6 bg-background-secondary/30 border border-border/50 rounded-2xl">
-          <h2 className="text-lg font-medium text-foreground mb-4">TLD Information</h2>
-          
-          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="p-4 bg-background/50 rounded-xl">
-              <div className="flex items-center gap-2 text-foreground-muted mb-2">
-                <Globe className="w-4 h-4" />
-                <span className="text-xs uppercase">Type</span>
-              </div>
-              <p className="font-medium text-foreground capitalize">{details.type}</p>
-            </div>
-            <div className="p-4 bg-background/50 rounded-xl">
-              <div className="flex items-center gap-2 text-foreground-muted mb-2">
-                <Building className="w-4 h-4" />
-                <span className="text-xs uppercase">Registry</span>
-              </div>
-              <p className="font-medium text-foreground">{details.registry}</p>
-            </div>
-            <div className="p-4 bg-background/50 rounded-xl">
-              <div className="flex items-center gap-2 text-foreground-muted mb-2">
-                <Calendar className="w-4 h-4" />
-                <span className="text-xs uppercase">Introduced</span>
-              </div>
-              <p className="font-medium text-foreground">{details.introduced || 'Unknown'}</p>
-            </div>
-            <div className="p-4 bg-background/50 rounded-xl">
-              <div className="flex items-center gap-2 text-foreground-muted mb-2">
-                <BarChart3 className="w-4 h-4" />
-                <span className="text-xs uppercase">Registrars</span>
-              </div>
-              <p className="font-medium text-foreground">{details.registrars.length} tracked</p>
-            </div>
-          </div>
-        </div>
-      </PageContainer>
     </TerminalLayout>
   )
 }

frontend/src/app/terminal/listing/page.tsx

@@ -5,7 +5,6 @@ import { useSearchParams } from 'next/navigation'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
 import { TerminalLayout } from '@/components/TerminalLayout'
-import { PageContainer, StatCard, Badge, ActionButton } from '@/components/PremiumTable'
 import {
   Plus,
   Shield,
@@ -23,10 +22,77 @@ import {
   Tag,
   Store,
   Sparkles,
+  ArrowRight,
+  TrendingUp,
+  Globe,
+  MoreHorizontal
 } from 'lucide-react'
 import Link from 'next/link'
 import clsx from 'clsx'
 
+// ============================================================================
+// SHARED COMPONENTS
+// ============================================================================
+
+function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  return (
+    <div className="relative flex items-center group/tooltip w-fit">
+      {children}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
+        {content}
+        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
+      </div>
+    </div>
+  )
+}
+
+function StatCard({ 
+  label, 
+  value, 
+  subValue, 
+  icon: Icon, 
+  trend 
+}: { 
+  label: string
+  value: string | number
+  subValue?: string
+  icon: any
+  trend?: 'up' | 'down' | 'neutral' | 'active'
+}) {
+  return (
+    <div className="bg-zinc-900/40 border border-white/5 p-4 relative overflow-hidden group hover:border-white/10 transition-colors">
+      <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+        <Icon className="w-16 h-16" />
+      </div>
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 text-zinc-400 mb-1">
+          <Icon className="w-4 h-4" />
+          <span className="text-xs font-medium uppercase tracking-wider">{label}</span>
+        </div>
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-white tracking-tight">{value}</span>
+          {subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
+        </div>
+        {trend && (
+          <div className={clsx(
+            "mt-2 text-[10px] font-medium px-1.5 py-0.5 w-fit rounded border",
+            trend === 'up' && "text-emerald-400 border-emerald-400/20 bg-emerald-400/5",
+            trend === 'down' && "text-rose-400 border-rose-400/20 bg-rose-400/5",
+            trend === 'active' && "text-blue-400 border-blue-400/20 bg-blue-400/5 animate-pulse",
+            trend === 'neutral' && "text-zinc-400 border-zinc-400/20 bg-zinc-400/5",
+          )}>
+            {trend === 'active' ? '● LIVE MONITORING' : trend === 'up' ? '▲ POSITIVE' : '▼ NEGATIVE'}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
 interface Listing {
   id: number
   domain: string
@@ -60,6 +126,10 @@ interface VerificationInfo {
   status: string
 }
 
+// ============================================================================
+// MAIN PAGE
+// ============================================================================
+
 export default function MyListingsPage() {
   const { subscription } = useStore()
   const searchParams = useSearchParams()
@@ -68,7 +138,7 @@ export default function MyListingsPage() {
   const [listings, setListings] = useState<Listing[]>([])
   const [loading, setLoading] = useState(true)
   
-  // Modals - auto-open if domain is prefilled
+  // Modals
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showVerifyModal, setShowVerifyModal] = useState(false)
   const [selectedListing, setSelectedListing] = useState<Listing | null>(null)
@@ -78,7 +148,7 @@ export default function MyListingsPage() {
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)
   
-  // Create form
+  // Create form state
   const [newListing, setNewListing] = useState({
     domain: '',
     title: '',
@@ -104,7 +174,6 @@ export default function MyListingsPage() {
     loadListings()
   }, [loadListings])
 
-  // Auto-open create modal if domain is prefilled from portfolio
   useEffect(() => {
     if (prefillDomain) {
       setNewListing(prev => ({ ...prev, domain: prefillDomain }))
@@ -208,6 +277,7 @@ export default function MyListingsPage() {
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text)
     setSuccess('Copied to clipboard!')
+    setTimeout(() => setSuccess(null), 2000)
   }
 
   const formatPrice = (price: number | null, currency: string) => {
@@ -219,316 +289,366 @@ export default function MyListingsPage() {
     }).format(price)
   }
 
-  const getStatusBadge = (status: string, isVerified: boolean) => {
+  // Tier limits
-    if (status === 'active') return <Badge variant="success">Live</Badge>
-    if (status === 'draft' && !isVerified) return <Badge variant="warning">Needs Verification</Badge>
-    if (status === 'draft') return <Badge>Draft</Badge>
-    if (status === 'sold') return <Badge variant="accent">Sold</Badge>
-    return <Badge>{status}</Badge>
-  }
-
-  // Tier limits as per concept: Scout = 0 (blocked), Trader = 5, Tycoon = 50
   const tier = subscription?.tier || 'scout'
   const limits = { scout: 0, trader: 5, tycoon: 50 }
   const maxListings = limits[tier as keyof typeof limits] || 0
   const canList = tier !== 'scout'
 
+  const activeCount = listings.filter(l => l.status === 'active').length
+  const totalViews = listings.reduce((sum, l) => sum + l.view_count, 0)
+  const totalInquiries = listings.reduce((sum, l) => sum + l.inquiry_count, 0)
+
   return (
-    <TerminalLayout
+    <TerminalLayout hideHeaderSearch={true}>
-      title="My Listings"
+      <div className="relative font-sans text-zinc-100 selection:bg-emerald-500/30 pb-20">
-      subtitle={`Manage your domains for sale • ${listings.length}/${maxListings} slots used`}
+        
-      actions={
+        {/* Ambient Background Glow */}
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute top-0 right-1/4 w-[800px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] mix-blend-screen" />
+          <div className="absolute bottom-0 left-1/4 w-[600px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] mix-blend-screen" />
+        </div>
+
+        <div className="relative z-10 max-w-[1600px] mx-auto p-4 md:p-8 space-y-8">
+          
+          {/* Header Section */}
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-white/5 pb-8">
+            <div className="space-y-2">
               <div className="flex items-center gap-3">
+                <div className="h-8 w-1 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
+                <h1 className="text-3xl font-bold tracking-tight text-white">Portfolio</h1>
+              </div>
+              <p className="text-zinc-400 max-w-lg">
+                Manage your domain inventory, track performance, and process offers.
+              </p>
+            </div>
+            
+            <div className="flex gap-2">
               <Link
                 href="/buy"
-            className="flex items-center gap-2 px-4 py-2 text-foreground-muted text-sm font-medium 
+                className="px-4 py-2 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 text-sm font-medium text-zinc-300 transition-colors flex items-center gap-2"
-                       border border-border rounded-lg hover:bg-foreground/5 transition-all"
               >
-            <Store className="w-4 h-4" />
+                <Store className="w-4 h-4" /> Marketplace
-            Browse Marketplace
               </Link>
               <button
                 onClick={() => setShowCreateModal(true)}
                 disabled={listings.length >= maxListings}
-            className="flex items-center gap-2 px-4 py-2 bg-accent text-background text-sm font-medium rounded-lg
+                className="px-4 py-2 bg-emerald-500 text-white font-medium rounded-lg hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-                       hover:bg-accent-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed"
               >
-            <Plus className="w-4 h-4" />
+                <Plus className="w-4 h-4" /> New Listing
-            List Domain
               </button>
             </div>
-      }
-    >
-      <PageContainer>
-        {/* Scout Paywall */}
-        {!canList && (
-          <div className="p-6 bg-gradient-to-br from-accent/10 to-transparent border border-accent/20 rounded-2xl text-center">
-            <Shield className="w-12 h-12 text-accent mx-auto mb-4" />
-            <h2 className="text-xl font-semibold text-foreground mb-2">Upgrade to List Domains</h2>
-            <p className="text-foreground-muted mb-6 max-w-md mx-auto">
-              The Pounce marketplace is exclusive to Trader and Tycoon members. 
-              List your domains, get verified, and sell directly to buyers with 0% commission.
-            </p>
-            <div className="flex items-center justify-center gap-4">
-              <Link
-                href="/pricing"
-                className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background font-semibold rounded-xl hover:bg-accent/90 transition-all"
-              >
-                Upgrade to Trader • $9/mo
-              </Link>
           </div>
-          </div>
-        )}
 
           {/* Messages */}
           {error && (
-          <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3">
+            <div className="p-4 bg-rose-500/10 border border-rose-500/20 rounded-xl flex items-center gap-3 text-rose-400 animate-in fade-in slide-in-from-top-2">
-            <AlertCircle className="w-5 h-5 text-red-400" />
+              <AlertCircle className="w-5 h-5" />
-            <p className="text-sm text-red-400 flex-1">{error}</p>
+              <p className="text-sm flex-1">{error}</p>
-            <button onClick={() => setError(null)}><X className="w-4 h-4 text-red-400" /></button>
+              <button onClick={() => setError(null)}><X className="w-4 h-4" /></button>
             </div>
           )}
           
           {success && (
-          <div className="p-4 bg-accent/10 border border-accent/20 rounded-xl flex items-center gap-3">
+            <div className="p-4 bg-emerald-500/10 border border-emerald-500/20 rounded-xl flex items-center gap-3 text-emerald-400 animate-in fade-in slide-in-from-top-2">
-            <CheckCircle className="w-5 h-5 text-accent" />
+              <CheckCircle className="w-5 h-5" />
-            <p className="text-sm text-accent flex-1">{success}</p>
+              <p className="text-sm flex-1">{success}</p>
-            <button onClick={() => setSuccess(null)}><X className="w-4 h-4 text-accent" /></button>
+              <button onClick={() => setSuccess(null)}><X className="w-4 h-4" /></button>
             </div>
           )}
 
-        {/* Stats - only show if can list */}
+          {/* Paywall */}
+          {!canList && (
+            <div className="p-8 bg-gradient-to-br from-emerald-900/20 to-black border border-emerald-500/20 rounded-2xl text-center relative overflow-hidden">
+               <div className="absolute inset-0 bg-grid-white/[0.02] bg-[length:20px_20px]" />
+               <div className="relative z-10">
+                  <Shield className="w-12 h-12 text-emerald-400 mx-auto mb-4" />
+                  <h2 className="text-2xl font-bold text-white mb-2">Unlock Portfolio Management</h2>
+                  <p className="text-zinc-400 mb-6 max-w-md mx-auto">
+                    List your domains, verify ownership automatically, and sell directly to buyers with 0% commission on the Pounce Marketplace.
+                  </p>
+                  <Link
+                    href="/pricing"
+                    className="inline-flex items-center gap-2 px-6 py-3 bg-emerald-500 text-white font-bold rounded-xl hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/20"
+                  >
+                    Upgrade to Trader <ArrowRight className="w-4 h-4" />
+                  </Link>
+               </div>
+            </div>
+          )}
+
+          {/* Stats Grid */}
           {canList && (
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <StatCard title="My Listings" value={`${listings.length}/${maxListings}`} icon={Tag} />
               <StatCard 
-            title="Published" 
+                label="Inventory" 
-            value={listings.filter(l => l.status === 'active').length} 
+                value={listings.length}
-            icon={CheckCircle} 
+                subValue={`/ ${maxListings} slots`}
-            accent 
+                icon={Tag}
+                trend="neutral"
               />
               <StatCard 
-            title="Total Views" 
+                label="Active Listings" 
-            value={listings.reduce((sum, l) => sum + l.view_count, 0)} 
+                value={activeCount}
+                subValue="Live on market"
+                icon={Store}
+                trend="active"
+              />
+              <StatCard 
+                label="Total Views" 
+                value={totalViews}
+                subValue="All time"
                 icon={Eye}
+                trend={totalViews > 0 ? 'up' : 'neutral'}
               />
               <StatCard 
-            title="Inquiries" 
+                label="Inquiries" 
-            value={listings.reduce((sum, l) => sum + l.inquiry_count, 0)} 
+                value={totalInquiries}
+                subValue="Pending"
                 icon={MessageSquare}
+                trend={totalInquiries > 0 ? 'up' : 'neutral'}
               />
             </div>
           )}
 
-        {/* Listings */}
+          {/* Listings Table */}
           {canList && (
-        loading ? (
+            <div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm">
+              {/* Table Header */}
+              <div className="grid grid-cols-12 gap-4 px-6 py-3 bg-white/[0.02] border-b border-white/5 text-[11px] font-semibold text-zinc-500 uppercase tracking-wider">
+                <div className="col-span-12 md:col-span-5">Domain</div>
+                <div className="hidden md:block md:col-span-2 text-center">Status</div>
+                <div className="hidden md:block md:col-span-2 text-right">Price</div>
+                <div className="hidden md:block md:col-span-1 text-center">Views</div>
+                <div className="hidden md:block md:col-span-2 text-right">Actions</div>
+              </div>
+
+              {loading ? (
                 <div className="flex items-center justify-center py-20">
-            <Loader2 className="w-6 h-6 text-accent animate-spin" />
+                  <Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
                 </div>
               ) : listings.length === 0 ? (
-          <div className="text-center py-16 bg-background-secondary/30 border border-border rounded-2xl">
+                <div className="flex flex-col items-center justify-center py-20 text-center">
-            <Sparkles className="w-16 h-16 text-foreground-subtle mx-auto mb-6" />
+                  <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-4">
-            <h2 className="text-xl font-medium text-foreground mb-2">No Listings Yet</h2>
+                    <Sparkles className="w-8 h-8 text-zinc-600" />
-            <p className="text-foreground-muted mb-6 max-w-md mx-auto">
+                  </div>
-              Create your first listing to sell a domain on the Pounce marketplace.
+                  <h3 className="text-lg font-medium text-white mb-1">No listings yet</h3>
+                  <p className="text-zinc-500 text-sm max-w-xs mx-auto mb-6">
+                    Create your first listing to start selling.
                   </p>
                   <button
                     onClick={() => setShowCreateModal(true)}
-              className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
+                    className="text-emerald-400 text-sm hover:text-emerald-300 transition-colors flex items-center gap-2 font-medium"
                   >
-              <Plus className="w-5 h-5" />
+                    Create Listing <ArrowRight className="w-4 h-4" />
-              Create Listing
                   </button>
                 </div>
               ) : (
-          <div className="space-y-4">
+                <div className="divide-y divide-white/5">
                   {listings.map((listing) => (
-              <div
+                    <div key={listing.id} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
-                key={listing.id}
-                className="p-5 bg-background-secondary/30 border border-border rounded-2xl hover:border-border-hover transition-all"
-              >
-                <div className="flex flex-wrap items-start gap-4">
-                  {/* Domain Info */}
-                  <div className="flex-1 min-w-[200px]">
-                    <div className="flex items-center gap-3 mb-2">
-                      <h3 className="font-mono text-lg font-medium text-foreground">{listing.domain}</h3>
-                      {getStatusBadge(listing.status, listing.is_verified)}
-                      {listing.is_verified && (
-                        <div className="w-6 h-6 bg-accent/10 rounded flex items-center justify-center" title="Verified">
-                          <Shield className="w-3 h-3 text-accent" />
-                        </div>
-                      )}
-                    </div>
-                    {listing.title && (
-                      <p className="text-sm text-foreground-muted">{listing.title}</p>
-                    )}
-                  </div>
                       
-                  {/* Price */}
+                      {/* Mobile View */}
+                      <div className="md:hidden col-span-12">
+                         <div className="flex justify-between items-start mb-2">
+                            <div>
+                               <div className="font-mono font-bold text-white text-lg">{listing.domain}</div>
+                               <div className="text-xs text-zinc-500 mt-0.5">{listing.title || 'No headline'}</div>
+                            </div>
                             <div className="text-right">
-                    <p className="text-xl font-semibold text-foreground">
+                               <div className="font-mono text-emerald-400 font-bold">{formatPrice(listing.asking_price, listing.currency)}</div>
-                      {formatPrice(listing.asking_price, listing.currency)}
+                            </div>
-                    </p>
+                         </div>
-                    {listing.pounce_score && (
+                         <div className="flex justify-between items-center mt-3 pt-3 border-t border-white/5">
-                      <p className="text-xs text-foreground-muted">Score: {listing.pounce_score}</p>
+                            <span className={clsx(
-                    )}
+                              "text-[10px] font-bold uppercase px-2 py-0.5 rounded border",
+                              listing.status === 'active' ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" :
+                              listing.status === 'draft' ? "bg-zinc-800 text-zinc-400 border-zinc-700" :
+                              "bg-blue-500/10 text-blue-400 border-blue-500/20"
+                            )}>
+                              {listing.status}
+                            </span>
+                            <div className="flex gap-2">
+                               <button onClick={() => handleDelete(listing)} className="p-2 text-zinc-500 hover:text-rose-400"><Trash2 className="w-4 h-4" /></button>
+                               {!listing.is_verified && <button onClick={() => handleStartVerification(listing)} className="p-2 text-amber-400 hover:bg-amber-500/10 rounded"><Shield className="w-4 h-4" /></button>}
+                            </div>
+                         </div>
                       </div>
 
-                  {/* Stats */}
+                      {/* Desktop View */}
-                  <div className="flex items-center gap-4 text-sm text-foreground-muted">
+                      <div className="hidden md:block col-span-5">
-                    <span className="flex items-center gap-1">
+                        <div className="flex items-center gap-3">
-                      <Eye className="w-4 h-4" /> {listing.view_count}
+                           <div className={clsx(
-                    </span>
+                              "w-10 h-10 rounded-lg flex items-center justify-center text-lg font-bold",
-                    <span className="flex items-center gap-1">
+                              listing.status === 'active' ? "bg-emerald-500/10 text-emerald-400" : "bg-zinc-800 text-zinc-500"
-                      <MessageSquare className="w-4 h-4" /> {listing.inquiry_count}
+                           )}>
+                              {listing.domain.charAt(0).toUpperCase()}
+                           </div>
+                           <div>
+                              <div className="font-mono font-bold text-white tracking-tight">{listing.domain}</div>
+                              <div className="text-xs text-zinc-500">{listing.title || 'No description provided'}</div>
+                           </div>
+                        </div>
+                      </div>
+
+                      <div className="hidden md:flex col-span-2 justify-center">
+                         <span className={clsx(
+                              "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border",
+                              listing.status === 'active' ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" :
+                              listing.status === 'draft' ? "bg-zinc-800/50 text-zinc-400 border-zinc-700" :
+                              "bg-blue-500/10 text-blue-400 border-blue-500/20"
+                           )}>
+                              <span className={clsx("w-1.5 h-1.5 rounded-full", listing.status === 'active' ? "bg-emerald-400" : "bg-zinc-500")} />
+                              {listing.status}
                            </span>
                       </div>
 
-                  {/* Actions */}
+                      <div className="hidden md:block col-span-2 text-right">
-                  <div className="flex items-center gap-2">
+                         <div className="font-mono font-medium text-white">{formatPrice(listing.asking_price, listing.currency)}</div>
-                    {!listing.is_verified && (
+                         {listing.pounce_score && <div className="text-[10px] text-zinc-500 mt-0.5">Score: {listing.pounce_score}</div>}
+                      </div>
+
+                      <div className="hidden md:block col-span-1 text-center">
+                         <div className="text-sm text-zinc-400">{listing.view_count}</div>
+                      </div>
+
+                      <div className="hidden md:flex col-span-2 justify-end gap-2">
+                         {!listing.is_verified ? (
+                            <Tooltip content="Verify ownership to publish">
                                <button
                                  onClick={() => handleStartVerification(listing)}
-                        disabled={verifying}
+                                 className="p-2 rounded-lg bg-amber-500/10 text-amber-400 border border-amber-500/20 hover:bg-amber-500/20 transition-all"
-                        className="flex items-center gap-1.5 px-3 py-2 bg-amber-500/10 text-amber-400 text-sm font-medium rounded-lg hover:bg-amber-500/20 transition-all"
                                >
                                   <Shield className="w-4 h-4" />
-                        Verify
                                </button>
-                    )}
+                            </Tooltip>
-                    
+                         ) : listing.status === 'draft' ? (
-                    {listing.is_verified && listing.status === 'draft' && (
+                            <Tooltip content="Publish to Marketplace">
                                <button
                                  onClick={() => handlePublish(listing)}
-                        className="flex items-center gap-1.5 px-3 py-2 bg-accent text-background text-sm font-medium rounded-lg hover:bg-accent-hover transition-all"
+                                 className="p-2 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20 transition-all"
                                >
                                   <CheckCircle className="w-4 h-4" />
-                        Publish
                                </button>
-                    )}
+                            </Tooltip>
-                    
+                         ) : (
-                    {listing.status === 'active' && (
+                            <Tooltip content="View public listing">
                                <Link
                                  href={`/buy/${listing.slug}`}
                                  target="_blank"
-                        className="flex items-center gap-1.5 px-3 py-2 bg-foreground/5 text-foreground-muted text-sm font-medium rounded-lg hover:bg-foreground/10 transition-all"
+                                 className="p-2 rounded-lg bg-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all"
                                >
                                   <ExternalLink className="w-4 h-4" />
-                        View
                                </Link>
+                            </Tooltip>
                          )}
 
+                         <Tooltip content="Delete listing">
                             <button
                               onClick={() => handleDelete(listing)}
-                      className="p-2 text-foreground-subtle hover:text-red-400 transition-colors"
+                              className="p-2 rounded-lg text-zinc-600 hover:text-rose-400 hover:bg-rose-500/10 transition-all"
                             >
                                <Trash2 className="w-4 h-4" />
                             </button>
+                         </Tooltip>
                       </div>
-                </div>
+
                     </div>
                   ))}
                 </div>
-        )
               )}
-      </PageContainer>
+            </div>
+          )}
+
+        </div>
 
         {/* Create Modal */}
         {showCreateModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md">
-          <div className="w-full max-w-lg bg-background-secondary border border-border rounded-2xl p-6">
+            <div className="w-full max-w-lg bg-[#0A0A0A] border border-white/10 rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
-            <h2 className="text-xl font-semibold text-foreground mb-6">List Domain for Sale</h2>
+               <div className="p-6 border-b border-white/5">
+                  <h2 className="text-xl font-bold text-white">Create Listing</h2>
+                  <p className="text-sm text-zinc-500">List your domain for sale on the marketplace</p>
+               </div>
               
-            <form onSubmit={handleCreate} className="space-y-4">
+              <form onSubmit={handleCreate} className="p-6 space-y-5">
                 <div>
-                <label className="block text-sm text-foreground-muted mb-1">Domain *</label>
+                  <label className="block text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">Domain Name</label>
                   <input
                     type="text"
                     required
                     value={newListing.domain}
                     onChange={(e) => setNewListing({ ...newListing, domain: e.target.value })}
                     placeholder="example.com"
-                  className="w-full px-4 py-3 bg-background border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent"
+                    className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:bg-white/10 transition-all font-mono"
                   />
                 </div>
                 
                 <div>
-                <label className="block text-sm text-foreground-muted mb-1">Headline</label>
+                  <label className="block text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">Headline</label>
                   <input
                     type="text"
                     value={newListing.title}
                     onChange={(e) => setNewListing({ ...newListing, title: e.target.value })}
-                  placeholder="Perfect for AI startups"
+                    placeholder="Short, catchy title (e.g. Perfect for AI Startups)"
-                  className="w-full px-4 py-3 bg-background border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent"
+                    className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all"
-                />
-              </div>
-              
-              <div>
-                <label className="block text-sm text-foreground-muted mb-1">Description</label>
-                <textarea
-                  rows={3}
-                  value={newListing.description}
-                  onChange={(e) => setNewListing({ ...newListing, description: e.target.value })}
-                  placeholder="Tell potential buyers about this domain..."
-                  className="w-full px-4 py-3 bg-background border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent resize-none"
                   />
                 </div>
                 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                  <label className="block text-sm text-foreground-muted mb-1">Asking Price (USD)</label>
+                    <label className="block text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">Price (USD)</label>
                     <div className="relative">
-                    <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-subtle" />
+                      <DollarSign className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
                       <input
                         type="number"
                         value={newListing.asking_price}
                         onChange={(e) => setNewListing({ ...newListing, asking_price: e.target.value })}
-                      placeholder="Leave empty for 'Make Offer'"
+                        placeholder="Make Offer"
-                      className="w-full pl-9 pr-4 py-3 bg-background border border-border rounded-xl text-foreground placeholder:text-foreground-subtle focus:outline-none focus:border-accent"
+                        className="w-full pl-9 pr-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 transition-all font-mono"
                       />
                     </div>
                   </div>
                   
                   <div>
-                  <label className="block text-sm text-foreground-muted mb-1">Price Type</label>
+                    <label className="block text-xs font-bold text-zinc-500 uppercase tracking-wider mb-2">Type</label>
                     <select
                       value={newListing.price_type}
                       onChange={(e) => setNewListing({ ...newListing, price_type: e.target.value })}
-                    className="w-full px-4 py-3 bg-background border border-border rounded-xl text-foreground focus:outline-none focus:border-accent"
+                      className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white focus:outline-none focus:border-emerald-500/50 transition-all appearance-none"
                     >
                       <option value="negotiable">Negotiable</option>
                       <option value="fixed">Fixed Price</option>
-                    <option value="make_offer">Make Offer Only</option>
+                      <option value="make_offer">Make Offer</option>
                     </select>
                   </div>
                 </div>
                 
-              <label className="flex items-center gap-3 cursor-pointer">
+                <label className="flex items-center gap-3 cursor-pointer p-3 rounded-lg border border-white/5 hover:bg-white/5 transition-colors">
                   <input
                     type="checkbox"
                     checked={newListing.allow_offers}
                     onChange={(e) => setNewListing({ ...newListing, allow_offers: e.target.checked })}
-                  className="w-5 h-5 rounded border-border text-accent focus:ring-accent"
+                    className="w-5 h-5 rounded border-white/20 bg-black text-emerald-500 focus:ring-emerald-500 focus:ring-offset-0"
                   />
-                <span className="text-sm text-foreground">Allow buyers to make offers</span>
+                  <span className="text-sm text-zinc-300">Allow buyers to submit offers</span>
                 </label>
                 
                 <div className="flex gap-3 pt-4">
                   <button
                     type="button"
                     onClick={() => setShowCreateModal(false)}
-                  className="flex-1 px-4 py-3 border border-border text-foreground-muted rounded-xl hover:bg-foreground/5 transition-all"
+                    className="flex-1 px-4 py-3 border border-white/10 text-zinc-400 rounded-xl hover:bg-white/5 hover:text-white transition-all font-medium"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
                     disabled={creating}
-                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all disabled:opacity-50"
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-emerald-500 text-white font-bold rounded-xl hover:bg-emerald-400 transition-all disabled:opacity-50 shadow-lg shadow-emerald-500/20"
                   >
                     {creating ? <Loader2 className="w-5 h-5 animate-spin" /> : <Plus className="w-5 h-5" />}
-                  {creating ? 'Creating...' : 'Create'}
+                    {creating ? 'Creating...' : 'Create Listing'}
                   </button>
                 </div>
               </form>
@@ -536,73 +656,76 @@ export default function MyListingsPage() {
           </div>
         )}
 
-      {/* Verification Modal */}
+        {/* Verify Modal */}
         {showVerifyModal && verificationInfo && selectedListing && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md">
-          <div className="w-full max-w-xl bg-background-secondary border border-border rounded-2xl p-6">
+            <div className="w-full max-w-xl bg-[#0A0A0A] border border-white/10 rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
-            <h2 className="text-xl font-semibold text-foreground mb-2">Verify Domain Ownership</h2>
+               <div className="p-6 border-b border-white/5 bg-white/[0.02]">
-            <p className="text-sm text-foreground-muted mb-6">
+                  <h2 className="text-xl font-bold text-white mb-2">Verify Ownership</h2>
-              Add a DNS TXT record to prove you own <strong>{selectedListing.domain}</strong>
+                  <p className="text-sm text-zinc-400">
+                    Add this DNS TXT record to <strong>{selectedListing.domain}</strong> to prove you own it.
                   </p>
-            
-            <div className="space-y-4">
-              <div className="p-4 bg-background rounded-xl border border-border">
-                <p className="text-sm text-foreground-muted mb-2">Record Type</p>
-                <p className="font-mono text-foreground">{verificationInfo.dns_record_type}</p>
                </div>
               
-              <div className="p-4 bg-background rounded-xl border border-border">
+              <div className="p-6 space-y-6">
-                <p className="text-sm text-foreground-muted mb-2">Name / Host</p>
+                <div className="grid grid-cols-3 gap-4">
-                <div className="flex items-center justify-between">
+                   <div className="col-span-1">
-                  <p className="font-mono text-foreground">{verificationInfo.dns_record_name}</p>
+                      <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">Type</div>
-                  <button 
+                      <div className="p-3 bg-white/5 border border-white/10 rounded-lg font-mono text-white text-center">
-                    onClick={() => copyToClipboard(verificationInfo.dns_record_name)}
+                         {verificationInfo.dns_record_type}
-                    className="p-2 text-foreground-subtle hover:text-accent transition-colors"
+                      </div>
-                  >
+                   </div>
-                    <Copy className="w-4 h-4" />
+                   <div className="col-span-2">
-                  </button>
+                      <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">Name / Host</div>
+                      <div className="p-3 bg-white/5 border border-white/10 rounded-lg font-mono text-white flex justify-between items-center group cursor-pointer" onClick={() => copyToClipboard(verificationInfo.dns_record_name)}>
+                         <span className="truncate">{verificationInfo.dns_record_name}</span>
+                         <Copy className="w-4 h-4 text-zinc-500 group-hover:text-emerald-400 transition-colors" />
+                      </div>
                    </div>
                 </div>
                 
-              <div className="p-4 bg-background rounded-xl border border-border">
+                <div>
-                <p className="text-sm text-foreground-muted mb-2">Value</p>
+                   <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider mb-2">Value</div>
-                <div className="flex items-center justify-between">
+                   <div className="p-3 bg-white/5 border border-white/10 rounded-lg font-mono text-sm text-zinc-300 break-all flex justify-between items-start gap-4 group cursor-pointer" onClick={() => copyToClipboard(verificationInfo.dns_record_value)}>
-                  <p className="font-mono text-sm text-foreground break-all">{verificationInfo.dns_record_value}</p>
+                      {verificationInfo.dns_record_value}
-                  <button 
+                      <Copy className="w-4 h-4 text-zinc-500 group-hover:text-emerald-400 transition-colors shrink-0 mt-0.5" />
-                    onClick={() => copyToClipboard(verificationInfo.dns_record_value)}
-                    className="p-2 text-foreground-subtle hover:text-accent transition-colors shrink-0"
-                  >
-                    <Copy className="w-4 h-4" />
-                  </button>
                    </div>
                 </div>
                 
-              <div className="p-4 bg-accent/5 border border-accent/20 rounded-xl">
+                <div className="p-4 bg-emerald-500/5 border border-emerald-500/10 rounded-xl">
-                <p className="text-sm text-foreground-muted whitespace-pre-line">
+                  <p className="text-xs text-emerald-400/80 leading-relaxed">
-                  {verificationInfo.instructions}
+                    <InfoIcon className="w-4 h-4 inline mr-1.5 -mt-0.5" />
+                    After adding the record, it may take up to 24 hours to propagate, though typically it's instant. Click verify below to check.
                   </p>
                 </div>
               </div>
               
-            <div className="flex gap-3 mt-6">
+              <div className="flex gap-3 p-6 pt-0">
                 <button
                   onClick={() => setShowVerifyModal(false)}
-                className="flex-1 px-4 py-3 border border-border text-foreground-muted rounded-xl hover:bg-foreground/5 transition-all"
+                  className="flex-1 px-4 py-3 border border-white/10 text-zinc-400 rounded-xl hover:bg-white/5 hover:text-white transition-all font-medium"
                 >
                   Close
                 </button>
                 <button
                   onClick={handleCheckVerification}
                   disabled={verifying}
-                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all disabled:opacity-50"
+                  className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-emerald-500 text-white font-bold rounded-xl hover:bg-emerald-400 transition-all disabled:opacity-50 shadow-lg shadow-emerald-500/20"
                 >
-                {verifying ? <Loader2 className="w-5 h-5 animate-spin" /> : <RefreshCw className="w-5 h-5" />}
+                  {verifying ? <Loader2 className="w-5 h-5 animate-spin" /> : <Shield className="w-5 h-5" />}
-                {verifying ? 'Checking...' : 'Check Verification'}
+                  {verifying ? 'Verifying...' : 'Verify Now'}
                 </button>
               </div>
             </div>
           </div>
         )}
+      </div>
     </TerminalLayout>
   )
 }
+
+function InfoIcon(props: any) {
+   return (
+      <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+   )
+}

frontend/src/app/terminal/watchlist/page.tsx

@@ -4,17 +4,6 @@ import { useEffect, useState, useMemo, useCallback, memo } from 'react'
 import { useStore } from '@/lib/store'
 import { api, DomainHealthReport, HealthStatus } from '@/lib/api'
 import { TerminalLayout } from '@/components/TerminalLayout'
-import { 
-  PremiumTable, 
-  Badge, 
-  StatCard, 
-  PageContainer, 
-  TableActionButton,
-  SearchInput,
-  TabBar,
-  FilterBar,
-  ActionButton,
-} from '@/components/PremiumTable'
 import { Toast, useToast } from '@/components/Toast'
 import {
   Plus,
@@ -33,64 +22,130 @@ import {
   AlertTriangle,
   ShoppingCart,
   HelpCircle,
+  Search,
+  Filter,
+  CheckCircle2,
+  Globe,
+  Clock,
+  Calendar,
+  MoreVertical,
+  ChevronDown,
+  ArrowRight
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
 
-// Health status badge colors and icons (Ampel-System as per concept)
+// ============================================================================
-// 🟢 Online, 🟡 DNS Changed, 🔴 Offline/Error
+// SHARED COMPONENTS
+// ============================================================================
+
+function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  return (
+    <div className="relative flex items-center group/tooltip w-fit">
+      {children}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl">
+        {content}
+        {/* Arrow */}
+        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
+      </div>
+    </div>
+  )
+}
+
+function StatCard({ 
+  label, 
+  value, 
+  subValue, 
+  icon: Icon, 
+  trend 
+}: { 
+  label: string
+  value: string | number
+  subValue?: string
+  icon: any
+  trend?: 'up' | 'down' | 'neutral' | 'active'
+}) {
+  return (
+    <div className="bg-zinc-900/40 border border-white/5 p-4 relative overflow-hidden group hover:border-white/10 transition-colors">
+      <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+        <Icon className="w-16 h-16" />
+      </div>
+      <div className="relative z-10">
+        <div className="flex items-center gap-2 text-zinc-400 mb-1">
+          <Icon className="w-4 h-4" />
+          <span className="text-xs font-medium uppercase tracking-wider">{label}</span>
+        </div>
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold text-white tracking-tight">{value}</span>
+          {subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
+        </div>
+        {trend && (
+          <div className={clsx(
+            "mt-2 text-[10px] font-medium px-1.5 py-0.5 w-fit rounded border",
+            trend === 'up' && "text-emerald-400 border-emerald-400/20 bg-emerald-400/5",
+            trend === 'down' && "text-rose-400 border-rose-400/20 bg-rose-400/5",
+            trend === 'active' && "text-blue-400 border-blue-400/20 bg-blue-400/5 animate-pulse",
+            trend === 'neutral' && "text-zinc-400 border-zinc-400/20 bg-zinc-400/5",
+          )}>
+            {trend === 'active' ? '● LIVE MONITORING' : trend === 'up' ? '▲ POSITIVE' : '▼ NEGATIVE'}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Health status badge configuration
 const healthStatusConfig: Record<HealthStatus, { 
   label: string
   color: string
-  bgColor: string
   icon: typeof Activity
   description: string
-  ampel: '🟢' | '🟡' | '🔴' | '⚪'
+  dot: string
 }> = {
   healthy: { 
     label: 'Online', 
-    color: 'text-accent', 
+    color: 'text-emerald-400', 
-    bgColor: 'bg-accent/10 border-accent/20',
     icon: Activity,
-    description: 'Domain is active and well-maintained',
+    description: 'Domain is active and reachable',
-    ampel: '🟢'
+    dot: 'bg-emerald-400'
   },
   weakening: { 
-    label: 'DNS Changed', 
+    label: 'Issues', 
     color: 'text-amber-400', 
-    bgColor: 'bg-amber-400/10 border-amber-400/20',
     icon: AlertTriangle,
-    description: 'Warning signs detected - DNS or config changed',
+    description: 'Warning signs detected',
-    ampel: '🟡'
+    dot: 'bg-amber-400'
   },
   parked: { 
-    label: 'For Sale', 
+    label: 'Parked', 
-    color: 'text-orange-400', 
+    color: 'text-blue-400', 
-    bgColor: 'bg-orange-400/10 border-orange-400/20',
     icon: ShoppingCart,
-    description: 'Domain is parked and likely for sale',
+    description: 'Domain is parked/for sale',
-    ampel: '🟡'
+    dot: 'bg-blue-400'
   },
   critical: { 
     label: 'Offline', 
-    color: 'text-red-400', 
+    color: 'text-rose-400', 
-    bgColor: 'bg-red-400/10 border-red-400/20',
     icon: AlertTriangle,
-    description: 'Domain is offline or has critical errors',
+    description: 'Domain is offline/error',
-    ampel: '🔴'
+    dot: 'bg-rose-400'
   },
   unknown: { 
     label: 'Unknown', 
-    color: 'text-foreground-muted', 
+    color: 'text-zinc-400', 
-    bgColor: 'bg-foreground/5 border-border/30',
     icon: HelpCircle,
-    description: 'Could not determine status',
+    description: 'Status unknown',
-    ampel: '⚪'
+    dot: 'bg-zinc-600'
   },
 }
 
 type FilterStatus = 'watching' | 'portfolio' | 'available'
 
+// ============================================================================
+// MAIN PAGE
+// ============================================================================
+
 export default function WatchlistPage() {
   const { domains, addDomain, deleteDomain, refreshDomain, subscription } = useStore()
   const { toast, showToast, hideToast } = useToast()
@@ -108,7 +163,7 @@ export default function WatchlistPage() {
   const [loadingHealth, setLoadingHealth] = useState<Record<number, boolean>>({})
   const [selectedHealthDomainId, setSelectedHealthDomainId] = useState<number | null>(null)
 
-  // Memoized stats - avoids recalculation on every render
+  // Memoized stats
   const stats = useMemo(() => ({
     availableCount: domains?.filter(d => d.is_available).length || 0,
     watchingCount: domains?.filter(d => !d.is_available).length || 0,
@@ -127,20 +182,12 @@ export default function WatchlistPage() {
         return false
       }
       if (filterStatus === 'available' && !domain.is_available) return false
-      if (filterStatus === 'portfolio') return false // TODO: filter for verified own domains
+      // 'portfolio' logic would go here
-      // 'watching' shows all domains
       return true
     })
   }, [domains, searchQuery, filterStatus])
 
-  // Memoized tabs config - as per concept: Watching + My Portfolio
+  // Callbacks
-  const tabs = useMemo(() => [
-    { id: 'watching', label: 'Watching', icon: Eye, count: stats.domainsUsed },
-    { id: 'portfolio', label: 'My Portfolio', icon: Shield, count: 0 }, // TODO: verified own domains
-    { id: 'available', label: 'Available', icon: Sparkles, count: stats.availableCount, color: 'accent' as const },
-  ], [stats])
-
-  // Callbacks - prevent recreation on every render
   const handleAddDomain = useCallback(async (e: React.FormEvent) => {
     e.preventDefault()
     if (!newDomain.trim()) return
@@ -210,84 +257,296 @@ export default function WatchlistPage() {
     }
   }, [loadingHealth, showToast])
 
-  // Dynamic subtitle
+  return (
-  const subtitle = useMemo(() => {
+    <TerminalLayout hideHeaderSearch={true}>
-    if (stats.domainsUsed === 0) return 'Start tracking domains to monitor their availability'
+      <div className="relative font-sans text-zinc-100 selection:bg-emerald-500/30">
-    return `Monitoring ${stats.domainsUsed} domain${stats.domainsUsed !== 1 ? 's' : ''} • ${stats.domainLimit === -1 ? 'Unlimited' : `${stats.domainLimit - stats.domainsUsed} slots left`}`
+        {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-  }, [stats])
         
-  // Memoized columns config
+        {/* Ambient Background Glow */}
-  const columns = useMemo(() => [
+        <div className="fixed inset-0 pointer-events-none overflow-hidden">
-    {
+          <div className="absolute top-0 right-1/4 w-[800px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] mix-blend-screen" />
-      key: 'domain',
+          <div className="absolute bottom-0 left-1/4 w-[600px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] mix-blend-screen" />
-      header: 'Domain',
+        </div>
-      render: (domain: any) => (
+
+        <div className="relative z-10 max-w-[1600px] mx-auto p-4 md:p-8 space-y-8">
+          
+          {/* Header Section */}
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-white/5 pb-8">
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-1 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
+                <h1 className="text-3xl font-bold tracking-tight text-white">Watchlist</h1>
+              </div>
+              <p className="text-zinc-400 max-w-lg">
+                Monitor availability, expiration dates, and health metrics for your critical domains.
+              </p>
+            </div>
+            
+            {/* Quick Stats Pills */}
+            <div className="flex gap-2">
+               <div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300">
+                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                {stats.watchingCount} Active
+              </div>
+              <div className="px-3 py-1.5 rounded-full bg-white/5 border border-white/10 flex items-center gap-2 text-xs font-medium text-zinc-300">
+                <Sparkles className="w-3.5 h-3.5 text-amber-400" />
+                {stats.availableCount} Available
+              </div>
+            </div>
+          </div>
+
+          {/* Metric Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <StatCard 
+              label="Total Assets" 
+              value={stats.domainsUsed} 
+              subValue={`/ ${stats.domainLimit === -1 ? '∞' : stats.domainLimit}`}
+              icon={Eye}
+              trend="active"
+            />
+            <StatCard 
+              label="Actionable" 
+              value={stats.availableCount} 
+              subValue="Domains"
+              icon={Sparkles}
+              trend={stats.availableCount > 0 ? 'up' : 'neutral'}
+            />
+            <StatCard 
+              label="Monitoring" 
+              value={stats.watchingCount} 
+              subValue="Checks/hr"
+              icon={Activity}
+            />
+             <StatCard 
+              label="Plan Usage" 
+              value={`${Math.round((stats.domainsUsed / (stats.domainLimit === -1 ? 100 : stats.domainLimit)) * 100)}%`} 
+              subValue="Capacity"
+              icon={Shield}
+              trend={stats.domainsUsed >= stats.domainLimit ? 'down' : 'neutral'}
+            />
+          </div>
+
+          {/* Control Bar */}
+          <div className="sticky top-4 z-30 bg-black/80 backdrop-blur-md border border-white/10 rounded-xl p-2 flex flex-col md:flex-row gap-4 items-center justify-between shadow-2xl">
+            {/* Filter Pills */}
+            <div className="flex items-center gap-1 bg-white/5 p-1 rounded-lg">
+              {(['watching', 'available'] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setFilterStatus(tab)}
+                  className={clsx(
+                    "px-4 py-1.5 rounded-md text-xs font-medium transition-all",
+                    filterStatus === tab 
+                      ? "bg-zinc-800 text-white shadow-sm" 
+                      : "text-zinc-400 hover:text-zinc-200 hover:bg-white/5"
+                  )}
+                >
+                  {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            {/* Add Domain Input */}
+            <form onSubmit={handleAddDomain} className="flex-1 max-w-md w-full relative group">
+              <input
+                type="text"
+                value={newDomain}
+                onChange={(e) => setNewDomain(e.target.value)}
+                placeholder="Add domain to watch (e.g. apple.com)..."
+                className="w-full bg-black/50 border border-white/10 rounded-lg pl-10 pr-12 py-2 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all"
+              />
+              <Plus className="absolute left-3 top-2.5 w-4 h-4 text-zinc-500 group-focus-within:text-emerald-500 transition-colors" />
+              <button 
+                type="submit"
+                disabled={adding || !newDomain.trim() || !canAddMore}
+                className="absolute right-2 top-1.5 p-1 hover:bg-emerald-500/20 rounded text-zinc-500 hover:text-emerald-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {adding ? <Loader2 className="w-4 h-4 animate-spin" /> : <ArrowUpRight className="w-4 h-4" />}
+              </button>
+            </form>
+
+            {/* Search Filter */}
+             <div className="relative w-full md:w-64">
+              <Search className="absolute left-3 top-2.5 w-4 h-4 text-zinc-500" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Filter watchlist..."
+                className="w-full bg-black/50 border border-white/10 rounded-lg pl-9 pr-4 py-2 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-white/20 transition-all"
+              />
+            </div>
+          </div>
+
+          {/* Limit Warning */}
+          {!canAddMore && (
+            <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-3 flex items-center justify-between">
+              <div className="flex items-center gap-2 text-sm text-amber-400">
+                <AlertTriangle className="w-4 h-4" />
+                <span>Limit reached. Upgrade plan to track more domains.</span>
+              </div>
+              <Link href="/pricing" className="text-xs font-bold text-amber-400 hover:text-amber-300 flex items-center gap-1 uppercase tracking-wide">
+                Upgrade <ArrowUpRight className="w-3 h-3" />
+              </Link>
+            </div>
+          )}
+
+          {/* Data Grid */}
+          <div className="bg-zinc-900/40 border border-white/5 rounded-xl overflow-hidden backdrop-blur-sm">
+            {/* Table Header */}
+            <div className="grid grid-cols-12 gap-4 px-6 py-3 bg-white/[0.02] border-b border-white/5 text-[11px] font-semibold text-zinc-500 uppercase tracking-wider">
+              <div className="col-span-12 md:col-span-4">Domain</div>
+              <div className="hidden md:block md:col-span-2 text-center">Status</div>
+              <div className="hidden md:block md:col-span-2 text-center">Health</div>
+              <div className="hidden md:block md:col-span-2 text-center">Alerts</div>
+              <div className="hidden md:block md:col-span-2 text-right">Actions</div>
+            </div>
+
+            {filteredDomains.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-20 text-center">
+                <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-4">
+                  <Eye className="w-8 h-8 text-zinc-600" />
+                </div>
+                <h3 className="text-lg font-medium text-white mb-1">
+                  {searchQuery ? "No matches found" : "Watchlist is empty"}
+                </h3>
+                <p className="text-zinc-500 text-sm max-w-xs mx-auto mb-6">
+                  {searchQuery ? "Try adjusting your filters." : "Start by adding domains you want to track above."}
+                </p>
+                {!searchQuery && (
+                  <button 
+                    onClick={() => document.querySelector('input')?.focus()}
+                    className="text-emerald-400 text-sm hover:text-emerald-300 transition-colors flex items-center gap-2"
+                  >
+                    Add first domain <ArrowRight className="w-4 h-4" />
+                  </button>
+                )}
+              </div>
+            ) : (
+              <div className="divide-y divide-white/5">
+                {filteredDomains.map((domain) => {
+                  const health = healthReports[domain.id]
+                  const healthConfig = health ? healthStatusConfig[health.status] : null
+                  
+                  return (
+                    <div key={domain.id} className="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-white/[0.04] transition-all group relative">
+                      
+                      {/* Mobile Layout (Visible only on mobile) */}
+                      <div className="md:hidden col-span-12 space-y-3">
+                         <div className="flex justify-between items-start">
+                            <div>
+                              <div className="font-mono font-bold text-white text-lg">{domain.name}</div>
+                              <div className="flex items-center gap-2 mt-1">
+                                <span className={clsx(
+                                  "text-xs px-2 py-0.5 rounded-full border",
+                                  domain.is_available 
+                                    ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" 
+                                    : "bg-zinc-800 text-zinc-400 border-zinc-700"
+                                )}>
+                                  {domain.is_available ? 'AVAILABLE' : 'TAKEN'}
+                                </span>
+                              </div>
+                            </div>
+                            <button
+                              onClick={() => handleDelete(domain.id, domain.name)}
+                              className="p-2 text-zinc-500 hover:text-rose-400 transition-colors"
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </button>
+                         </div>
+                         
+                         <div className="flex justify-between items-center pt-2 border-t border-white/5">
+                            <button
+                              onClick={() => handleHealthCheck(domain.id)}
+                              className="text-xs text-zinc-400 flex items-center gap-1.5 hover:text-white"
+                            >
+                              <Activity className="w-3.5 h-3.5" />
+                              Check Health
+                            </button>
+                            <button
+                               onClick={() => handleToggleNotify(domain.id, domain.notify_on_available)}
+                               className={clsx(
+                                 "text-xs flex items-center gap-1.5",
+                                 domain.notify_on_available ? "text-emerald-400" : "text-zinc-500"
+                               )}
+                            >
+                              {domain.notify_on_available ? <Bell className="w-3.5 h-3.5" /> : <BellOff className="w-3.5 h-3.5" />}
+                              {domain.notify_on_available ? 'Alerts On' : 'Alerts Off'}
+                            </button>
+                         </div>
+                      </div>
+
+                      {/* Desktop Layout */}
+                      {/* Domain */}
+                      <div className="hidden md:block col-span-4">
                         <div className="flex items-center gap-3">
                           <div className="relative">
-            <span className={clsx(
+                            <div className={clsx(
-              "block w-3 h-3 rounded-full",
+                              "w-2 h-2 rounded-full",
-              domain.is_available ? "bg-accent" : "bg-foreground-muted/50"
+                              domain.is_available ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" : "bg-zinc-600"
                             )} />
-            {domain.is_available && (
+                            {domain.is_available && <div className="absolute inset-0 bg-emerald-500 rounded-full animate-ping opacity-50" />}
-              <span className="absolute inset-0 rounded-full bg-accent animate-ping opacity-50" />
-            )}
                           </div>
-          <div>
+                          <span className="font-mono font-bold text-white text-[15px] tracking-tight">{domain.name}</span>
-            <span className="font-mono font-medium text-foreground">{domain.name}</span>
-            {domain.is_available && (
-              <span className="ml-2"><Badge variant="success" size="xs">AVAILABLE</Badge></span>
-            )}
                         </div>
                       </div>
-      ),
+
-    },
+                      {/* Status */}
-    {
+                      <div className="hidden md:flex col-span-2 justify-center">
-      key: 'health',
-      header: 'Health',
-      align: 'center' as const,
-      width: '100px',
-      hideOnMobile: true,
-      render: (domain: any) => {
-        const health = healthReports[domain.id]
-        if (health) {
-          const config = healthStatusConfig[health.status]
-          return (
-            <div className={clsx("inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border", config.bgColor)}>
-              <span className="text-sm">{config.ampel}</span>
-              <span className={clsx("text-xs font-medium", config.color)}>{config.label}</span>
-            </div>
-          )
-        }
-        return (
                          <span className={clsx(
-            "text-sm",
+                            "text-[11px] font-medium px-2 py-0.5 rounded border uppercase tracking-wider",
-            domain.is_available ? "text-accent font-medium" : "text-foreground-muted"
+                            domain.is_available 
+                              ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" 
+                              : "bg-zinc-800 text-zinc-400 border-zinc-700"
                           )}>
-            {domain.is_available ? '🟢 Available' : '⚪ Checking...'}
+                            {domain.is_available ? 'Available' : 'Registered'}
                           </span>
-        )
+                      </div>
-      },
+
-    },
+                      {/* Health */}
-    {
+                      <div className="hidden md:flex col-span-2 justify-center">
-      key: 'notifications',
+                        {healthConfig ? (
-      header: 'Alerts',
+                           <Tooltip content={healthConfig.description}>
-      align: 'center' as const,
-      width: '80px',
-      hideOnMobile: true,
-      render: (domain: any) => (
                             <button 
-          onClick={(e) => {
+                              onClick={() => setSelectedHealthDomainId(domain.id)}
-            e.stopPropagation()
+                              className={clsx(
-            handleToggleNotify(domain.id, domain.notify_on_available)
+                                "flex items-center gap-2 px-2 py-1 rounded hover:bg-white/5 transition-colors",
-          }}
+                                healthConfig.color
+                              )}
+                            >
+                              <healthConfig.icon className="w-4 h-4" />
+                              <span className="text-xs font-medium">{healthConfig.label}</span>
+                            </button>
+                          </Tooltip>
+                        ) : (
+                          <Tooltip content="Click to run health check">
+                            <button 
+                              onClick={() => handleHealthCheck(domain.id)}
+                              disabled={loadingHealth[domain.id]}
+                              className="text-zinc-600 hover:text-zinc-400 transition-colors"
+                            >
+                              {loadingHealth[domain.id] ? (
+                                <Loader2 className="w-4 h-4 animate-spin" />
+                              ) : (
+                                <Activity className="w-4 h-4" />
+                              )}
+                            </button>
+                          </Tooltip>
+                        )}
+                      </div>
+
+                      {/* Alerts */}
+                      <div className="hidden md:flex col-span-2 justify-center">
+                         <Tooltip content={domain.notify_on_available ? "Notifications enabled" : "Notifications disabled"}>
+                            <button
+                              onClick={() => handleToggleNotify(domain.id, domain.notify_on_available)}
                               disabled={togglingNotifyId === domain.id}
                               className={clsx(
-            "p-2 rounded-lg transition-colors",
+                                "p-1.5 rounded-lg transition-all",
                                 domain.notify_on_available 
-              ? "bg-accent/10 text-accent hover:bg-accent/20" 
+                                  ? "text-emerald-400 bg-emerald-400/10 hover:bg-emerald-400/20" 
-              : "text-foreground-muted hover:bg-foreground/5"
+                                  : "text-zinc-600 hover:text-zinc-400 hover:bg-white/5"
                               )}
-          title={domain.notify_on_available ? "Disable alerts" : "Enable alerts"}
                             >
                               {togglingNotifyId === domain.id ? (
                                 <Loader2 className="w-4 h-4 animate-spin" />
@@ -297,119 +556,52 @@ export default function WatchlistPage() {
                                 <BellOff className="w-4 h-4" />
                               )}
                             </button>
-      ),
+                         </Tooltip>
-    },
+                      </div>
-    {
+
-      key: 'actions',
+                      {/* Actions */}
-      header: '',
+                      <div className="hidden md:flex col-span-2 justify-end items-center gap-2">
-      align: 'right' as const,
+                        <Tooltip content="Force refresh status">
-      render: (domain: any) => (
+                           <button
-        <div className="flex items-center gap-1 justify-end">
-          <TableActionButton
-            icon={Activity}
-            onClick={() => handleHealthCheck(domain.id)}
-            loading={loadingHealth[domain.id]}
-            title="Health check (DNS, HTTP, SSL)"
-            variant={healthReports[domain.id] ? 'accent' : 'default'}
-          />
-          <TableActionButton
-            icon={RefreshCw}
                             onClick={() => handleRefresh(domain.id)}
-            loading={refreshingId === domain.id}
+                            className={clsx(
-            title="Refresh availability"
+                              "p-1.5 rounded-lg text-zinc-500 hover:text-white hover:bg-white/10 transition-colors",
-          />
+                              refreshingId === domain.id && "animate-spin text-emerald-400"
-          <TableActionButton
+                            )}
-            icon={Trash2}
+                          >
+                            <RefreshCw className="w-4 h-4" />
+                          </button>
+                        </Tooltip>
+
+                        <Tooltip content="Remove from watchlist">
+                          <button
                             onClick={() => handleDelete(domain.id, domain.name)}
-            variant="danger"
+                            className="p-1.5 rounded-lg text-zinc-500 hover:text-rose-400 hover:bg-rose-400/10 transition-colors"
-            loading={deletingId === domain.id}
+                          >
-            title="Remove"
+                            <Trash2 className="w-4 h-4" />
-          />
+                          </button>
+                        </Tooltip>
+
                         {domain.is_available && (
+                           <Tooltip content="Register at Namecheap">
                             <a
                               href={`https://www.namecheap.com/domains/registration/results/?domain=${domain.name}`}
                               target="_blank"
                               rel="noopener noreferrer"
-              onClick={(e) => e.stopPropagation()}
+                              className="ml-2 flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500 text-white text-[11px] font-bold uppercase tracking-wider rounded hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
-              className="flex items-center gap-1.5 px-3 py-2 bg-accent text-background text-xs font-medium 
-                         rounded-lg hover:bg-accent-hover transition-colors ml-1"
                             >
-              Register <ExternalLink className="w-3 h-3" />
+                              Buy <ArrowRight className="w-3 h-3" />
                             </a>
+                          </Tooltip>
                         )}
                       </div>
-      ),
-    },
-  ], [healthReports, togglingNotifyId, loadingHealth, refreshingId, deletingId, handleToggleNotify, handleHealthCheck, handleRefresh, handleDelete])
-
-  return (
-    <TerminalLayout title="Watchlist" subtitle={subtitle}>
-      {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
-
-      <PageContainer>
-        {/* Stats Cards */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <StatCard title="Total Watched" value={stats.domainsUsed} icon={Eye} />
-          <StatCard title="Available" value={stats.availableCount} icon={Sparkles} />
-          <StatCard title="Monitoring" value={stats.watchingCount} subtitle="active checks" icon={Activity} />
-          <StatCard title="Plan Limit" value={stats.domainLimit === -1 ? '∞' : stats.domainLimit} subtitle={`${stats.domainsUsed} used`} icon={Shield} />
                     </div>
-
+                  )
-        {/* Add Domain Form */}
+                })}
-        <FilterBar>
-          <SearchInput
-            value={newDomain}
-            onChange={setNewDomain}
-            placeholder="Enter domain to track (e.g., dream.com)"
-            className="flex-1"
-          />
-          <ActionButton
-            onClick={() => handleAddDomain({} as React.FormEvent)}
-            disabled={adding || !newDomain.trim() || !canAddMore}
-            icon={adding ? Loader2 : Plus}
-          >
-            Add Domain
-          </ActionButton>
-        </FilterBar>
-
-        {!canAddMore && (
-          <div className="flex items-center justify-between p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl">
-            <p className="text-sm text-amber-400">
-              You've reached your domain limit. Upgrade to track more.
-            </p>
-            <Link
-              href="/pricing"
-              className="text-sm font-medium text-amber-400 hover:text-amber-300 flex items-center gap-1"
-            >
-              Upgrade <ArrowUpRight className="w-3 h-3" />
-            </Link>
               </div>
             )}
-
+          </div>
-        {/* Filters */}
+        </div>
-        <FilterBar className="justify-between">
-          <TabBar
-            tabs={tabs}
-            activeTab={filterStatus}
-            onChange={(id) => setFilterStatus(id as FilterStatus)}
-          />
-          <SearchInput
-            value={searchQuery}
-            onChange={setSearchQuery}
-            placeholder="Filter domains..."
-            className="w-full sm:w-64"
-          />
-        </FilterBar>
-
-        {/* Domain Table */}
-        <PremiumTable
-          data={filteredDomains}
-          keyExtractor={(d) => d.id}
-          emptyIcon={<Eye className="w-12 h-12 text-foreground-subtle" />}
-          emptyTitle={stats.domainsUsed === 0 ? "Your watchlist is empty" : "No domains match your filters"}
-          emptyDescription={stats.domainsUsed === 0 ? "Add a domain above to start tracking" : "Try adjusting your filter criteria"}
-          columns={columns}
-        />
 
         {/* Health Report Modal */}
         {selectedHealthDomainId && healthReports[selectedHealthDomainId] && (
@@ -418,7 +610,7 @@ export default function WatchlistPage() {
             onClose={() => setSelectedHealthDomainId(null)} 
           />
         )}
-      </PageContainer>
+      </div>
     </TerminalLayout>
   )
 }
@@ -436,190 +628,130 @@ const HealthReportModal = memo(function HealthReportModal({
 
   return (
     <div 
-      className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4"
+      className="fixed inset-0 z-[100] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
       onClick={onClose}
     >
       <div 
-        className="w-full max-w-lg bg-background-secondary border border-border/50 rounded-2xl shadow-2xl overflow-hidden"
+        className="w-full max-w-lg bg-[#0A0A0A] border border-white/10 rounded-2xl shadow-2xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-5 border-b border-border/50">
+        <div className="flex items-center justify-between p-5 border-b border-white/5 bg-white/[0.02]">
           <div className="flex items-center gap-3">
-            <div className={clsx("p-2 rounded-lg border", config.bgColor)}>
+            <div className={clsx("p-2 rounded-lg bg-white/5 border border-white/10")}>
               <Icon className={clsx("w-5 h-5", config.color)} />
             </div>
             <div>
-              <h3 className="font-mono font-semibold text-foreground">{report.domain}</h3>
+              <h3 className="font-mono font-bold text-lg text-white tracking-tight">{report.domain}</h3>
-              <p className="text-xs text-foreground-muted">{config.description}</p>
+              <p className="text-xs text-zinc-500">{config.description}</p>
             </div>
           </div>
-          <button onClick={onClose} className="p-1 text-foreground-muted hover:text-foreground transition-colors">
+          <button onClick={onClose} className="p-2 hover:bg-white/10 rounded-full text-zinc-500 hover:text-white transition-colors">
             <X className="w-5 h-5" />
           </button>
         </div>
 
         {/* Score */}
-        <div className="p-5 border-b border-border/30">
+        <div className="p-6 border-b border-white/5">
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between mb-2">
-            <span className="text-sm text-foreground-muted">Health Score</span>
+            <span className="text-xs font-medium text-zinc-500 uppercase tracking-wider">Health Score</span>
-            <div className="flex items-center gap-3">
-              <div className="w-32 h-2 bg-foreground/10 rounded-full overflow-hidden">
-                <div 
-                  className={clsx(
-                    "h-full rounded-full transition-all",
-                    report.score >= 70 ? "bg-accent" :
-                    report.score >= 40 ? "bg-amber-400" : "bg-red-400"
-                  )}
-                  style={{ width: `${report.score}%` }}
-                />
-              </div>
             <span className={clsx(
-                "text-lg font-bold tabular-nums",
+              "text-2xl font-bold tabular-nums",
-                report.score >= 70 ? "text-accent" :
+              report.score >= 70 ? "text-emerald-400" :
-                report.score >= 40 ? "text-amber-400" : "text-red-400"
+              report.score >= 40 ? "text-amber-400" : "text-rose-400"
             )}>
               {report.score}/100
             </span>
           </div>
+          <div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
+            <div 
+              className={clsx(
+                "h-full rounded-full transition-all duration-1000",
+                report.score >= 70 ? "bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" :
+                report.score >= 40 ? "bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.5)]" : "bg-rose-500 shadow-[0_0_10px_rgba(244,63,94,0.5)]"
+              )}
+              style={{ width: `${report.score}%` }}
+            />
           </div>
         </div>
 
         {/* Check Results */}
-        <div className="p-5 space-y-4 max-h-80 overflow-y-auto">
+        <div className="p-6 space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar">
-          {/* DNS */}
-          {report.dns && (
-            <div className="p-4 bg-foreground/5 rounded-xl">
-              <h4 className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
-                <span className={clsx(
-                  "w-2 h-2 rounded-full",
-                  report.dns.has_ns && report.dns.has_a ? "bg-accent" : "bg-red-400"
-                )} />
-                DNS Infrastructure
-              </h4>
-              <div className="grid grid-cols-3 gap-2 text-xs">
-                <div className="flex items-center gap-1.5">
-                  <span className={report.dns.has_ns ? "text-accent" : "text-red-400"}>
-                    {report.dns.has_ns ? '✓' : '✗'}
-                  </span>
-                  <span className="text-foreground-muted">Nameservers</span>
-                </div>
-                <div className="flex items-center gap-1.5">
-                  <span className={report.dns.has_a ? "text-accent" : "text-red-400"}>
-                    {report.dns.has_a ? '✓' : '✗'}
-                  </span>
-                  <span className="text-foreground-muted">A Record</span>
-                </div>
-                <div className="flex items-center gap-1.5">
-                  <span className={report.dns.has_mx ? "text-accent" : "text-foreground-muted"}>
-                    {report.dns.has_mx ? '✓' : '—'}
-                  </span>
-                  <span className="text-foreground-muted">MX Record</span>
-                </div>
-              </div>
-              {report.dns.is_parked && (
-                <p className="mt-2 text-xs text-orange-400">⚠ Parked at {report.dns.parking_provider || 'unknown provider'}</p>
-              )}
-            </div>
-          )}
           
-          {/* HTTP */}
+          {/* Section: Infrastructure */}
-          {report.http && (
+          <div>
-            <div className="p-4 bg-foreground/5 rounded-xl">
+             <h4 className="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-3 flex items-center gap-2">
-              <h4 className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
+                <Globe className="w-3 h-3" /> Infrastructure
-                <span className={clsx(
-                  "w-2 h-2 rounded-full",
-                  report.http.is_reachable && report.http.status_code === 200 ? "bg-accent" : 
-                  report.http.is_reachable ? "bg-amber-400" : "bg-red-400"
-                )} />
-                Website Status
              </h4>
-              <div className="flex items-center gap-4 text-xs">
+             <div className="grid grid-cols-2 gap-3">
-                <span className={clsx(
+                <div className="bg-white/5 border border-white/5 rounded-lg p-3">
-                  report.http.is_reachable ? "text-accent" : "text-red-400"
+                   <div className="text-[10px] text-zinc-500 uppercase mb-1">DNS Status</div>
-                )}>
+                   <div className="flex items-center gap-2 text-sm font-medium text-white">
-                  {report.http.is_reachable ? 'Reachable' : 'Unreachable'}
+                      <span className={report.dns?.has_ns ? "text-emerald-400" : "text-rose-400"}>
+                         {report.dns?.has_ns ? '● Active' : '○ Missing'}
                       </span>
-                {report.http.status_code && (
-                  <span className="text-foreground-muted">HTTP {report.http.status_code}</span>
-                )}
                    </div>
-              {report.http.is_parked && (
-                <p className="mt-2 text-xs text-orange-400">⚠ Parking page detected</p>
-              )}
                 </div>
-          )}
+                 <div className="bg-white/5 border border-white/5 rounded-lg p-3">
+                   <div className="text-[10px] text-zinc-500 uppercase mb-1">Web Server</div>
+                   <div className="flex items-center gap-2 text-sm font-medium text-white">
+                      <span className={report.http?.is_reachable ? "text-emerald-400" : "text-rose-400"}>
+                         {report.http?.is_reachable ? `● HTTP ${report.http?.status_code}` : '○ Unreachable'}
+                      </span>
+                   </div>
+                </div>
+             </div>
+          </div>
 
-          {/* SSL */}
+          {/* Section: Security */}
-          {report.ssl && (
+           <div>
-            <div className="p-4 bg-foreground/5 rounded-xl">
+             <h4 className="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-3 mt-2 flex items-center gap-2">
-              <h4 className="text-sm font-medium text-foreground mb-2 flex items-center gap-2">
+                <Shield className="w-3 h-3" /> Security
-                <span className={clsx(
-                  "w-2 h-2 rounded-full",
-                  report.ssl.has_certificate && report.ssl.is_valid ? "bg-accent" : 
-                  report.ssl.has_certificate ? "bg-amber-400" : "bg-foreground-muted"
-                )} />
-                SSL Certificate
              </h4>
-              <div className="text-xs">
+             <div className="bg-white/5 border border-white/5 rounded-lg p-3">
-                {report.ssl.has_certificate ? (
+                <div className="flex justify-between items-center mb-2">
-                  <div className="space-y-1">
+                   <span className="text-sm font-medium text-white">SSL Certificate</span>
-                    <p className={report.ssl.is_valid ? "text-accent" : "text-red-400"}>
+                   <span className={clsx(
-                      {report.ssl.is_valid ? '✓ Valid certificate' : '✗ Certificate invalid/expired'}
+                      "text-xs px-2 py-0.5 rounded border",
-                    </p>
+                      report.ssl?.is_valid 
-                    {report.ssl.days_until_expiry !== undefined && (
+                        ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" 
-                      <p className={clsx(
+                        : "bg-rose-500/10 text-rose-400 border-rose-500/20"
-                        report.ssl.days_until_expiry > 30 ? "text-foreground-muted" :
-                        report.ssl.days_until_expiry > 7 ? "text-amber-400" : "text-red-400"
                    )}>
-                        Expires in {report.ssl.days_until_expiry} days
+                      {report.ssl?.is_valid ? 'SECURE' : 'INSECURE'}
-                      </p>
+                   </span>
-                    )}
+                </div>
+                {report.ssl?.days_until_expiry && (
+                   <div className="text-xs text-zinc-500">
+                      Expires in <span className="text-white font-mono">{report.ssl.days_until_expiry}</span> days
                    </div>
-                ) : (
-                  <p className="text-foreground-muted">No SSL certificate</p>
                 )}
              </div>
           </div>
-          )}
 
           {/* Signals & Recommendations */}
           {((report.signals?.length || 0) > 0 || (report.recommendations?.length || 0) > 0) && (
-            <div className="space-y-3">
+            <div className="space-y-3 pt-2">
               {(report.signals?.length || 0) > 0 && (
                 <div>
-                  <h4 className="text-xs font-medium text-foreground-muted uppercase tracking-wider mb-2">Signals</h4>
+                  <h4 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-2">Signals</h4>
-                  <ul className="space-y-1">
+                  <ul className="space-y-2">
                     {report.signals?.map((signal, i) => (
-                      <li key={i} className="text-xs text-foreground flex items-start gap-2">
+                      <li key={i} className="text-xs text-zinc-300 flex items-start gap-2 bg-white/[0.02] p-2 rounded">
-                        <span className="text-accent mt-0.5">•</span>
+                        <Activity className="w-3.5 h-3.5 text-emerald-400 mt-0.5 shrink-0" />
                         {signal}
                       </li>
                     ))}
                   </ul>
                 </div>
               )}
-              {(report.recommendations?.length || 0) > 0 && (
-                <div>
-                  <h4 className="text-xs font-medium text-foreground-muted uppercase tracking-wider mb-2">Recommendations</h4>
-                  <ul className="space-y-1">
-                    {report.recommendations?.map((rec, i) => (
-                      <li key={i} className="text-xs text-foreground flex items-start gap-2">
-                        <span className="text-amber-400 mt-0.5">→</span>
-                        {rec}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="p-4 bg-foreground/5 border-t border-border/30">
+        <div className="p-4 bg-zinc-950 border-t border-white/5">
-          <p className="text-xs text-foreground-subtle text-center">
+          <p className="text-[10px] text-zinc-600 text-center font-mono">
-            Checked at {new Date(report.checked_at).toLocaleString()}
+            LAST CHECK: {new Date(report.checked_at).toLocaleString().toUpperCase()}
           </p>
         </div>
       </div>