:root {
  /* Tiefes Schwarz als Basis */
  --bg-color: #0c0d0e;
  /* Metallisches Dunkelgrau für Kacheln */
  --card-bg-color: #17181a;
  /* Haupt-Orange-Rot */
  --accent-color: #ff4500;
  /* Chrono-Cyan-Grün */
  --chrono-cyan: #00ffbf;
  /* Textfarben */
  --text-primary: #e0e6ed;
  --text-secondary: #8a99a6;

  /* Komplexe, mehrschichtige Glow-Effekte */
  --neon-glow: 0 0 12px rgba(255, 69, 0, 0.7), 0 0 25px rgba(255, 112, 67, 0.5);
  --cyan-glow: 0 0 10px rgba(0, 255, 191, 0.6), 0 0 20px rgba(0, 255, 191, 0.4);
}

/* Globaler Hintergrund & Schrift */
body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

/* Stylen der Service-Kacheln */
.service-tile {
  background-color: var(--card-bg-color);
  background-image: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255, 69, 0, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease-out;
}

/* Der leuchtende Hover-Effekt */
.service-tile:hover {
  border-color: var(--accent-color);
  box-shadow: var(--neon-glow);
  transform: translateY(-2px);
}

/* Stylen der Widgets (Glance, Resources) */
.widget {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  border: 1px solid rgba(255, 69, 0, 0.1);
}

/* Icons und Pings */
.service-icon {
  color: var(--accent-color);
  filter: drop-shadow(0 0 4px rgba(255, 112, 67, 0.6));
}

.service-status {
  background-color: #00ff00 !important; /* Grüner Ping bleibt erhalten */
  border-color: #00ff00 !important;
}

/* Widgets auf Cyan-Glow umstellen */
.glance-widget .glance-time, .glance-widget .glance-date {
  color: var(--chrono-cyan);
  font-weight: bold;
  text-shadow: var(--cyan-glow);
}

.widget-icon {
  color: var(--accent-color);
}

/* Header (Glance-Widget) */
.glance-widget {
  border-color: rgba(0, 255, 191, 0.2);
}