@font-face {
  font-family: 'Nunito';
  src: url('/api/config/fonts/nunito-regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Nunito';
  src: url('/api/config/fonts/nunito-bold.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/api/config/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

* { font-family: 'Nunito', system-ui, sans-serif !important; }
html, body, #__next { background-color: #0d0b14 !important; }

/* === DATE PILL === */
.information-widget-datetime {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
}
.information-widget-datetime span {
  font-family: 'Nunito', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

/* === STAT ICONS === */
.information-widget-resource:nth-child(1) .resource-icon { color: #34d399 !important; }
.information-widget-resource:nth-child(1) .resource-usage div { background-color: #34d399 !important; }
.information-widget-resource:nth-child(2) .resource-icon { color: #60a5fa !important; }
.information-widget-resource:nth-child(2) .resource-usage div { background-color: #60a5fa !important; }
.information-widget-resource:nth-child(3) .resource-icon { color: #fbbf24 !important; }
.information-widget-resource:nth-child(3) .resource-usage div { background-color: #fbbf24 !important; }
.information-widget-resource:nth-child(4) .resource-icon { color: #f472b6 !important; }
.information-widget-resource:nth-child(5) .resource-icon { color: #c084fc !important; }
.information-widget-resource:nth-child(5) .resource-usage div { background-color: #c084fc !important; }

/* === SERVICE NAME BOLD === */
.service-name {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* === SECTION HEADERS === */
.service-group-name {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
}

/* Storage → emerald */
.services-group:nth-child(1) .service-group-name { color: #34d399 !important; }
.services-group:nth-child(1) .service-group-icon div,
.services-group:nth-child(1) .service-icon div {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(100deg) brightness(1.1) !important;
}
.services-group:nth-child(1) .service-card { border-left: 3px solid rgba(52,211,153,0.5) !important; }

/* Infrastructure → sapphire */
.services-group:nth-child(2) .service-group-name { color: #60a5fa !important; }
.services-group:nth-child(2) .service-group-icon div,
.services-group:nth-child(2) .service-icon div {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(190deg) brightness(1.1) !important;
}
.services-group:nth-child(2) .service-card { border-left: 3px solid rgba(96,165,250,0.5) !important; }

/* Monitoring → amethyst */
.services-group:nth-child(3) .service-group-name { color: #c084fc !important; }
.services-group:nth-child(3) .service-group-icon div,
.services-group:nth-child(3) .service-icon div {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(240deg) brightness(1.1) !important;
}
.services-group:nth-child(3) .service-card { border-left: 3px solid rgba(192,132,252,0.5) !important; }

/* Media & Maker → rose */
.services-group:nth-child(4) .service-group-name { color: #f472b6 !important; }
.services-group:nth-child(4) .service-group-icon div,
.services-group:nth-child(4) .service-icon div {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(280deg) brightness(1.1) !important;
}
.services-group:nth-child(4) .service-card { border-left: 3px solid rgba(244,114,182,0.5) !important; }

/* === CARDS === */
.service-card { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.service-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(244,114,182,0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244,114,182,0.6); }