html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  background-color: #121212 !important;
  color: #fff !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: inherit !important;
}

#app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  background-color: #121212 !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}
.status-box {
  font-size: 1.4rem !important;
  margin: 10px 0 !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  text-align: center !important;
  max-width: 800px !important;
  width: 100% !important;
  font-weight: bold !important;
}

.status-online {
  background: rgba(0, 255, 0, 0.15) !important;
  color: #0f0 !important;
  box-shadow: 0 0 10px #0f0 !important;
  animation: pulseGreen 1.4s infinite !important;
}

.status-offline {
  background: rgba(255, 0, 0, 0.15) !important;
  color: #f44 !important;
  box-shadow: 0 0 10px #f44 !important;
  animation: pulseRed 1.4s infinite !important;
}

.status-error {
  background: rgba(255, 165, 0, 0.15) !important;
  color: #ffa500 !important;
  box-shadow: 0 0 10px #ffa500 !important;
  animation: pulseOrange 1.4s infinite !important;
}

@keyframes pulseGreen {
  0% { box-shadow: 0 0 5px #0f0 !important; }
  50% { box-shadow: 0 0 20px #0f0 !important; }
  100% { box-shadow: 0 0 5px #0f0 !important; }
}

@keyframes pulseRed {
  0% { box-shadow: 0 0 5px #f00 !important; }
  50% { box-shadow: 0 0 20px #f00 !important; }
  100% { box-shadow: 0 0 5px #f00 !important; }
}

@keyframes pulseOrange {
  0% { box-shadow: 0 0 5px #ffa500 !important; }
  50% { box-shadow: 0 0 20px #ffa500 !important; }
  100% { box-shadow: 0 0 5px #ffa500 !important; }
}

h1 {
  margin-top: -10px !important;
  margin-bottom: 10px !important;
  font-size: 2.5rem !important;
  color: #0ff !important;
  text-shadow: 0 0 10px #0ff !important;
  text-align: center !important;
}

.button-group {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-bottom: 10px !important;
  width: 95% !important;              /* <- ograniczamy do szerokości kontenera */
  max-width: 800px !important;
}

button {
  padding: 20px 35px !important;
  font-size: 1.1rem !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  color: #121212 !important;
  font-weight: bold !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  background: linear-gradient(45deg, #00ffff, #00aaff) !important;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
  flex: 1 1 45% !important;           /* <- pozwala rosnąć lub zmniejszać */
  min-width: 150px !important;         /* <- nie robią się zbyt wąskie */
}

button:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0, 255, 255, 0.6) !important;
}

button:active {
  transform: scale(1) !important;
  box-shadow: 0 4px 10px rgba(0, 255, 255, 0.4) !important;
}

#output,#log_tail {
  text-align: center !important;
  background: #1e1e1e !important;
  color: #0ff !important;
  padding: 20px !important;
  border-radius: 10px !important;
  max-height: 500px !important;
  max-width: 800px !important;         /* <- zawsze mieści się w oknie */
  width: 100% !important;             /* <- pełna szerokość kontenera */
  box-sizing: border-box !important;  /* <- padding wliczony w szerokość */
  margin:0px 30px 0px 30px !important;
  overflow-y: auto !important;
  font-size: 0.95rem !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3) !important;
  text-wrap: wrap !important;
}