/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!./src/styles/globals.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
:root {
  --chart-1: #00C9FF;
  --chart-2: #6366F1;
  --chart-3: #F59E0B;
  --chart-4: #10B981;
  --chart-5: #F43F5E;
  --chart-6: #8B5CF6;
  --chart-7: #0EA5E9;
  --chart-8: #FB923C;
  --color-primary: #0B1F3A;
  --color-primary-hover: #2563EB;
  --color-accent: #059669;
  --color-glow: #00C9FF;
  --color-glow-mid: #06B6D4;
  --color-danger: #DC2626;
  --color-warning: #D97706;
  --color-surface: #FFFFFF;
  --color-border: #E1E8F0;
  --color-text: #0B1120;
  --color-muted: #5A6A7E;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  color: #0B1120;
  background: #F0F4F8;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

.positive {
  color: #059669 !important;
}

.negative {
  color: #DC2626 !important;
}

.text-muted {
  color: #5A6A7E;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono {
  font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
}

.glow-text {
  color: #00C9FF;
  text-shadow: 0 0 12px rgba(0, 201, 255, 0.4);
}

.gradient-text {
  background: linear-gradient(135deg, #2563EB, #00C9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00C9FF;
  box-shadow: 0 0 0 0 rgba(0, 201, 255, 0.6);
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton {
  background: linear-gradient(90deg, #E1E8F0 25%, #EBF0F7 50%, #E1E8F0 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fade-up 220ms ease;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 201, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 201, 255, 0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #E1E8F0;
  border-top-color: #00C9FF;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  flex-shrink: 0;
  display: inline-block;
}

.grid-stats {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
  .grid-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-2 {
  display: grid;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: 2fr 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-gap: 1.25rem;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}