.universal-charts,
.universal-split,
.universal-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.universal-compact { min-width: 0; display: grid; gap: 10px; }
.universal-main-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 125px auto; align-items: end; gap: 8px; }
.universal-more-options { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(100px, .6fr) minmax(110px, .8fr) auto; align-items: end; gap: 10px 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.universal-more-options[hidden] { display: none; }
.universal-compact label { min-width: 0; font-size: .76rem; font-weight: 500; }
.universal-compact :is(input, select) { min-width: 0; min-height: 34px; padding: 6px 8px; font-size: .8rem; }
.universal-compact .studio-button { min-height: 34px; padding: 6px 10px; font-size: .78rem; }
.universal-compact .studio-actions { margin: 0; flex-wrap: nowrap; }
.universal-compact .studio-status { font-size: .77rem; margin: 0; }
.universal-compact .studio-status:empty { display: none; }
.universal-chart-view { min-width: 0; }
.universal-chart-view h3 { margin: 0 0 8px; font-size: .95rem; font-weight: 600; }
.universal-chart-view h4 { margin: 0 0 6px; font-size: .82rem; font-weight: 500; }
.universal-chart-view .universal-legend { font-size: .76rem; margin: 0 0 8px; }
.universal-chart-view .studio-sidebar-note { font-size: .76rem; margin-block: 8px; }
.universal-chart-view .universal-split { gap: 16px; }
@media (max-width: 1100px) {
  .universal-main-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .universal-more-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .universal-main-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .universal-more-options { grid-template-columns: minmax(0, 1fr); }
  .universal-main-strip .studio-actions { justify-content: end; }
}

.universal-intro,
.universal-card {
  display: grid;
  min-width: 0;
  gap: .85rem;
}

.universal-card[data-mode="split"] {
  grid-column: 1 / -1;
}

.universal-intro > *,
.universal-card > *,
.universal-values section h4,
.universal-split h4 {
  margin: 0;
}

.universal-controls {
  align-items: end;
}

.universal-controls > * {
  min-width: 0;
}

.universal-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .45rem;
}

.universal-check input {
  width: auto;
  min-height: 0;
}

.universal-edit,
.universal-values {
  border: 1px solid #c9d8d4;
  border-radius: .65rem;
  padding: .7rem .8rem;
}

.universal-edit > summary,
.universal-values > summary {
  cursor: pointer;
  font-weight: 650;
}

.universal-edit[open] > summary,
.universal-values[open] > summary {
  margin-bottom: .75rem;
}

.universal-edit > div + div {
  margin-top: .7rem;
}

.universal-edit label,
.universal-controls label {
  min-width: 0;
}

.universal-edit select,
.universal-controls select {
  width: 100%;
  min-width: 0;
}

.universal-series-list {
  display: grid;
  gap: .45rem;
}

.universal-series-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  min-width: 0;
}

.universal-series-row label {
  flex: 1 1 11rem;
}

.universal-legend {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: .25rem .8rem;
  list-style: none;
  font-size: .9rem;
}

.universal-legend li {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.universal-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--series-color, #125943);
}

.universal-values h4 .universal-dot {
  margin-right: .35rem;
}

.universal-compact [data-series-color="0"] { --series-color: #15644d; }
.universal-compact [data-series-color="1"] { --series-color: #2651a3; }
.universal-compact [data-series-color="2"] { --series-color: #a84818; }
.universal-compact [data-series-color="3"] { --series-color: #8d2b67; }
.universal-compact [data-series-color="4"] { --series-color: #7b6214; }
.universal-compact [data-series-color="5"] { --series-color: #6951ab; }

.universal-plot {
  margin: 0;
  min-width: 0;
}

.universal-plot figcaption {
  color: #3a5852;
  font-size: .82rem;
}

.universal-plot svg {
  display: block;
  width: 100%;
  min-height: 0;
  height: 160px;
  max-height: 160px;
  overflow: visible;
}
.universal-plot-body { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px; }
.universal-y-labels { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: .7rem; line-height: 1; padding-block: 6px; font-variant-numeric: tabular-nums; }
.universal-y-labels[data-constant="true"] { justify-content: center; }
.universal-x-labels { display: flex; justify-content: space-between; gap: 6px; margin: 4px 0 0 48px; color: #52645c; font-size: .7rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.universal-x-labels[data-single="true"] { justify-content: center; }
@media (max-width: 560px) {
  .universal-plot svg { height: 140px; max-height: 140px; }
}

.universal-plot svg text {
  fill: #263d36;
  font-size: 14px;
}

.universal-plot polyline {
  fill: none;
  stroke: var(--series-color, #125943);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.universal-plot circle {
  fill: var(--series-color, #125943);
}

.universal-grid {
  fill: none;
  stroke: #c8d8d4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.universal-notice {
  padding: .55rem .65rem;
  border: 1px solid #c59429;
  border-radius: .5rem;
  color: #5f3c00;
  background: #fffae8;
  font-size: .87rem;
}

.universal-values > section + section {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid #dfe8e5;
}

.universal-values p {
  margin: .3rem 0;
  font-size: .85rem;
}

.universal-values table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.universal-values th,
.universal-values td {
  padding: .2rem .3rem;
  border-bottom: 1px solid #e6edeb;
  font-size: .86rem;
}

@media (max-width: 1070px) {
  .universal-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 580px) {
  .universal-controls,
  .universal-split {
    grid-template-columns: minmax(0, 1fr);
  }
}