.chart-header h2 {
  color: #00ff88;
  font-size: 18px;
  text-shadow: 0 0 10px #00ff88;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom:20px;
}

.chart-legend div {
  font-size: 11px;
  color: #00ff88aa;
  padding: 4px 8px;
  border: 1px dashed #00ff88;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s, opacity 0.3s;
  cursor: pointer;
  user-select: none;
}

.chart-legend div:hover {
  background: #00ff88;
  color: #000;
}

.chart-legend div.hidden {
  opacity: 0.4;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
}

.chart-body {
  height: 600px;
  position: relative;
padding: 0;
margin: 0;
}

.chart-wrapper {
	width: calc(100% - 48px);
	margin:20px 0;
	grid-column: 1 / -1;
	background: #001100;
	color: #00ff00;
	border: 4px solid #ffff00;
	padding: 20px;
	position: relative;
}

.chart-wrapper::before,
.chart-wrapper::after {
	content: '';
	position: absolute;
	background: #ffff00;
}

.chart-wrapper::before {
	top: -8px;
	left: 8px;
	right: 8px;
	height: 4px;
}

.chart-wrapper::after {
	left: -8px;
	top: 8px;
	bottom: 8px;
	width: 4px;
}
.toggleLegend {
	display:none;
}
.close-legend {
	display:none;
}
@media (max-width: 1024px) {
  .chart-legend {
    display: none; /* ukryta domyślnie */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 50px 10px 10px 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    align-items: flex-start;
    z-index: 10000;
    width: calc(100% - 24px);
	background: #1e1e1e;
	color: #00ffff;
	border: 2px dashed #39ff14;
	box-shadow: 0 0 20px rgba(0,255,255,0.5);
  }

  /* Przyciemnione tło za legendą */
  .legend-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
  }

  .toggleLegend {
    display: block;
    margin-bottom: 10px;
  }

  /* Przycisk zamykania wewnątrz legendy */
  .chart-legend .close-legend {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    border: none;
    background: none;
    cursor: pointer;
	z-index: 10001;
	display:block;
  }
}