body {
  font-family: 'Segoe UI', sans-serif;
  background: #101010;
  color: #eee;
  margin: 0;
  padding: 0;
}

header {
  background: #1e1e1e;
  padding: 1em;
  text-align: center;
  border-bottom: 2px solid #444;
}

.status-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  padding: 2em 1em;
}

.block {
  background: #222;
  padding: 1em;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 10px #0f0 inset;
  transition: transform 0.2s ease;
  animation: pulse 1.5s ease-in-out 3;
}

.block:hover {
  transform: scale(1.03);
}

.block i {
  color: #0f0;
  margin-right: 0.5em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.maogen {
  padding: 2em;
  background: #161616;
  border-top: 2px dashed #444;
  text-align: center;
}

.quote {
  font-style: italic;
  color: #ffd700;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s ease;
}

.quote.visible {
  opacity: 1;
  transform: translateY(0);
}

.status i {
  color: #0f0;
}

footer {
  text-align: center;
  padding: 1em;
  background: #1a1a1a;
  border-top: 2px solid #444;
  font-size: 0.8em;
  color: #777;
}

@media (max-width: 400px) {
  .status-blocks {
    grid-template-columns: 1fr;
  }
}