.control-surface-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 10000;
  box-sizing: border-box; width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 28px);
  overflow: auto; padding: 14px; color: #e2edf5; background: #171e29;
  border: 1px solid #435569; border-radius: 12px; box-shadow: 0 12px 38px #0008;
  font: inherit;
}
.control-surface-panel [hidden] { display: none !important; }
.control-surface-panel header,.control-surface-panel nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.control-surface-panel header { justify-content: space-between; }
.control-surface-panel h2 { margin: 0; font-size: 16px; }
.control-surface-panel p { color: #aabed3; font-size: 13px; }
.control-surface-panel button { border: 1px solid #4b637a; background: #263648; color: #e3effb; padding: 5px 9px; border-radius: 5px; cursor: pointer; }
.control-surface-panel button[aria-pressed="true"] { border-color: #81d7bd; background: #25483f; }
.control-surface-panel button:disabled { opacity: .45; cursor: default; }
.control-surface-panel input:not([type="range"]),.control-surface-panel select { box-sizing: border-box; width: 100%; min-width: 0; background: #111923; border: 1px solid #4a6277; border-radius: 4px; color: inherit; padding: 4px; }
.control-surface-panel input[type="range"] { width: 100%; min-width: 0; accent-color: #80d8bc; }
.control-surface-panel label { min-width: 0; display: grid; gap: 4px; font-size: 12px; color: #bfd0df; }
.control-surface-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 8px; }
.control-surface-control,.control-surface-card { border: 1px solid #344457; border-radius: 7px; background: #1e2b3a; padding: 9px; }
.control-surface-control { display: grid; align-content: start; justify-items: center; gap: 8px; }
.control-surface-control strong { font-size: 13px; overflow-wrap: anywhere; }
.control-surface-control small { color: #a4b6c7; }
.control-surface-range { width: 100%; display: flex; align-items: center; gap: 4px; font-size: 11px; }
.control-surface-range output { min-width: 36px; text-align: right; }
.control-surface-knob,.control-surface-pad { position: relative; touch-action: none; cursor: grab; border: 1px solid #56758a; background-color: #162431; }
.control-surface-knob { width: 42px; height: 42px; border-radius: 50%; transform: rotate(var(--knob-angle)); }
.control-surface-knob::after { content: ''; position: absolute; left: calc(50% - 2px); top: 4px; width: 4px; height: 12px; border-radius: 2px; background: #8cf0d0; }
.control-surface-pad { width: 100%; height: 82px; border-radius: 4px; cursor: crosshair;
  background-image: linear-gradient(90deg, transparent 49.5%, #476079 50%, transparent 50.5%), linear-gradient(transparent 49.5%, #476079 50%, transparent 50.5%); }
.control-surface-pad::after { content: ''; position: absolute; left: var(--pad-x, 50%); top: var(--pad-y, 50%); width: 10px; height: 10px; border-radius: 50%; background: #8cf0d0; transform: translate(-50%, -50%); pointer-events: none; }
.control-surface-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px; align-items: end; margin: 6px 0; }
.control-surface-link { grid-template-columns: minmax(125px, 2fr) minmax(54px, 1fr) minmax(54px, 1fr) auto; }
.control-surface-card { margin: 8px 0; }
.control-surface-card fieldset { min-width: 0; border: 1px solid #40566c; border-radius: 5px; padding: 8px; margin-top: 8px; }
.control-surface-card legend { font-size: 12px; }
.control-surface-panel [data-surface-apply] { background: #305b4c; }
@media (max-width: 500px) { .control-surface-link { grid-template-columns: 1fr 1fr; } }