.checkbox-container{display:flex;align-items:center;margin-right:10px}
    .checkbox-container input[type="checkbox"]{width:60px;height:30px;appearance:none;cursor:pointer;position:relative;display:inline-block;padding:10px 20px;margin:10px 0;border-radius:20px;background:#404040;color:#fff;background-position:8px center;background-repeat:no-repeat;padding-left:32px;background-size:16px 16px;transition:background-color .3s ease;}
    .checkbox-container input[type="checkbox"]::after{content:attr(data-label);color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;pointer-events:none;}
    .checkbox-container input[type="checkbox"]:checked#red    {background:red}
    .checkbox-container input[type="checkbox"]:checked#yellow {background:yellow;color:#000}
    .checkbox-container input[type="checkbox"]:checked#green  {background:green}
  .dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1rem;
}

.card {
  background: #222;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.graph-card {
  height: 45vh;
  display: flex;
  flex-direction: column;
}

.graph-card canvas {
  width: 100%;
  height: 100%;
  padding-bottom: 3em;
}


.row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

@media (max-width: 900px) {
  .row {
    grid-template-columns: 1fr;
  }
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 0.5rem;
  border: 1px solid #555;
}

h3 {
  margin-bottom: 0.5rem;
}

.info-card {
  background: #2a2a2d;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  width: 90%;
  max-width: 1200px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.info-card h2 {
  margin-bottom: 10px;
}

.info-card p, .info-card ul {
  line-height: 1.6;
  color: #ddd;
}

.info-card code {
  background: #1e1e22;
  padding: 2px 6px;
  border-radius: 5px;
  color: #9fe7ff;
}

.setup-img {
  display: block;
  margin: 15px auto;
  max-width: 80%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.accordion {
  margin-top: 2rem;
}

.accordion-item {
  background-color: #242428;
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.accordion-header {
  width: 100%;
  padding: 1rem;
  background: #2c2c31;
  color: #fff;
  font-size: 1.1rem;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

.accordion-header:hover {
  background: #3a3a40;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 1rem;
}

.accordion-content p,
.accordion-content ul {
  margin: 1rem 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  padding: 1rem;
}