.cpu-chart-wrap {
    font-family: 'Terminus', monospace;
    padding: 8px 0;
    user-select: none;
    max-width: 1100px;
    margin: 32px auto;
  }
  .cpu-chart-wrap .cc-title {
    font-size: 18px; font-weight: 600; text-align: center;
    letter-spacing: 1px; margin-bottom: 2px;
  }
  .cpu-chart-wrap .cc-sub {
    font-size: 15px; text-align: center; opacity: 1; margin-bottom: 8px;
  }
  .cpu-chart-wrap .cc-row {
    display: flex; align-items: flex-start;
  }
  .cpu-chart-wrap .cc-ylab {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 15px; opacity: 1; white-space: nowrap;
    letter-spacing: 1px; margin-right: 3px; align-self: center;
  }
  .cpu-chart-wrap .cc-box {
    position: relative; width: 100%; height: 560px;
  }
  .cpu-chart-wrap .cc-box canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
  .cpu-chart-wrap .cc-xlab {
    font-size: 15px; text-align: center; opacity: 1;
    letter-spacing: 1px; margin-top: 4px;
  }
  .cpu-chart-wrap .cc-legend {
    display: flex; flex-wrap: wrap; gap: 5px 14px;
    margin-top: 10px; justify-content: center; font-size: 15px;
  }
  .cpu-chart-wrap .cc-legend span {
    display: flex; align-items: center; gap: 4px;
  }

  .cc-float {
    position: absolute; display: none; pointer-events: none;
    background: #fff; border: 1px solid #bbb; border-radius: 5px;
    padding: 7px 11px; font-size: 14px; font-family: 'Terminus', monospace;
    color: #111; white-space: nowrap; z-index: 20; line-height: 1.7;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  }
  
  .cc-flex {
    flex: 1;
}
  
  /* History Chart - elementos gerados pelo JavaScript */

.chart-legend-line {
    width: 18px;
    height: 2px;
    display: inline-block;
    vertical-align: middle;
}

.chart-legend-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.cc-float-title {
    font-weight: bold;
}

.cc-float-label {
    opacity: 0.6;
}

.cc-float-note {
    opacity: 0.55;
    font-size: 10px;
}
  
  
  @media (prefers-color-scheme: dark) {
    .cc-float { background: #1e1e1e; border-color: #ffffff; color: #ddd; }
  }