:root {
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f97316;
  --gray-light: #1d2330;
  --gray-dark: #1f2937;
  --text-dark: #e5e7eb;
  --text-light: #f9fafb;
  --card-bg: #222836;
  --card-bg-dark: #1f2937;
  --transition: all 0.3s ease;
}
body {
  transition: background 0.4s, color 0.4s;
  font-family: 'Segoe UI', Verdana, Arial, sans-serif;
  background: #171e29;
  color: #fff;
  margin: 0;
  padding: 0;
}
body.light {
  background: #f5f7fa;
  color: #25272c;
}
body.contrast {
  background: #000 !important;
  color: #ffe600 !important;
  font-size: 1.15em;
}
.card {
  background: #23293a;
  border-radius: 12px;
  padding: 1.2em 1em;
  margin-bottom: 1.25em;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.07);
  font-size: 1.08em;
  min-width: 220px;
  max-width: 440px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  cursor: default;
}
.card.speedtest-clickable { cursor:pointer; }
.card .info-small { font-size: .95em; color: #adb7d2; }
.card > div { margin-bottom: 2px; }
body.light .card {
  background: #fff;
  color: #25272c;
}
body.contrast .card {
  background: #000;
  color: #ffe600;
  border: 2px solid #ffe600;
  font-weight: bold;
}
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5em 2em 1em 2em;
}
.dashboard-header h1 {
  font-size: 2.1em;
  margin: 0;
}
.theme-switch button {
  font-size: 1.2em;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 11px;
  outline: none;
  color: inherit;
  transition: var(--transition);
}
.theme-switch button:last-child {
  margin-right: 0;
}
.infra-group-container {
  display: flex;
  gap: 2em;
  justify-content: center;
  margin-bottom: 2em;
}
.infra-col {
  flex: 1;
  min-width: 280px;
  margin: 0 0.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.infra-logo {
  max-width: 110px;
  margin-bottom: 1em;
  margin-top: .5em;
  border-radius: 12px;
  box-shadow: 0 2px 16px #0002;
}
.infra-col h2 {
  margin-bottom: 0.5em;
  margin-top: 0;
}
.cards-group {
  width: 100%;
  max-width: 400px;
  min-width: 220px;
}
.status-indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 7px #24eb6b00;
}
.status-ok {
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
}
.status-error {
  background: var(--red);
  box-shadow: 0 0 7px var(--red);
}
body.contrast .status-ok,
body.contrast .status-error {
  background: #ffe600;
  box-shadow: 0 0 7px #ffe600;
}
.wifi-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}
.jeux-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 450px;
  margin: 0 auto;
}
.jeux-section h2 {
  margin-bottom: 0em;
}
.jeux-logo {
  max-width: 110px;
  margin: 0.8em auto 1em auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 2px 16px #0002;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(20,21,26,.90);
}
.modal-content {
  margin: 4vh auto;
  border-radius: 11px;
  background: #191f2f;
  box-shadow: 0 4px 24px #000d;
  max-width: 98vw;
  width: 560px;
  min-width: 260px;
  animation: fadeIn .28s;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111624;
  border-radius: 11px 11px 0 0;
  padding: 1em 1.5em;
  font-size: 1.1em;
  color: #ffe600;
  gap: 12px;
}
.modal-header h2 { font-weight: bold; color: #ffe600; margin: 0; }
.close { color: #ffe600; font-size:1.4em; font-weight:bold; margin-left:15px; cursor:pointer;}
.modal-body {
  padding: 1.2em 1.7em 1.5em 1.7em;
  background: #23293a;
  border-radius: 0 0 11px 11px;
  min-height: 340px;
  max-height: 520px;
}
.modal-chart-container {
  min-width:350px;
  width:100%;
  height: 330px;
  min-height: 250px;
  max-width:520px;
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart-speedtest {
  width: 98% !important;
  height: 320px !important;
  max-height: 340px;
}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@media (max-width: 900px) {
  .infra-group-container {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .infra-col {
    margin-bottom: 2em;
  }
  .dashboard-header {
    flex-direction: column;
    text-align: center;
    gap: 1em;
    padding: 1.2em 1em 0.5em 1em;
  }
}
@media (max-width: 700px) {
  .infra-group-container, .cards-group {
    flex-direction: column;
    max-width: 97vw;
    width: 97vw;
  }
  .card {
    min-width: 160px;
    max-width: none;
    font-size: 1em;
    padding: 1em 0.4em;
  }
}
::-webkit-scrollbar { width: 8px;}
::-webkit-scrollbar-thumb { background: #2c364d; border-radius: 4px;}
::-webkit-scrollbar-track { background: #161c26;}