.pes-root {
  --pes-bg: #eef6f5;
  --pes-grid: rgba(13, 94, 112, 0.12);
  --pes-grid-strong: rgba(13, 94, 112, 0.16);
  --pes-line: #b8c9cf;
  --pes-line-strong: #8ea7b0;
  --pes-panel: rgba(255, 255, 255, 0.86);
  --pes-panel-solid: #fff;
  --pes-toolbar: rgba(232, 244, 244, 0.94);
  --pes-ink: #10242b;
  --pes-muted: #47636d;
  --pes-soft: #5f7882;
  --pes-accent: #047857;
  --pes-accent-strong: #0d9488;
  --pes-accent-text: #fff;
  --pes-control: #fff;
  --pes-control-text: #10242b;
  --pes-chart-bg: #f8fbfc;
  --pes-chart-grid: rgba(13, 94, 112, 0.14);
  --pes-chart-text: #19323b;
  --pes-twin-bg: rgba(219, 235, 238, 0.72);
  --pes-cavity: #f8fbfc;
  --pes-shadow: rgba(28, 75, 92, 0.16);

  overflow: hidden;
  border: 1px solid var(--pes-line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.68)),
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--pes-grid) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--pes-grid-strong) 24px),
    var(--pes-bg);
  color: var(--pes-ink);
  box-shadow: 0 24px 70px var(--pes-shadow);
}

.pes-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--pes-line);
  background: var(--pes-toolbar);
}

.pes-settings {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
  border-bottom: 1px solid var(--pes-line);
  overflow-x: auto;
  white-space: nowrap;
}

.pes-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: color-mix(in srgb, var(--pes-toolbar) 86%, var(--pes-accent) 14%);
}

.pes-tabs button,
.pes-unit button,
.pes-copy {
  border: 0;
  border-right: 1px solid var(--pes-line);
  background: transparent;
  color: var(--pes-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  min-height: 42px;
  padding: 0 0.82rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.pes-tabs button[aria-pressed="true"],
.pes-unit button[aria-pressed="true"],
.pes-copy {
  background: var(--pes-accent);
  color: var(--pes-accent-text);
}

.pes-unit {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.pes-unit span,
.pes-currency span {
  color: var(--pes-muted);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 0.7rem;
  text-transform: uppercase;
}

.pes-currency {
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr);
  align-items: center;
  border-left: 1px solid var(--pes-line);
  flex: 0 0 360px;
  min-width: 260px;
}

.pes-currency select {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-left: 1px solid var(--pes-line);
  background: var(--pes-control);
  color: var(--pes-control-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 0.55rem;
}

.pes-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(360px, 1.4fr) minmax(270px, 0.9fr);
}

.pes-panel {
  min-width: 0;
  border-right: 1px solid var(--pes-line);
  background: var(--pes-panel);
}

.pes-panel:last-child {
  border-right: 0;
}

.pes-panel-title {
  border-bottom: 1px solid var(--pes-line);
  background: rgba(13, 148, 136, 0.1);
  color: var(--pes-ink);
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 38px;
  padding: 0.68rem 0.82rem;
  text-transform: uppercase;
}

.pes-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
  padding: 0.82rem;
}

.pes-input-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
  gap: 0.34rem 0.42rem;
  min-width: 0;
}

.pes-input-grid span {
  grid-column: 1 / -1;
  color: var(--pes-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pes-input-grid input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--pes-line-strong);
  border-radius: 4px;
  background: var(--pes-control);
  color: var(--pes-control-text);
  font: inherit;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 0 0.55rem;
}

.pes-input-grid em {
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 38px;
  border: 1px solid var(--pes-line-strong);
  border-radius: 4px;
  color: var(--pes-accent);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
  padding: 0 0.28rem;
  text-align: center;
}

.pes-telemetry canvas {
  display: block;
  width: 100%;
  aspect-ratio: 2.5;
  border-bottom: 1px solid var(--pes-line);
}

.pes-twin {
  display: block;
  width: 100%;
  min-height: 190px;
  background: var(--pes-twin-bg);
}

.pes-twin text {
  fill: var(--pes-ink);
  font: 900 22px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.pes-twin #pes-hole {
  fill: var(--pes-cavity);
  stroke: var(--pes-accent-strong);
}

.pes-telemetry[data-severity="critical"] .pes-twin #pes-hole {
  stroke: #ef4444;
}

.pes-telemetry[data-severity="watch"] .pes-twin #pes-hole {
  stroke: #f59e0b;
}

.pes-status {
  border-bottom: 1px solid var(--pes-line);
  padding: 0.95rem;
}

.pes-status b {
  display: block;
  color: var(--pes-accent);
  font-size: 1rem;
  text-transform: uppercase;
}

.pes-status span {
  display: block;
  margin-top: 0.35rem;
  color: var(--pes-soft);
  font-size: 0.82rem;
  line-height: 1.42;
}

.pes-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pes-kpis div {
  min-width: 0;
  border-bottom: 1px solid var(--pes-line);
  border-right: 1px solid var(--pes-line);
  padding: 0.78rem;
}

.pes-kpis div:nth-child(2n) {
  border-right: 0;
}

.pes-kpis span {
  display: block;
  color: var(--pes-muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pes-kpis b {
  display: block;
  margin-top: 0.3rem;
  color: var(--pes-ink);
  font-size: clamp(0.78rem, 1.35vw, 1.16rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.16;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.08rem;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.pes-copy {
  width: 100%;
  border-right: 0;
  min-height: 48px;
}

.pes-physics {
  border-top: 1px solid var(--pes-line);
  background: var(--pes-panel-solid);
}

.pes-physics p {
  margin: 0;
  color: var(--pes-soft);
  line-height: 1.58;
  padding: 0.95rem;
}

.theme-light .pes-root {
  color: var(--pes-ink);
}

.theme-dark .pes-root {
  --pes-bg: #0e1721;
  --pes-grid: rgba(94, 234, 212, 0.12);
  --pes-grid-strong: rgba(94, 234, 212, 0.12);
  --pes-line: #314357;
  --pes-line-strong: #41566e;
  --pes-panel: rgba(7, 16, 24, 0.76);
  --pes-panel-solid: rgba(3, 7, 18, 0.68);
  --pes-toolbar: rgba(3, 7, 18, 0.72);
  --pes-ink: #e6f7f4;
  --pes-muted: #9fb6c5;
  --pes-soft: #c4d3dc;
  --pes-accent: #38f2c2;
  --pes-accent-strong: #38f2c2;
  --pes-accent-text: #061018;
  --pes-control: #071018;
  --pes-control-text: #eefdf8;
  --pes-chart-bg: #071018;
  --pes-chart-grid: rgba(94, 234, 212, 0.18);
  --pes-chart-text: #dffaf4;
  --pes-twin-bg: rgba(2, 6, 23, 0.48);
  --pes-cavity: #071018;
  --pes-shadow: rgba(3, 7, 18, 0.36);

  border-color: #445d72;
  background:
    linear-gradient(rgba(14, 23, 33, 0.84), rgba(14, 23, 33, 0.84)),
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--pes-grid) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, var(--pes-grid-strong) 24px),
    var(--pes-bg);
}

@media (max-width: 1120px) {
  .pes-workbench {
    grid-template-columns: 1fr;
  }

  .pes-panel {
    border-right: 0;
    border-bottom: 1px solid var(--pes-line);
  }
}

@media (max-width: 720px) {
  .pes-input-grid,
  .pes-kpis {
    grid-template-columns: 1fr;
  }

  .pes-kpis div {
    border-right: 0;
  }
}

@media (max-width: 520px) {
  .pes-settings {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
    white-space: normal;
  }

  .pes-currency {
    border-left: 0;
    border-top: 1px solid var(--pes-line);
    min-width: 0;
  }
}