Glassmorphic Dashboard Status Card

<div class="card-top glass-effect w-[32rem] h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
  <div class="absolute inset-0 rounded-[1.2em] border border-white/20" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
  <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
  <div class="pointer-events-none absolute -inset-px rounded-[1.3rem] bg-[radial-gradient(80%_60%_at_50%_0%,rgba(90,97,255,0.12),transparent_60%)]"></div>
  
  <div class="flex flex-col h-full p-6 pb-7">
    <div class="flex justify-between items-start mb-2">
      <div class="w-3/4">
        <h1 class="text-[26px] leading-tight tracking-tight font-sans font-medium" style="">Agent Studio</h1>
        <p class="text-neutral-300 text-sm font-light mt-1 font-sans">Orchestrator • AI-Powered</p>
      </div>
      <div class="w-1/4 text-right">
        <div class="text-[20px] font-semibold font-mono font-sans">AI-AGENTS</div>
        <div class="flex items-center justify-end gap-1 mt-1">
          <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" style="box-shadow: 0 0 6px rgba(16, 185, 129, 0.3)"></div>
          <span class="text-xs text-emerald-300 font-sans">ACTIVE</span>
        </div>
      </div>
    </div>

    <div class="relative mx-auto w-full mb-4">
      <div class="absolute inset-0 translate-y-2 scale-[0.98] rounded-lg bg-neutral-900/50 ring-1 ring-white/5 blur-[0.3px]"></div>
      <div class="relative rounded-lg bg-[linear-gradient(180deg,rgba(19,24,31,0.9),rgba(10,13,18,0.9))] ring-1 ring-white/10 overflow-hidden">
        <div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-neutral-950/50">
          <div class="flex items-center gap-2">
            <span class="h-2 w-2 rounded-full bg-red-500/60"></span>
            <span class="h-2 w-2 rounded-full bg-amber-500/60"></span>
            <span class="h-2 w-2 rounded-full bg-emerald-500/60"></span>
          </div>
          <div class="flex items-center gap-2 rounded-full border border-white/10 bg-neutral-900/60 px-2 py-1 text-xs text-neutral-300">
            <svg class="w-3 h-3 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" class=""></path>
            </svg>
            <span class="text-neutral-400/80 font-sans">agents…</span>
          </div>
        </div>
        <div class="relative h-32">
          <div class="absolute inset-0 grid grid-cols-[30px_1fr]">
            <div class="select-none border-r border-white/5 bg-neutral-950/30 px-2 py-2 text-[11px] leading-4 text-neutral-400/50">
              <div class="font-sans">1</div><div class="font-sans">2</div><div class="font-sans">3</div><div class="font-sans">4</div><div class="font-sans">5</div><div class="font-sans">6</div><div class="font-sans">7</div><div class="font-sans">8</div>
            </div>
            <pre class="m-0 overflow-hidden px-3 py-2 text-[11px] leading-4 text-neutral-300 font-sans"><span class="text-blue-300 font-sans">class</span> <span class="text-white font-sans">OrchestratorAgent</span>:
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">__init__</span>(<span class="text-emerald-300 font-sans">self</span>, tools, memory):
    <span class="text-emerald-300 font-sans">self</span>.tools = tools
    <span class="text-emerald-300 font-sans">self</span>.memory = memory
  
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">plan</span>(<span class="text-emerald-300 font-sans">self</span>, goal):
    steps = []
    <span class="text-blue-300 font-sans">for</span> tool <span class="text-blue-300 font-sans">in</span> <span class="text-emerald-300 font-sans">self</span>.tools:</pre>
          </div>
          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-[#0B0F14] to-transparent"></div>
        </div>
      </div>
    </div>

    <div class="flex justify-between mb-4 max-w-lg">
      <div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
        <div class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium" style="">
          12
        </div>
        <div class="text-xs opacity-70 uppercase tracking-wide font-sans">ACTIVE AGENTS</div>
      </div>
      <div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent"></div>
      <div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
        <div class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium" style="">
          98
          <span class="text-sm font-sans">%</span>
        </div>
        <div class="text-xs opacity-70 uppercase tracking-wide font-sans">SUCCESS RATE</div>
      </div>
      <div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent"></div>
      <div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
        <div class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium" style="">847</div>
        <div class="text-xs opacity-70 uppercase tracking-wide font-sans">TASKS RUN</div>
      </div>
    </div>
    
    <div class="h-px w-full bg-gradient-to-r from-transparent via-white/25 to-transparent mb-3"></div>
    
    <div class="flex flex-wrap gap-2 mb-4">
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" class=""></path>
        </svg>
        ORCHESTRATOR
      </span>
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" class=""></path>
        </svg>
        ANALYTICS
      </span>
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" class=""></path>
        </svg>
        WORKFLOW
      </span>
    </div>
    
    <div class="rounded px-2 py-0.5 font-mono text-xs relative overflow-hidden mb-4" style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%)">
      <div class="flex items-center justify-between">
        <span class="text-neutral-300 font-sans">DEPLOYMENT: PRODUCTION</span>
        <span class="text-white font-sans">v3.2.1-stable</span>
      </div>
    </div>
    
    <div class="mt-auto flex justify-between w-full">
      <div class="flex flex-col">
        <span class="opacity-70 flex items-center gap-2 text-sm mb-1">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4 4m-4-4l4-4" class=""></path>
          </svg>
          <span class="font-sans">AUTO-SCALING</span>
        </span>
        <span class="text-xs opacity-60 flex items-center gap-2 font-mono">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" class=""></path>
          </svg>
          <span class="font-sans">MULTI-TENANT</span>
        </span>
      </div>
      <div class="flex flex-col items-end">
        <span class="opacity-70 flex items-center gap-2 text-sm mb-1">
          <svg class="w-[12px] h-[12px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(245, 245, 245);">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" class=""></path>
          </svg>
          <span class="font-sans">AUTONOMOUS</span>
          <div class="w-2 h-2 rounded-full bg-violet-400" style="box-shadow: 0 0 6px rgba(139, 92, 246, 0.4)"></div>
        </span>
        <p class="text-sm font-medium flex items-center gap-2 cursor-pointer hover:text-blue-300 transition-colors">
          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" class=""></path>
          </svg>
          <span class="font-sans">agent-studio.ai</span>
        </p>
      </div>
    </div>
  </div>
</div>