/* style.css — Custom background, grid, glass effects, and minor overrides */

:root {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1200px 600px at 60% -10%, rgba(34, 211, 238, .12), transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, rgba(168, 85, 247, .10), transparent 55%),
    #0b1220;
}

.grid-bg:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% -10%, rgba(0, 0, 0, .7), transparent 65%);
  pointer-events: none;
}

.glass {
  backdrop-filter: blur(8px);
  background: rgba(16, 24, 40, .6);
  border: 1px solid rgba(255, 255, 255, .06);
}

:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
  border-radius: .5rem;
}

.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .12) 37%, rgba(255, 255, 255, .06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}