@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

:root {
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #0c0e14;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  place-content: center;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at top right, #1a1f35 0%, #0c0e14 100%);
  overflow-x: hidden;
}

#root {
  width: 100%;
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.card-hover:hover {
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.gradient-text {
  background: linear-gradient(90deg, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Utility classes to replace Tailwind for this simple dashboard */

.max-w-6xl { max-width: 72rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.min-h-screen { min-height: 100vh; }

.p-8 { padding: 2rem; }

.p-6 { padding: 1.5rem; }

.p-4 { padding: 1rem; }

.p-3 { padding: 0.75rem; }

.p-2 { padding: 0.5rem; }

.p-20 { padding: 5rem; }

.pl-10 { padding-left: 2.5rem; }

.pr-4 { padding-right: 1rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.mb-12 { margin-bottom: 3rem; }

.mb-6 { margin-bottom: 1.5rem; }

.gap-6 { gap: 1.5rem; }

.gap-4 { gap: 1rem; }

.gap-5 { gap: 1.25rem; }

.gap-2 { gap: 0.5rem; }

.flex { display: flex; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-between { justify-content: space-between; }

.justify-center { justify-content: center; }

.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.rounded-2xl { border-radius: 1rem; }

.rounded-xl { border-radius: 0.75rem; }

.rounded-full { border-radius: 9999px; }

.text-white { color: white; }

.text-gray-400 { color: #9ca3af; }

.text-gray-500 { color: #6b7280; }

.text-blue-400 { color: #60a5fa; }

.text-purple-400 { color: #c084fc; }

.text-emerald-400 { color: #34d399; }

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }

.font-extrabold { font-weight: 800; }

.font-bold { font-weight: 700; }

.font-semibold { font-weight: 600; }

.font-medium { font-weight: 500; }

.uppercase { text-transform: uppercase; }

.tracking-widest { letter-spacing: 0.1em; }

.relative { position: relative; }

.absolute { position: absolute; }

.left-3 { left: 0.75rem; }

.top-1/2 { top: 50%; }

.-translate-y-1/2 { transform: translateY(-50%); }

.w-full { width: 100%; }

.w-64 { width: 16rem; }

.w-8 { width: 2rem; }

.w-6 { width: 1.5rem; }

.w-5 { width: 1.25rem; }

.w-4 { width: 1rem; }

.h-8 { height: 2rem; }

.h-6 { height: 1.5rem; }

.h-5 { height: 1.25rem; }

.h-4 { height: 1rem; }

.stat-bg-blue { background-color: rgba(59, 130, 246, 0.1); }

.stat-bg-purple { background-color: rgba(168, 85, 247, 0.1); }

.stat-bg-emerald { background-color: rgba(16, 185, 129, 0.1); }

.stat-bg-orange { background-color: rgba(251, 146, 60, 0.1); }

.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1); }

.bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.1); }

.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }

.bg-orange-500\/10 { background-color: rgba(251, 146, 60, 0.1); }

.border-l-blue-500\/50 { border-left-color: rgba(59, 130, 246, 0.5); }

.border-l-purple-500\/50 { border-left-color: rgba(168, 85, 247, 0.5); }

.border-l-emerald-500\/50 { border-left-color: rgba(16, 185, 129, 0.5); }

.border-l-orange-500\/50 { border-left-color: rgba(251, 146, 60, 0.5); }

.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }

.border-b { border-bottom-width: 1px; }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

.border-white\/5 { border-color: rgba(255, 255, 255, 0.05); }

.whitespace-pre-wrap { white-space: pre-wrap; }

.animate-spin { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}