@gravito/zenith 1.1.2 → 1.1.3

package/src/client/components/JobInspector.tsx

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
-import { AlertCircle, ArrowRight, CheckCircle2, Clock, Search } from 'lucide-react'
+import { AlertCircle, CheckCircle2, Clock, RefreshCcw, Search } from 'lucide-react'
 import React from 'react'
 import { createPortal } from 'react-dom'
 import { cn } from '../utils'
@@ -48,7 +48,6 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
   const [view, setView] = React.useState<'waiting' | 'delayed' | 'failed' | 'archive'>('waiting')
   const [page, setPage] = React.useState(1)
   const [selectedIndices, setSelectedIndices] = React.useState<Set<number>>(new Set())
-  const [totalCount, setTotalCount] = React.useState<number>(0)
   const [isProcessing, setIsProcessing] = React.useState(false)
   const [confirmDialog, setConfirmDialog] = React.useState<{
     open: boolean
@@ -71,18 +70,6 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
     },
   })
 
-  // Fetch total count for non-archive views
-  React.useEffect(() => {
-    if (view !== 'archive') {
-      fetch(`/api/queues/${queueName}/jobs/count?type=${view}`)
-        .then((res) => res.json())
-        .then((data) => setTotalCount(data.count))
-        .catch(() => setTotalCount(0))
-    } else {
-      setTotalCount(data?.total || 0)
-    }
-  }, [queueName, view, data?.total])
-
   // Reset selection when view changes
   // biome-ignore lint/correctness/useExhaustiveDependencies: We want to reset when view changes
   React.useEffect(() => {
@@ -213,39 +200,6 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
     })
   }
 
-  const handleBulkActionAll = async (action: 'delete' | 'retry') => {
-    if (view === 'archive') {
-      return
-    }
-
-    setConfirmDialog({
-      open: true,
-      title: `${action === 'delete' ? 'Delete' : 'Retry'} ALL ${totalCount} Jobs?`,
-      message: `⚠️ WARNING: This will ${action} ALL ${totalCount} ${view} jobs in "${queueName}".\n\nThis is a destructive operation that cannot be undone.`,
-      variant: 'danger',
-      action: async () => {
-        setIsProcessing(true)
-        try {
-          const endpoint = action === 'delete' ? 'bulk-delete-all' : 'bulk-retry-all'
-          await fetch(`/api/queues/${queueName}/jobs/${endpoint}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ type: view }),
-          })
-
-          setSelectedIndices(new Set())
-          queryClient.invalidateQueries({ queryKey: ['jobs', queueName] })
-          queryClient.invalidateQueries({ queryKey: ['queues'] })
-          setConfirmDialog(null)
-        } catch (err) {
-          console.error(`Failed to ${action} all jobs:`, err)
-        } finally {
-          setIsProcessing(false)
-        }
-      },
-    })
-  }
-
   return createPortal(
     <div className="fixed inset-0 z-[1001] flex items-center justify-end p-4 sm:p-6 outline-none pointer-events-none">
       <motion.div
@@ -261,32 +215,32 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
         animate={{ x: 0, opacity: 1 }}
         exit={{ x: '100%', opacity: 0 }}
         transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-        className="bg-card border border-border/50 h-[85vh] w-full max-w-2xl shadow-2xl flex flex-col overflow-hidden rounded-2xl relative z-[1002] pointer-events-auto"
+        className="bg-zinc-950 border-l border-white/10 h-screen w-full max-w-2xl shadow-2xl flex flex-col overflow-hidden relative z-[1002] pointer-events-auto"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="p-6 border-b flex justify-between items-center bg-muted/20 flex-shrink-0">
+        <div className="p-8 border-b border-white/5 bg-black/40 flex justify-between items-center flex-shrink-0">
           <div>
-            <h2 className="text-xl font-bold flex items-center gap-2">
-              <Search className="text-primary" size={20} />
-              Queue Insight: <span className="text-primary">{queueName}</span>
+            <h2 className="text-2xl font-black flex items-center gap-3 font-heading tracking-tight italic uppercase">
+              <Search className="text-primary" size={24} />
+              Inspector <span className="text-primary/60">/</span> {queueName}
             </h2>
-            <div className="flex items-center gap-4 mt-2">
+            <div className="flex items-center gap-3 mt-4">
               {(['waiting', 'delayed', 'failed', 'archive'] as const).map((v) => (
                 <button
                   type="button"
                   key={v}
                   onClick={() => setView(v)}
                   className={cn(
-                    'text-[9px] font-black px-3 py-1 rounded-sm transition-all border shrink-0 uppercase tracking-widest',
+                    'text-[9px] font-black px-3 py-1.5 rounded-lg transition-all border shrink-0 uppercase tracking-[0.2em] font-mono',
                     view === v
                       ? v === 'failed'
-                        ? 'bg-red-500 text-white border-red-500 shadow-lg shadow-red-500/20'
+                        ? 'bg-red-500 text-black border-red-500 shadow-[0_0_20px_rgba(239,68,68,0.2)]'
                         : v === 'delayed'
-                          ? 'bg-amber-500 text-white border-amber-500 shadow-lg shadow-amber-500/20'
+                          ? 'bg-amber-500 text-black border-amber-500 shadow-[0_0_20px_rgba(245,158,11,0.2)]'
                           : v === 'archive'
-                            ? 'bg-indigo-500 text-white border-indigo-500 shadow-lg shadow-indigo-500/20'
-                            : 'bg-primary text-primary-foreground border-primary shadow-lg shadow-primary/20'
-                      : 'bg-muted text-muted-foreground border-transparent hover:bg-muted/80'
+                            ? 'bg-indigo-500 text-black border-indigo-500 shadow-[0_0_20px_rgba(99,102,241,0.2)]'
+                            : 'bg-primary text-black border-primary shadow-[0_0_20px_rgba(0,240,255,0.2)]'
+                      : 'bg-zinc-900 text-muted-foreground border-white/5 hover:bg-zinc-800'
                   )}
                 >
                   {v}
@@ -297,158 +251,135 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
           <button
             type="button"
             onClick={onClose}
-            className="w-10 h-10 rounded-full hover:bg-muted flex items-center justify-center transition-colors"
+            aria-label="Close"
+            className="w-12 h-12 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/10 flex items-center justify-center transition-all text-white/40 hover:text-white"
           >
             ✕
           </button>
         </div>
 
-        <div className="flex-1 overflow-y-auto bg-muted/5 min-h-0">
+        <div className="flex-1 overflow-y-auto bg-black/20 min-h-0 scrollbar-thin">
           {isPending && (
-            <div className="p-12 text-center text-muted-foreground font-medium animate-pulse">
-              Loading jobs...
+            <div className="p-20 text-center flex flex-col items-center gap-4">
+              <RefreshCcw className="animate-spin text-primary opacity-40" size={32} />
+              <p className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground animate-pulse">
+                Syncing jobs...
+              </p>
             </div>
           )}
           {error && (
-            <div className="p-12 text-center text-red-500 font-bold">Error loading jobs</div>
+            <div className="p-20 text-center">
+              <div className="bg-red-500/10 text-red-500 p-8 rounded-2xl border border-red-500/20 font-black uppercase text-xs tracking-widest italic">
+                Connection Fault: {error.message}
+              </div>
+            </div>
           )}
 
           {data?.jobs && data.jobs.length > 0 && (
-            <>
-              <div className="px-6 py-3 border-b bg-muted/5 flex items-center gap-3">
-                <input
-                  type="checkbox"
-                  className="w-4 h-4 rounded border-border"
-                  checked={
-                    selectedIndices.size ===
-                      data.jobs.filter((j) => j._raw && !j._archived).length &&
-                    selectedIndices.size > 0
-                  }
-                  onChange={toggleSelectAll}
-                />
-                <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
-                  Select All (Page)
-                </span>
-                {view !== 'archive' && totalCount > 0 && (
-                  <span className="text-[9px] text-muted-foreground/60 ml-2">
-                    {data.jobs.filter((j) => !j._archived).length} of {totalCount} total
+            <div className="px-8 py-4 border-b border-white/5 bg-white/[0.02] flex items-center gap-4">
+              <input
+                type="checkbox"
+                aria-label="Select all jobs"
+                className="w-4 h-4 rounded border-white/10 bg-black/40 text-primary focus:ring-primary/20"
+                checked={
+                  selectedIndices.size === data.jobs.filter((j) => j._raw && !j._archived).length &&
+                  selectedIndices.size > 0
+                }
+                onChange={toggleSelectAll}
+              />
+              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/60 font-heading">
+                Batch Operations
+              </span>
+              {selectedIndices.size > 0 && (
+                <div className="ml-auto flex items-center gap-3">
+                  <span className="text-[10px] font-black uppercase text-primary font-mono bg-primary/10 px-2 py-0.5 rounded border border-primary/20">
+                    {selectedIndices.size} Selected
                   </span>
-                )}
-                {selectedIndices.size > 0 && (
-                  <div className="ml-auto flex items-center gap-2">
-                    <span className="text-[10px] font-black uppercase text-primary mr-2">
-                      {selectedIndices.size} items selected
-                    </span>
-                    <button
-                      type="button"
-                      onClick={() => handleBulkAction('delete')}
-                      className="px-3 py-1 bg-red-500/10 text-red-500 rounded-md text-[10px] font-black uppercase hover:bg-red-500 hover:text-white transition-all"
-                    >
-                      Delete Selected
-                    </button>
-                    {(view === 'delayed' || view === 'failed') && (
-                      <button
-                        type="button"
-                        onClick={() => handleBulkAction('retry')}
-                        className="px-3 py-1 bg-primary/10 text-primary rounded-md text-[10px] font-black uppercase hover:bg-primary hover:text-primary-foreground transition-all"
-                      >
-                        Retry Selected
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-              {view !== 'archive' && totalCount > data.jobs.filter((j) => !j._archived).length && (
-                <div className="px-6 py-3 border-b bg-amber-500/5 flex items-center justify-between">
-                  <span className="text-xs font-bold text-amber-600 flex items-center gap-2">
-                    <AlertCircle size={14} />
-                    Showing {data.jobs.filter((j) => !j._archived).length} of {totalCount} total{' '}
-                    {view} jobs
-                  </span>
-                  <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => handleBulkAction('delete')}
+                    className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-lg text-[10px] font-black uppercase hover:bg-red-500 hover:text-white transition-all border border-red-500/20"
+                  >
+                    Delete
+                  </button>
+                  {(view === 'delayed' || view === 'failed') && (
                     <button
                       type="button"
-                      onClick={() => handleBulkActionAll('delete')}
-                      className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-md text-[10px] font-black uppercase hover:bg-red-500 hover:text-white transition-all"
+                      onClick={() => handleBulkAction('retry')}
+                      className="px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-[10px] font-black uppercase hover:bg-primary hover:text-black transition-all border border-primary/20"
                     >
-                      Delete All {totalCount}
+                      Retry
                     </button>
-                    {(view === 'delayed' || view === 'failed') && (
-                      <button
-                        type="button"
-                        onClick={() => handleBulkActionAll('retry')}
-                        className="px-3 py-1.5 bg-amber-500/10 text-amber-600 rounded-md text-[10px] font-black uppercase hover:bg-amber-500 hover:text-white transition-all"
-                      >
-                        Retry All {totalCount}
-                      </button>
-                    )}
-                  </div>
+                  )}
                 </div>
               )}
-            </>
+            </div>
           )}
 
           {data?.jobs && data.jobs.length === 0 && (
-            <div className="p-12 text-center text-muted-foreground flex flex-col items-center gap-4">
-              <div className="w-16 h-16 bg-muted/50 rounded-full flex items-center justify-center text-muted-foreground/30">
-                <CheckCircle2 size={32} />
+            <div className="p-20 text-center text-muted-foreground flex flex-col items-center gap-6 opacity-40">
+              <div className="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center text-primary/40 border border-white/5">
+                <CheckCircle2 size={40} />
+              </div>
+              <div className="space-y-2">
+                <p className="text-xl font-black font-heading uppercase italic tracking-widest">
+                  Pipeline Clear
+                </p>
+                <p className="text-[10px] font-black uppercase tracking-[0.2em]">
+                  Zero incidents detected in spectrum
+                </p>
               </div>
-              <p className="text-lg font-bold">Clear Sky!</p>
-              <p className="text-sm opacity-60">No jobs found in this queue.</p>
             </div>
           )}
+
           {data?.jobs && (
-            <div className="p-6 space-y-4">
+            <div className="p-8 space-y-6">
               {data.jobs.map((job, i) => (
                 <div
                   key={i}
                   className={cn(
-                    'bg-card border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all group border-border/50',
-                    selectedIndices.has(i) && 'ring-2 ring-primary border-primary'
+                    'bg-zinc-900/40 border rounded-2xl overflow-hidden transition-all group border-white/5',
+                    selectedIndices.has(i) && 'ring-2 ring-primary border-primary bg-primary/5'
                   )}
                 >
-                  <div className="p-4 border-b bg-muted/10 flex justify-between items-center text-[10px]">
-                    <div className="flex items-center gap-3">
+                  <div className="p-4 border-b border-white/5 bg-black/40 flex justify-between items-center text-[10px] font-mono">
+                    <div className="flex items-center gap-4">
                       {job._raw && !job._archived && (
                         <input
                           type="checkbox"
-                          className="w-4 h-4 rounded border-border"
+                          aria-label={`Select job ${job.id || i}`}
+                          className="w-4 h-4 rounded border-white/10 bg-black/40 text-primary focus:ring-primary/20"
                           checked={selectedIndices.has(i)}
                           onChange={() => toggleSelection(i)}
                         />
                       )}
-                      <span className="font-mono bg-primary/10 text-primary px-2 py-1 rounded-md font-bold uppercase tracking-wider flex items-center gap-2">
-                        ID: {job.id || 'N/A'}
+                      <span className="bg-primary/10 text-primary px-2 py-1 rounded-md font-black uppercase tracking-widest flex items-center gap-2 border border-primary/20 shadow-[0_0_15px_rgba(0,240,255,0.05)]">
+                        ID:{job.id || 'N/A'}
                         {job._archived && (
                           <span
                             className={cn(
-                              'px-1.5 py-0.5 rounded text-[8px] border',
+                              'px-1.5 py-0.5 rounded text-[8px] border ml-1',
                               job._status === 'completed'
                                 ? 'bg-green-500/20 text-green-500 border-green-500/20'
                                 : 'bg-red-500/20 text-red-500 border-red-500/20'
                             )}
                           >
-                            Archive: {job._status}
+                            {job._status}
                           </span>
                         )}
                       </span>
                     </div>
-                    <span className="text-muted-foreground font-semibold flex items-center gap-3">
+                    <span className="text-white/20 font-black flex items-center gap-4 uppercase tracking-tighter">
                       {view === 'delayed' && job.scheduledAt && (
-                        <span className="text-amber-500 flex items-center gap-1 font-bold">
+                        <span className="text-amber-500 flex items-center gap-1.5">
                           <Clock size={12} /> {new Date(job.scheduledAt).toLocaleString()}
                         </span>
                       )}
                       {view === 'failed' && job.failedAt && (
-                        <span className="text-red-500 flex items-center gap-1 font-bold">
+                        <span className="text-red-500 flex items-center gap-1.5">
                           <AlertCircle size={12} /> {new Date(job.failedAt).toLocaleString()}
                         </span>
                       )}
-                      {job._archivedAt && (
-                        <span className="text-indigo-400 flex items-center gap-1 font-bold">
-                          <ArrowRight size={12} /> {new Date(job._archivedAt).toLocaleString()}
-                        </span>
-                      )}
                       {job.timestamp &&
                         !job._archivedAt &&
                         new Date(job.timestamp).toLocaleString()}
@@ -457,24 +388,24 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
                   <button
                     type="button"
                     onClick={() => job._raw && !job._archived && toggleSelection(i)}
-                    className="w-full text-left cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset"
+                    className="w-full text-left cursor-pointer focus:outline-none focus:ring-inset"
                   >
                     {job.error && (
-                      <div className="p-4 bg-red-500/10 text-red-500 text-xs font-semibold border-b border-red-500/10 flex items-start gap-2">
-                        <AlertCircle size={14} className="mt-0.5 shrink-0" />
+                      <div className="p-5 bg-red-500/10 text-red-500 text-xs font-black border-b border-red-500/10 flex items-start gap-3 uppercase tracking-tight">
+                        <AlertCircle size={16} className="mt-0.5 shrink-0" />
                         <p>{job.error}</p>
                       </div>
                     )}
-                    <pre className="text-[11px] font-mono p-4 overflow-x-auto text-foreground/80 leading-relaxed bg-muted/5">
+                    <pre className="text-[11px] font-mono p-6 overflow-x-auto text-white/60 leading-relaxed bg-black/40">
                       {JSON.stringify(job, null, 2)}
                     </pre>
                   </button>
-                  <div className="p-3 bg-muted/5 border-t border-border/50 flex justify-end gap-2">
+                  <div className="p-4 bg-black/20 border-t border-white/5 flex justify-end gap-3">
                     {!job._archived && (
                       <button
                         type="button"
                         onClick={() => handleAction('delete', job)}
-                        className="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-lg hover:bg-red-500/10 text-red-500 transition-colors"
+                        className="text-[10px] font-black uppercase tracking-[0.2em] px-5 py-2.5 rounded-xl hover:bg-red-500/10 text-red-500/60 hover:text-red-500 transition-all font-heading border border-transparent hover:border-red-500/20"
                       >
                         Terminate
                       </button>
@@ -484,13 +415,13 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
                         type="button"
                         onClick={() => handleAction('retry', job)}
                         className={cn(
-                          'text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-lg text-white shadow-sm transition-all',
+                          'text-[10px] font-black uppercase tracking-[0.2em] px-5 py-2.5 rounded-xl text-black shadow-lg transition-all font-heading',
                           view === 'delayed'
-                            ? 'bg-amber-500 hover:bg-amber-600'
-                            : 'bg-blue-500 hover:bg-blue-600'
+                            ? 'bg-amber-500 shadow-amber-500/20 hover:bg-amber-400'
+                            : 'bg-primary shadow-primary/20 hover:bg-primary/80'
                         )}
                       >
-                        {view === 'delayed' ? 'Process Now' : 'Retry Job'}
+                        {view === 'delayed' ? 'Execute Now' : 'Re-Run Cycle'}
                       </button>
                     )}
                   </div>
@@ -507,6 +438,7 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
                       type="button"
                       onClick={() => setPage((p) => Math.max(1, p - 1))}
                       disabled={page === 1}
+                      aria-label="Previous page"
                       className="p-2 rounded-lg bg-muted text-muted-foreground disabled:opacity-30 hover:bg-primary hover:text-white transition-all"
                     >
                       ←
@@ -516,6 +448,7 @@ export function JobInspector({ queueName, onClose }: JobInspectorProps) {
                       type="button"
                       onClick={() => setPage((p) => p + 1)}
                       disabled={page * 50 >= (data.total || 0)}
+                      aria-label="Next page"
                       className="p-2 rounded-lg bg-muted text-muted-foreground disabled:opacity-30 hover:bg-primary hover:text-white transition-all"
                     >
                       →

package/src/client/index.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap");
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -24,29 +26,29 @@
     --border: 220 13% 91%;
     --input: 220 13% 91%;
     --ring: 238.7 83.5% 66.7%;
-    --radius: 1rem;
+    --radius: 1.25rem;
   }
 
   .dark {
-    --background: 222 47% 2%;
-    --foreground: 213 31% 91%;
-    --card: 222 47% 6%;
-    --card-foreground: 213 31% 91%;
-    --popover: 222 47% 4%;
-    --popover-foreground: 213 31% 91%;
-    --primary: 238.7 83.5% 66.7%;
-    --primary-foreground: 222 47% 4%;
-    --secondary: 222 47% 10%;
-    --secondary-foreground: 213 31% 91%;
-    --muted: 222 47% 8%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-    --accent: 222 47% 12%;
-    --accent-foreground: 213 31% 91%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 180 100% 50%; /* Electric Cyan */
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 10%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 222 47% 14%;
-    --input: 222 47% 12%;
-    --ring: 238.7 83.5% 66.7%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 180 100% 50%;
   }
 }
 
@@ -61,7 +63,8 @@
   }
 
   .dark body {
-    background-image: radial-gradient(at 50% 0%, hsla(238, 83%, 66%, 0.05) 0%, transparent 50%),
+    background-image:
+      radial-gradient(at 50% 0%, hsla(238, 83%, 66%, 0.05) 0%, transparent 50%),
       radial-gradient(at 100% 100%, hsla(238, 83%, 66%, 0.02) 0%, transparent 50%);
     background-attachment: fixed;
   }
@@ -98,9 +101,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(to bottom,
-        transparent 50%,
-        rgba(var(--primary), 0.02) 50%);
+    background: linear-gradient(to bottom, transparent 50%, rgba(var(--primary), 0.02) 50%);
     background-size: 100% 4px;
     z-index: 2;
     pointer-events: none;
@@ -122,7 +123,6 @@
   }
 
   @keyframes glow-pulse {
-
     0%,
     100% {
       opacity: 0.3;
@@ -142,15 +142,13 @@
   }
 
   .dark .card-premium {
-    background-color: hsla(222, 47%, 6%, 0.6);
-    backdrop-filter: blur(12px);
-    border-color: rgba(255, 255, 255, 0.05);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    @apply bg-zinc-900/40 backdrop-blur-xl border-white/5;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
   }
 
   .dark .card-premium:hover {
-    border-color: hsla(238, 83%, 66%, 0.2);
-    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.05);
+    @apply border-primary/20 bg-zinc-900/60;
+    box-shadow: 0 8px 40px rgba(0, 240, 255, 0.05);
   }
 }
 
@@ -171,4 +169,4 @@
 
 .animate-toast-progress {
   animation: toast-progress 5s linear forwards;
-}
+}