index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --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: 217 91% 60%;
    --primary-foreground: 222 47.4% 11.2%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --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: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --radius: 0.75rem;
  }

  * {
    @apply border-border box-border;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
    @apply bg-[#050505] text-foreground font-sans antialiased;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-white/10 rounded-full transition-colors;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-white/20;
  }
}

@layer components {
  .glass-panel {
    @apply bg-zinc-900/40 backdrop-blur-2xl border-r border-white/5 shadow-[5px_0_30px_rgba(0,0,0,0.5)];
  }

  .glass-card {
    @apply bg-white/5 backdrop-blur-lg border border-white/10 hover:bg-white/10 transition-all duration-300;
  }
}

@layer utilities {
  .gpu {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }

  .h-dvh {
    height: 100dvh;
  }

  .bg-grid-pattern {
    background-size: 40px 40px;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  }

  .bg-noise {
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
    opacity: 0.03;
    pointer-events: none;
  }
}