:root {
  --grad: linear-gradient(135deg, #ef4444 0%, #f97316 45%, #a855f7 100%);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Animated gradient background blobs */
.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: fixed;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
.bg-aurora::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #ef4444, transparent 70%);
  top: -120px; left: -100px;
  animation: float1 14s ease-in-out infinite;
}
.bg-aurora::after {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  bottom: -160px; right: -120px;
  animation: float2 18s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-40px)} }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-bg { background: var(--grad); }
.gradient-border {
  position: relative;
  background: var(--grad);
  padding: 1px;
  border-radius: 16px;
}

.glass {
  background: rgba(26, 26, 40, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a3d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a52; }

/* Chip / option buttons */
.chip {
  transition: all .18s ease;
  border: 1px solid rgba(255,255,255,0.08);
}
.chip:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
.chip.active {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(239,68,68,.6);
}

/* Toggle */
.toggle-track {
  width: 48px; height: 28px; border-radius: 9999px;
  background: #2a2a3d; transition: background .2s ease; position: relative; flex: none;
}
.toggle-track.on { background: var(--grad); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 9999px; background: #fff;
  transition: transform .2s ease;
}
.toggle-track.on .toggle-thumb { transform: translateX(20px); }

/* Spinner */
.spinner {
  width: 44px; height: 44px;
  border: 4px solid rgba(255,255,255,.12);
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* Sidebar mobile drawer */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    transform: translateX(-100%); transition: transform .3s ease;
  }
  #sidebar.open { transform: translateX(0); }
}

.shimmer {
  background: linear-gradient(90deg, #1a1a28 25%, #252538 50%, #1a1a28 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }