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

* {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
}

/* Background */
#page_wrapper,
body {
  background: #000000 !important;
}

/* Top info bar */
#information-widgets {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 32px !important;
}

/* Service cards */
#services > div > div > ul > li,
.service-card {
  background: #111111 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  transition: background 0.2s ease !important;
}

#services > div > div > ul > li:hover {
  background: #1a1a1a !important;
}

/* Section headings */
#services > div > div > h2 {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.25) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* Service name */
.service-name,
.service-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
}

/* Service description */
.service-description {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Widget stats numbers */
.widget-value,
.service-widget-stats div span:first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}

/* Widget stat labels */
.service-widget-stats div span:last-child {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Status dot — online */
.status-dot.online,
[class*="status"][class*="ok"] {
  background: #34c759 !important;
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.5) !important;
}

/* Status dot — offline */
.status-dot.offline,
[class*="status"][class*="error"] {
  background: #ff453a !important;
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.5) !important;
}

/* Search bar */
#search-bar input,
#searchField {
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
}

#search-bar input::placeholder,
#searchField::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Top bar stats text */
#information-widgets span,
#information-widgets p {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Ping response time badge */
.ping-badge,
[class*="response"] {
  background: rgba(52, 199, 89, 0.12) !important;
  color: #34c759 !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
}

/* Page title */
#site-title,
h1.title {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -0.8px !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px }
::-webkit-scrollbar-track { background: #000 }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: #444 }

/* Equal height cards in every row */
#services > div > div > ul {
  display: grid !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}

#services > div > div > ul > li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 80px !important;
}

/* Tighten section spacing */
#services > div {
  margin-bottom: 8px !important;
}

/* Uniform icon size */
#services img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}