:root {
  --accent-color: #2596be;
  --accent-color-light: #1e7fa3;
  --accent-color-lighter: #176a88;
  --accent-color-dark: #3cb0d6;
  --accent-color-bg: rgba(37, 150, 190, 0.15);
  --card-bg: rgba(0, 0, 0, 0.1);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-primary: rgba(255, 255, 255, 0.9);
  --scroll-thumb: rgba(255, 255, 255, 0.2);
}

* {
  user-select: none;
  -webkit-user-select: none;
}
.theme-gradient {
  background:
    radial-gradient(
      circle at 15% 25%,
      var(--accent-color-bg) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 15%,
      color-mix(in srgb, var(--accent-color) 25%, transparent) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 45% 75%,
      color-mix(in srgb, var(--accent-color-light) 30%, transparent) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 75% 85%,
      color-mix(in srgb, var(--accent-color-lighter) 25%, transparent) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 25% 65%,
      color-mix(in srgb, var(--accent-color-dark) 20%, transparent) 0%,
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #111827 0%,
      color-mix(in srgb, var(--accent-color) 8%, #1a2332) 50%,
      color-mix(in srgb, var(--accent-color-dark) 6%, #1e293b) 100%
    );
  background-size: 400% 400%;
  animation: gradient 60s ease-in-out infinite;
}
@keyframes gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}