
.psp-credit a { font-weight: 700; }
.psp-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.psp-inputs, .psp-results { display: grid; gap: 20px; min-width: 0; }
.psp h2 { font-size: 18px; margin: 0 0 4px; }
.psp h3 { font-size: 16px; margin: 0; }
.psp h4 { margin: 14px 0 6px; }
.psp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.psp-field { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.psp-field__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.psp-field label, .psp-label { font-weight: 700; font-size: var(--fs-min); }
.psp-num { display: inline-flex; align-items: center; gap: 6px; }
.psp-num .input { width: 7.5em; text-align: right; padding: 8px 10px; }
.psp-unit { color: var(--muted); font-size: var(--fs-min); min-width: 2em; }
.psp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.psp-two > .psp-field { margin-top: 14px; }
.psp input[type="range"] { width: 100%; accent-color: var(--primary); }
.psp-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.psp-seg--wide { display: flex; }
.psp-seg--wide .psp-seg__btn { flex: 1; }
.psp-seg--tabs { display: flex; margin: 14px 0; }
.psp-seg--tabs .psp-seg__btn { flex: 1; }
.psp-seg__btn { border: 0; border-radius: 6px; padding: 6px 12px; min-height: var(--target-min); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-min); font-weight: 700; cursor: pointer; }
.psp-seg__btn:hover { color: var(--text); }
.psp-seg__btn.is-active { background: var(--primary); color: var(--on-accent); }
.psp-presets-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.psp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.psp-chip { border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; min-height: var(--target-min); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-min); cursor: pointer; }
.psp-chip:hover { border-color: var(--primary); }
.psp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.psp-result .card-body { display: grid; gap: 8px; }
.psp-big { font-size: 24px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.psp-sep { color: var(--muted); font-weight: 400; }
.psp-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: var(--fs-min); }
.psp-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.psp-bar__fill { height: 100%; width: 0; transition: width .3s ease; }
.psp-bar__fill--optimum { background: #10b981; }
.psp-bar__fill--noise { background: #f59e0b; }
.psp-bar__fill--critical { background: #f43f5e; }
.psp-canvas-wrap { position: relative; height: 300px; margin-top: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.psp-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.psp-canvas-tags { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.psp-legend ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.psp-legend li { font-size: var(--fs-min); }
.psp-formulas { list-style: none; padding-left: 0; font-variant-numeric: tabular-nums; }
.psp-key { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 0; font-size: var(--fs-min); }
.psp-key__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.psp-key__dot--flow { background: #38bdf8; }
.psp-key__dot--tip { background: #f59e0b; }
.psp-key__dot--limit { background: #f43f5e; }
.psp-compare { margin-top: 20px; }
.psp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.psp-table { min-width: 860px; }
.psp-table td { vertical-align: top; font-variant-numeric: tabular-nums; }
.psp-table__empty { text-align: center; color: var(--muted); }
.psp-table__actions { text-align: right; }
.psp-strong { font-weight: 700; }
.psp-note { margin-top: 14px; }
@media (max-width: 980px) {
  .psp-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .psp-cards, .psp-two { grid-template-columns: minmax(0, 1fr); }
  .psp-canvas-wrap { height: 240px; }
}
.psp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
