frontend/src/app/globals.css

@import "tailwindcss";

@theme {
  --color-brand: #6c63ff;
  --color-brand-light: #8b85ff;
  --color-brand-dim: rgba(108, 99, 255, 0.15);
  --color-brand-glow: rgba(108, 99, 255, 0.3);
  --color-surface: #0a0a0f;
  --color-surface-2: #111118;
  --color-card: #16161f;
  --color-card-hover: #1c1c28;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-text: #f0f0f8;
  --color-muted: #9494b0;
  --color-dimmer: #5c5c78;
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}


html { scroll-behavior: smooth; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--color-surface);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::selection { background: var(--color-brand-dim); color: var(--color-brand-light); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-dimmer); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-border-strong);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
  margin: 10px 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-radius: 99px;
}

input[type="range"]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--thumb-color, var(--color-brand));
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px; /* Centers thumb on the track */
  box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 0 2px var(--color-surface);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--color-brand-glow), 0 0 10px rgba(0,0,0,0.5);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: var(--color-border-strong);
  border-radius: 99px;
}

input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--thumb-color, var(--color-brand));
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 0 2px var(--color-surface);
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse-border { 0%, 100% { border-color: var(--color-brand-dim); } 50% { border-color: var(--color-brand); } }

.animate-spin { animation: spin 0.7s linear infinite; }
.animate-slide-up { animation: slide-up 0.3s ease; }
.animate-fade-in { animation: fade-in 0.4s ease; }
.animate-shimmer {
  background: linear-gradient(90deg, var(--color-card) 25%, var(--color-card-hover) 50%, var(--color-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}