:root { color-scheme: dark; }
* { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(217,70,239,0.12), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(52,211,153,0.10), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(56,189,248,0.08), transparent 50%),
    #0a0f1e;
  background-attachment: fixed;
  min-height: 100vh;
}

/* subtle grid texture */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}
#root { position: relative; z-index: 1; }

@keyframes pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-pop { animation: pop 0.35s cubic-bezier(0.16,1,0.3,1) both; }

@keyframes slideup {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-slideup { animation: slideup 0.3s cubic-bezier(0.16,1,0.3,1) both; }

@keyframes grow { from { width: 0 !important; } }
.animate-grow { animation: grow 0.7s cubic-bezier(0.16,1,0.3,1) both; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

select option { background: #0f172a; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }