.pw-root {
  --pw-accent: #d8b56a;
  --pw-blue: #1689d3;
  --pw-line: #cbd7e0;
  --pw-fader-height: clamp(125px, 18dvh, 190px);
  border: 1px solid var(--pw-line);
  background: #f7fafc;
  margin-top: 8px;
  padding: 10px;
  color: #30485b;
}
.pw-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.pw-channel-tabs, .pw-actions { display:flex; align-items:center; }
.pw-channel-tabs { border:1px solid #afc0cc; }
.pw-channel-tabs button, .pw-actions button { border:0; background:#fff; color:#41596b; cursor:pointer; font:inherit; font-size:12px; height:31px; padding:0 16px; }
.pw-channel-tabs button + button { border-left:1px solid #afc0cc; }
.pw-channel-tabs button.is-active { background:var(--pw-blue); color:#fff; }
.pw-actions { gap:7px; }
.pw-actions button { border:1px solid #afc0cc; }
.pw-actions button:hover { border-color:var(--pw-blue); color:var(--pw-blue); }
.pw-actions button.is-on { background:#fff0f0; border-color:#df8e8e; color:#a83333; }
.pw-chart { position:relative; height:clamp(250px, 30dvh, 360px); background:#0b2031; border:1px solid #29475b; touch-action:none; }
.pw-chart canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.pw-chart canvas:active { cursor:grabbing; }
.pw-chart-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,32,49,.78); color:#d7e4ec; font-size:13px; pointer-events:none; }
.pw-chart-status[hidden] { display:none; }
.pw-bank-wrap { display:grid; grid-template-columns:58px minmax(0,1fr); margin-top:8px; border:1px solid #cbd7e0; background:#fff; }
.pw-label-rail { display:grid; grid-template-rows:28px 25px var(--pw-fader-height) 25px 29px; border-right:1px solid #cbd7e0; color:#697d8d; font-size:10px; text-align:right; }
.pw-label-rail > span { display:flex; align-items:center; justify-content:flex-end; padding-right:8px; border-bottom:1px solid #e2e9ee; }
.pw-label-rail > span:last-child { border-bottom:0; }
.pw-label-rail .pw-db-scale { flex-direction:column; justify-content:space-between; padding:3px 8px 3px 0; font-size:9px; }
.pw-db-scale i { font-style:normal; }
.pw-bank-scroll { overflow-x:auto; min-width:0; }
.pw-bank { display:grid; grid-template-columns:repeat(31,minmax(37px,1fr)); min-width:1147px; }
.pw-band { display:grid; grid-template-rows:28px 25px var(--pw-fader-height) 25px 29px; min-width:0; border-right:1px solid #e2e9ee; text-align:center; }
.pw-band:last-child { border-right:0; }
.pw-band button { border:0; border-bottom:1px solid #e2e9ee; background:#fff; color:#30485b; font:inherit; font-size:10px; cursor:pointer; padding:0 2px; overflow:hidden; }
.pw-band button:hover { background:#eef7fa; }
.pw-band-number { font-weight:700; }
.pw-band.is-active .pw-band-number, .pw-band.is-active .pw-band-value { background:#e5f5fc; color:#0877ba; }
.pw-band.is-disabled { opacity:.45; }
.pw-fader { appearance:slider-vertical; writing-mode:vertical-lr; direction:rtl; width:27px; height:calc(var(--pw-fader-height) - 8px); margin:4px auto; accent-color:var(--pw-accent); cursor:pointer; }
.pw-frequency { white-space:nowrap; }
.pw-editor { display:grid; grid-template-columns:145px 150px repeat(3,minmax(190px,1fr)); gap:10px; align-items:end; background:#fff; border:1px solid #cbd7e0; border-top:0; padding:9px 10px; }
.pw-editor-title { align-self:center; }
.pw-editor-title strong { display:block; font-size:14px; }
.pw-editor-title label { display:flex; align-items:center; gap:5px; margin-top:5px; color:#617183; font-size:11px; }
.pw-editor-title input { accent-color:var(--pw-blue); }
.pw-filter-fixed { display:flex; flex-direction:column; gap:7px; align-self:center; color:#617183; font-size:11px; }
.pw-filter-fixed strong { display:flex; align-items:center; height:28px; border:1px solid #bdcbd5; background:#f3f7f9; color:#30485b; padding:0 8px; font-size:12px; font-weight:600; }
.pw-editor-control { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 7px; color:#617183; font-size:11px; }
.pw-editor-control > input[type=range] { grid-column:1/-1; grid-row:2; width:100%; accent-color:var(--pw-blue); }
.pw-stepper { grid-column:2; grid-row:1; display:flex; align-items:center; height:26px; }
.pw-stepper button { width:24px; height:26px; border:1px solid #bdcbd5; background:#f7fafc; color:#30485b; cursor:pointer; font-size:15px; line-height:1; }
.pw-stepper input { width:62px; height:26px; border:solid #bdcbd5; border-width:1px 0; padding:2px 4px; text-align:right; color:#1d3b54; font-size:11px; font-variant-numeric:tabular-nums; }
.pw-stepper small { height:26px; line-height:26px; border-top:1px solid #bdcbd5; border-bottom:1px solid #bdcbd5; color:#697d8d; font-size:9px; padding:0 3px; }
.pw-stepper small:empty { padding:0; }
.pw-stepper button:hover { border-color:var(--pw-blue); color:var(--pw-blue); }
@media (max-width:1200px) {
  .pw-editor { grid-template-columns:130px 135px repeat(3,minmax(170px,1fr)); }
  .pw-bank { grid-template-columns:repeat(31,37px); }
}
@media (max-width:640px) {
  .pw-root { padding:7px; }
  .pw-toolbar { align-items:stretch; }
  .pw-channel-tabs { flex:1; }
  .pw-channel-tabs button { flex:1; padding:6px 8px; }
  .pw-chart { height:250px; }
  .pw-editor { grid-template-columns:1fr; }
  .pw-editor-title { grid-column:auto; }
  .pw-filter-fixed { min-height:48px; }
}