.plotsPage {
  max-width: var(--width-xxxxl);
}

.plotCard {
  background-color: var(--secondary-bg);
  border-radius: var(--border-radius-md);
  color: var(--text-color);
  max-width: 95%;
  padding: var(--border-radius-xl);
}

.plotStatusCard {
  margin-bottom: var(--margin-base);
}

.plotDescription {
  margin: 0;
}

.plotStatusGrid {
  display: grid;
  gap: 0.5em 1em;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--margin-base);
}

.plotStatusGrid p,
.plotRangeRow span,
.plotLegendItem {
  font-size: var(--font-size-sm);
  margin: 0;
}

.plotActions {
  display: flex;
  gap: var(--gap-sm);
  margin-top: var(--margin-base);
}

.plotButton {
  background: var(--main-fg);
  border: none;
  border-radius: var(--border-radius-sm);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-demi-bold);
  padding: var(--padding-sm) var(--padding-base);
}

.plotButton:hover {
  transform: var(--hover-scale-sm);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.plotCharts {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  max-width: 95%;
}

.plotAdvancedRow {
  margin: var(--margin-base) 0;
}

.plotChartCard {
  max-width: 100%;
}

.plotCardHeader {
  align-items: baseline;
  display: flex;
  gap: var(--gap-sm);
  justify-content: space-between;
}

.plotSource {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.plotLegend {
  display: flex;
  gap: var(--gap-sm);
  margin-bottom: var(--margin-sm);
}

.plotLegendItem {
  align-items: center;
  display: inline-flex;
  gap: var(--gap-xs);
}

.plotLegendLine {
  border-radius: var(--border-radius-sm);
  display: inline-block;
  height: 3px;
  width: 22px;
}

.plotLegendLine.desired,
.plotLine.desired {
  background-color: var(--main-fg);
  stroke: var(--main-fg);
}

.plotLegendLine.actual,
.plotLine.actual {
  background-color: var(--success-fg);
  stroke: var(--success-fg);
}

.plotLegendLine.p,
.plotLine.p {
  background-color: #63b3ff;
  stroke: #63b3ff;
}

.plotLegendLine.i,
.plotLine.i {
  background-color: #63d79d;
  stroke: #63d79d;
}

.plotLegendLine.d,
.plotLine.d {
  background-color: #f0b35e;
  stroke: #f0b35e;
}

.plotLegendLine.f,
.plotLine.f {
  background-color: #d08bff;
  stroke: #d08bff;
}

.plotSvgWrap {
  background: #0b0b18;
  border: 1px solid var(--track-color);
  border-radius: var(--border-radius-sm);
  min-height: 260px;
  overflow: hidden;
}

.plotSvg {
  display: block;
  height: 260px;
  width: 100%;
}

.plotLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.plotGridLine {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.plotZeroLine {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-dasharray: 6 6;
  stroke-width: 1;
}

.plotRangeRow {
  display: flex;
  justify-content: space-between;
  margin-top: var(--margin-xs);
}

.plotEmpty {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: var(--font-size-sm);
  height: 260px;
  justify-content: center;
}

.plotError {
  color: var(--danger-fg);
  margin-top: var(--margin-sm);
}

.qualityDetail {
  color: var(--text-muted);
  font-size: calc(var(--font-size-sm) * 0.95);
}

.qualitySummaryGrid {
  display: grid;
  gap: var(--gap-sm);
  margin-top: var(--margin-base);
}

.qualitySummaryRow {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--track-color);
  border-radius: var(--border-radius-sm);
  padding: var(--padding-sm) var(--padding-base);
}

.qualitySentence {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--font-size-lg) * 1.05);
  font-weight: var(--font-weight-demi-bold);
  gap: var(--gap-xs);
  line-height: 1.3;
  margin: 0;
}

.qualityTone {
  font-size: calc(var(--font-size-xl) * 1.05);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.qualityTone-great {
  color: #66e3ad;
}

.qualityTone-good {
  color: #7fc2ff;
}

.qualityTone-fair {
  color: #f8c36d;
}

.qualityTone-poor {
  color: #ff8ca5;
}

.qualityTone-na {
  color: #d7dcec;
}

.qualityMethodNote {
  color: var(--text-muted);
  font-size: calc(var(--font-size-sm) * 0.92);
  margin-top: var(--margin-sm);
}

.qualityUserGuidance {
  color: var(--text-muted);
  font-size: calc(var(--font-size-sm) * 0.95);
  margin: var(--margin-sm) 0 0 0;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
  .plotCard,
  .plotCharts {
    max-width: 100%;
  }

  .plotCharts {
    grid-template-columns: 1fr;
  }

  .plotStatusGrid {
    grid-template-columns: 1fr;
  }

  .plotActions {
    flex-direction: column;
  }

  .plotLegend {
    flex-direction: column;
    gap: var(--gap-xs);
  }
}