.app-container {
  height:100vh;
  display:flex;
  flex-direction:column;
overflow:hidden}

.connection-bar {
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-secondary);
  border-bottom:2px solid var(--border-color);
z-index:100}

.part-selector {
  flex:0 0 auto;
  display:flex;
  gap:4px;
  padding:var(--spacing-sm) var(--spacing-sm);
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  position:sticky;
  top:0;
  z-index:90;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
scrollbar-width:none}

.part-selector::-webkit-scrollbar {
display:none}

.part-tab {
  flex:0 0 auto;
  font-size:.7rem;
  padding:6px 10px;
  white-space:nowrap;
  letter-spacing:.02em;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-weight:600;
  cursor:pointer;
transition:all var(--transition-fast)}

.part-tab:hover {
border-color:var(--text-muted)}

.part-tab.type-drum.active {
  background:var(--accent-secondary, #f59e0b);
  border-color:transparent;
color:#000}

.part-tab.type-synth.active {
  background:var(--accent-primary, #6366f1);
  border-color:transparent;
color:#fff}

.part-tab.type-dx.active {
  background:#e040fb;
  border-color:transparent;
color:#fff}

.editor-main {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  position:relative;
padding-bottom:150px}

.section-tabs {
  position:sticky;
  top:55px;
  z-index:85;
  background:var(--bg-primary);
  display:flex;
  gap:var(--spacing-xs);
  padding:var(--spacing-sm) var(--spacing-md);
  border-bottom:1px solid var(--border-color);
margin:0}

.editor-section {
  padding:var(--spacing-md);
  display:flex;
  flex-direction:column;
  gap:var(--spacing-md);
  max-width:800px;
margin:0 auto}

.element-selector {
  display:flex;
  gap:var(--spacing-xs);
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-secondary);
  border-radius:var(--radius-md);
  margin-bottom:var(--spacing-md);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  position:sticky;
  top:130px;
  z-index:80;
box-shadow:0 4px 12px #0003}

.connection-bar.connected {
border-bottom-color:var(--accent-success)}

.connection-status {
  display:flex;
  align-items:center;
gap:var(--spacing-sm)}

.status-indicator {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-error);
  box-shadow:0 0 8px var(--accent-error);
transition:all var(--transition-normal)}

.status-indicator.active {
  background:var(--accent-success);
box-shadow:0 0 8px var(--accent-success)}

.status-text {
  font-size:.875rem;
font-weight:600}

.device-name {
  font-size:.75rem;
  color:var(--text-secondary);
  padding-left:var(--spacing-sm);
  border-left:1px solid var(--border-color);
margin-left:var(--spacing-sm)}

.connection-actions {
  display:flex;
  align-items:center;
gap:var(--spacing-md)}

.btn-icon {
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  cursor:pointer;
transition:all var(--transition-fast)}

.btn-icon:hover {
  border-color:var(--accent-primary);
background:var(--bg-card)}

.sysex-badge {
  font-size:.75rem;
  padding:var(--spacing-xs) var(--spacing-sm);
  border-radius:var(--radius-sm);
  background:#ff525233;
  color:var(--accent-error);
font-weight:600}

.sysex-badge.enabled {
  background:#00e67633;
color:var(--accent-success)}

.modal-overlay {
  position:fixed;
  inset:0;
  background:#000000b3;
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
padding:var(--spacing-lg)}

.modal-panel {
  background:var(--bg-secondary);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-color);
  width:100%;
  max-width:400px;
  max-height:80vh;
  overflow:auto;
box-shadow:0 20px 60px #00000080}

.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--spacing-md) var(--spacing-lg);
border-bottom:1px solid var(--border-color)}

.modal-header h2 {
  font-size:1.125rem;
font-weight:600}

.btn-close {
  background:none;
  border:none;
  font-size:1.5rem;
  color:var(--text-secondary);
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
border-radius:var(--radius-sm)}

.btn-close:hover {
  background:var(--bg-tertiary);
color:var(--text-primary)}

.modal-body {
padding:var(--spacing-lg)}

.form-group {
margin-bottom:var(--spacing-md)}

.form-group label {
  display:block;
  font-size:.8125rem;
  color:var(--text-secondary);
margin-bottom:var(--spacing-xs)}

.form-group select {
  width:100%;
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
font-size:.9375rem}

.form-group select:focus {
  outline:none;
border-color:var(--accent-primary)}

.button-row {
  display:flex;
  gap:var(--spacing-sm);
margin-top:var(--spacing-lg)}

.btn-primary,.btn-secondary {
  flex:1;
  padding:var(--spacing-sm) var(--spacing-md);
  border-radius:var(--radius-sm);
  font-weight:600;
  cursor:pointer;
transition:all var(--transition-fast)}

.btn-primary {
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  border:none;
color:var(--bg-primary)}

.btn-secondary {
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
color:var(--text-primary)}

.btn-secondary:hover {
border-color:var(--accent-primary)}

.section-tab {
  padding:var(--spacing-xs) var(--spacing-md);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--text-secondary);
  font-weight:500;
  font-size:.875rem;
  cursor:pointer;
transition:all var(--transition-fast)}

.section-tab:hover {
color:var(--text-primary)}

.section-tab.active {
  color:var(--accent-primary);
border-bottom-color:var(--accent-primary)}

.param-group {
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
overflow:hidden}

.group-title {
  display:flex;
  align-items:center;
  gap:var(--spacing-sm);
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-secondary);
  font-size:.875rem;
  font-weight:600;
border-bottom:1px solid var(--border-color)}

.group-icon {
font-size:1rem}

.param-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--spacing-sm);
padding:var(--spacing-md)}

.param-grid.adsr-grid {
grid-template-columns:repeat(4,1fr)}

@media(max-width:600px) {
  .param-grid.adsr-grid {
  grid-template-columns:repeat(2,1fr)}

}

.span-2 {
grid-column:span 2}

.param-control {
  display:flex;
  flex-direction:column;
gap:var(--spacing-xs)}

.param-control label {
  font-size:.6875rem;
  color:var(--text-muted);
  text-transform:uppercase;
letter-spacing:.05em}

.param-control .param-value {
  font-size:.8125rem;
  font-weight:600;
  color:var(--accent-primary);
  font-variant-numeric:tabular-nums;
  min-width:40px;
text-align:center}

.param-control.disabled {
  opacity:.3;
pointer-events:none}

.param-control.disabled input,.param-control.disabled select {
cursor:not-allowed}

.slider-control {
align-items:stretch}

.slider-control label {
margin-bottom:var(--spacing-xs)}

.slider-control input[type=range] {
  width:100%;
  margin:var(--spacing-xs) 0;
  cursor:pointer;
  flex-shrink:0;
min-height:40px}

.slider-control-row {
  display:flex;
  justify-content:space-between;
align-items:center}

.knob-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px 8px;
padding:var(--spacing-sm) var(--spacing-md)}

.knob-grid .knob-row-label {
  width:100%;
  font-size:.6rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  margin:4px 0 0;
padding:0}

.knob-control {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  width:52px;
  user-select:none;
  -webkit-user-select:none;
  margin-left:.25rem;
margin-right:.25rem}

.knob-control label {
  font-size:.55rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
text-align:center}

.knob-body {
  position:relative;
  width:40px;
  height:40px;
  cursor:ns-resize;
touch-action:none}

.knob-body svg {
  width:100%;
  height:100%;
display:block}

.knob-track {
  fill:none;
  stroke:var(--border-color);
  stroke-width:3;
stroke-linecap:round}

.knob-fill {
  fill:none;
  stroke:var(--accent-primary);
  stroke-width:3;
  stroke-linecap:round;
transition:stroke-dashoffset .05s ease}

.knob-indicator {
  fill:none;
  stroke:var(--text-primary);
  stroke-width:2;
stroke-linecap:round}

.knob-value {
  font-size:.625rem;
  font-weight:600;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  text-align:center;
line-height:1.15}

.knob-control.active .knob-value {
color:var(--accent-primary)}

input.knob-value-input {
  width:32px;
  font-size:.625rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
  line-height:1;
  color:var(--accent-primary);
  background:transparent;
  border:none!important;
  padding:0;
  margin:0;
  outline:none;
  box-shadow:0 0 0 1px var(--accent-primary),0 0 6px #00d4ff4d;
  border-radius:2px;
  appearance:textfield;
-moz-appearance:textfield}

.knob-value-input::-webkit-outer-spin-button,.knob-value-input::-webkit-inner-spin-button {
  -webkit-appearance:none;
margin:0}

.knob-control.disabled {
  opacity:.3;
pointer-events:none}

.knob-control.active .knob-body {
filter:drop-shadow(0 0 4px rgba(0,212,255,.3))}

.knob-control.knob-green .knob-fill {
stroke:var(--accent-success)}

.knob-control.knob-green.active .knob-value {
color:var(--accent-success)}

.knob-control.knob-green.active .knob-body {
filter:drop-shadow(0 0 4px rgba(0,230,118,.3))}

.knob-control.knob-orange .knob-fill {
stroke:var(--accent-warning)}

.knob-control.knob-orange.active .knob-value {
color:var(--accent-warning)}

.knob-control.knob-orange.active .knob-body {
filter:drop-shadow(0 0 4px rgba(255,171,0,.3))}

.knob-control.knob-purple .knob-fill {
stroke:#e040fb}

.knob-control.knob-purple.active .knob-value {
color:#e040fb}

.knob-control.knob-purple.active .knob-body {
filter:drop-shadow(0 0 4px rgba(224,64,251,.3))}

.select-control select {
  padding:var(--spacing-sm);
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
font-size:.8125rem}

.select-control select:focus {
  outline:none;
border-color:var(--accent-primary)}

.toggle-control {
align-items:flex-start}

.toggle-btn {
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:var(--spacing-xs) var(--spacing-md);
  color:var(--text-secondary);
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
min-width:50px}

.toggle-btn:hover {
border-color:var(--accent-primary)}

.toggle-btn.active {
  background:var(--accent-success);
  border-color:var(--accent-success);
color:var(--bg-primary)}

.toggle-btn.large {
  padding:var(--spacing-sm) var(--spacing-lg);
font-size:.875rem}

.envelope-display {
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-tertiary);
  margin:var(--spacing-sm) var(--spacing-md) 0;
border-radius:var(--radius-sm)}

.envelope-canvas {
  width:100%;
  height:auto;
display:block}

.element-envelope-canvas {
height:120px}

.element-btn {
  flex:0 0 44px;
  height:44px;
  border-radius:var(--radius-sm);
  background:var(--bg-tertiary);
  border:2px solid var(--border-color);
  color:var(--text-secondary);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:all var(--transition-fast);
position:relative}

.element-btn:hover {
border-color:var(--accent-primary)}

.element-btn.active {
  background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  border-color:transparent;
color:var(--bg-primary)}

.element-btn.has-sound:not(.active) {
  border-color:var(--accent-success);
box-shadow:0 0 10px #00e67633}

.element-btn.enabled:after {
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:6px;
  height:6px;
  border-radius:50%;
background:var(--accent-success)}

.element-btn.active.enabled:after {
background:var(--bg-primary)}

.element-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--bg-secondary);
  border-radius:var(--radius-md);
margin-bottom:var(--spacing-md)}

.element-header h3 {
  font-size:1rem;
font-weight:600}

.toast-container {
  position:fixed;
  bottom:var(--spacing-lg);
  left:50%;
  transform:translate(-50%);
  z-index:1100;
  display:flex;
  flex-direction:column;
  gap:var(--spacing-sm);
pointer-events:none}

.toast {
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:var(--spacing-sm) var(--spacing-lg);
  font-size:.875rem;
  box-shadow:0 4px 20px #0006;
pointer-events:auto}

.toast.success {
  border-color:var(--accent-success);
background:#00e6761a}

.toast.error {
  border-color:var(--accent-error);
background:#ff52521a}

.toast.info {
  border-color:var(--accent-primary);
background:#00d4ff1a}

@media(orientation:landscape)and (min-width:768px) {
  .editor-main {
    display:grid;
    grid-template-columns:auto 1fr;
  grid-template-rows:auto 1fr}

  .part-selector {
  grid-column:1 / -1}

  .section-tabs {
    grid-column:1;
    grid-row:2;
    flex-direction:column;
    border-bottom:none;
    border-right:1px solid var(--border-color);
  padding:var(--spacing-md) var(--spacing-sm)}

  .section-tab {
    border-bottom:none;
    border-left:2px solid transparent;
    padding:var(--spacing-sm) var(--spacing-md);
  text-align:left}

  .section-tab.active {
    border-left-color:var(--accent-primary);
  border-bottom-color:transparent}

  .editor-section {
    grid-column:2;
    grid-row:2;
    overflow-y:auto;
    padding-bottom:100px;
  height:100%}

  .section-tabs {
  position:static}

  .element-selector {
  top:0}

  .param-grid {
  grid-template-columns:repeat(3,1fr)}

  .param-grid.adsr-grid {
  grid-template-columns:repeat(4,1fr)}

}

@media(max-width:768px)and (orientation:portrait) {
  .param-grid {
  grid-template-columns:repeat(2,1fr)}

}

@media(min-width:700px)and (max-width:850px) {
  .param-grid {
  grid-template-columns:repeat(2,1fr)}

}

.midi-log-container {
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  height:150px;
  overflow-y:auto;
  font-family:JetBrains Mono,Fira Code,monospace;
  font-size:.6875rem;
  padding:var(--spacing-xs);
  display:flex;
flex-direction:column-reverse}

.midi-log-entry {
  display:flex;
  gap:var(--spacing-sm);
  padding:2px 4px;
  border-bottom:1px solid rgba(255,255,255,.05);
white-space:nowrap}

.log-time {
color:var(--text-muted)}

.log-type {
  font-weight:700;
min-width:25px}

.midi-log-entry.tx .log-type {
color:var(--accent-secondary)}

.midi-log-entry.rx .log-type {
color:var(--accent-success)}

.midi-log-entry.system .log-type {
color:var(--accent-primary)}

.log-data {
  color:var(--text-secondary);
  overflow:hidden;
text-overflow:ellipsis}

.log-empty {
  margin:auto;
  color:var(--text-muted);
font-style:italic}

.status-group {
  margin:var(--spacing-md) 0;
  padding:var(--spacing-sm);
  background:var(--bg-secondary);
border-radius:var(--radius-sm)}

.status-item {
  display:flex;
  justify-content:space-between;
font-size:.75rem}

.text-success {
color:var(--accent-success)}

.text-danger {
color:#ff5252}

.wave-bank-toggle {
  display:flex;
  gap:4px;
margin-bottom:6px}

.wave-bank-btn {
  flex:1;
  padding:4px 12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
transition:all var(--transition-fast)}

.wave-bank-btn:hover {
  border-color:var(--accent-primary);
color:var(--text-primary)}

.wave-bank-btn.active {
  background:var(--accent-primary);
  border-color:var(--accent-primary);
color:#fff}

.wave-selector {
  display:flex;
  flex-direction:column;
gap:8px}

.wave-display {
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
padding:4px}

.wave-step-btn {
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:.9rem;
  cursor:pointer;
transition:all var(--transition-fast)}

.wave-step-btn:hover {
  background:var(--accent-primary);
  color:#fff;
border-color:var(--accent-primary)}

.wave-info {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  padding:2px 8px;
min-width:0}

.wave-number {
  font-size:.65rem;
  color:var(--text-muted);
letter-spacing:.05em}

.wave-name {
  font-size:.9rem;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
text-align:center}

.wave-category {
  font-size:.65rem;
  color:var(--accent-secondary, #f59e0b);
letter-spacing:.03em}

.wave-search-panel {
  display:flex;
  flex-direction:column;
gap:6px}

.wave-search-input {
  width:100%;
  padding:8px 12px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:.85rem;
  outline:none;
box-sizing:border-box}

.wave-search-input:focus {
border-color:var(--accent-primary)}

.wave-search-results {
  max-height:240px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
padding:4px}

.wave-result-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  background:none;
  border:none;
  border-radius:4px;
  color:var(--text-primary);
  cursor:pointer;
  text-align:left;
  width:100%;
  font-size:.8rem;
transition:background var(--transition-fast)}

.wave-result-item:hover {
background:var(--bg-tertiary)}

.wave-result-item.active {
  background:var(--accent-primary);
color:#fff}

.wave-result-num {
  flex:0 0 40px;
  font-size:.7rem;
  color:var(--text-muted);
text-align:right}

.wave-result-item.active .wave-result-num {
color:#ffffffb3}

.wave-result-name {
  flex:1;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
text-overflow:ellipsis}

.wave-result-cat {
  flex:0 0 auto;
  font-size:.65rem;
color:var(--text-muted)}

.wave-result-item.active .wave-result-cat {
color:#ffffffb3}

.wave-search-hint {
  font-size:.75rem;
  color:var(--text-muted);
  text-align:center;
padding:8px}

.mixer-panel {
  background:var(--bg-primary);
  border-top:1px solid var(--border-color);
  border-radius:12px 12px 0 0;
  width:100%;
  max-height:85vh;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
overflow:hidden}

.mixer-header {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  padding:8px 12px;
  border-bottom:1px solid var(--border-color);
  -webkit-flex-shrink:0;
flex-shrink:0}

.mixer-header h2 {
  font-size:.9rem;
  font-weight:600;
margin:0}

.mixer-channels {
  display:-webkit-flex;
  display:flex;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
padding:8px 4px}

.mixer-channels>.mixer-channel {
margin-right:2px}

.mixer-channel {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  align-items:center;
  width:58px;
  min-width:58px;
  -webkit-flex-shrink:0;
  flex-shrink:0;
  padding:4px 3px 8px;
  background:var(--bg-secondary);
  border-radius:6px;
  -webkit-transition:opacity .15s;
transition:opacity .15s}

.mixer-channel>* {
margin-bottom:3px}

.mixer-channel>*:last-child {
margin-bottom:0}

.mixer-channel.dimmed {
opacity:.35}

.mixer-channel.muted .mixer-fader-wrap {
opacity:.4}

.mixer-channel-label {
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:2px 6px;
  border-radius:3px;
  text-align:center;
  width:100%;
  white-space:nowrap;
box-sizing:border-box}

.mixer-channel-label.type-drum {
  background:#f59e0b33;
color:#f59e0b}

.mixer-channel-label.type-synth {
  background:#6366f133;
color:#818cf8}

.mixer-channel-label.type-dx {
  background:#e040fb33;
color:#e040fb}

.mixer-channel-label.type-sampler {
  background:#00e67633;
color:#00e676}

.mixer-channel-label.type-input {
  background:#26c6da33;
color:#26c6da}

.mixer-buttons {
  display:-webkit-flex;
  display:flex;
  gap:2px;
width:100%}

.mixer-btn {
  -webkit-flex:1;
  flex:1;
  padding:3px 0;
  font-size:.6rem;
  font-weight:700;
  border:1px solid var(--border-color);
  border-radius:3px;
  background:var(--bg-tertiary);
  color:var(--text-muted);
  cursor:pointer;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  -webkit-transition:all .1s;
transition:all .1s}

.mixer-mute.active {
  background:#ef4444;
  border-color:#ef4444;
color:#fff}

.mixer-solo.active {
  background:#eab308;
  border-color:#eab308;
color:#000}

.mixer-fader-wrap {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-align-items:center;
  align-items:center;
  width:100%;
  -webkit-transition:opacity .15s;
transition:opacity .15s}

.mixer-fader-groove {
  position:relative;
  width:40px;
  height:130px;
  background:#1a1a1a;
  border-radius:4px;
  border:1px solid #333;
box-shadow:inset 0 2px 6px #0009,0 1px #ffffff0a}

.mixer-fader-ticks {
  position:absolute;
  inset:8px 2px;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  pointer-events:none;
z-index:1}

.mixer-fader-ticks span {
  display:block;
  height:1px;
  background:#333;
width:100%}

.mixer-fader-slot {
  position:absolute;
  top:6px;
  bottom:6px;
  left:50%;
  width:4px;
  margin-left:-2px;
  background:#111;
  border-radius:2px;
  box-shadow:inset 0 1px 3px #000c;
z-index:2}

.mixer-fader-cap {
  position:absolute;
  left:3px;
  right:3px;
  height:6px;
  border-radius:1px;
  background:linear-gradient(180deg,#ccc,#aaa 40%,#888 60%,#777);
  border:1px solid #555;
  border-top-color:#ddd;
  border-bottom-color:#444;
  box-shadow:0 1px 4px #00000080,inset 0 1px #ffffff4d;
  z-index:3;
pointer-events:none}

.mixer-fader-value {
  font-size:.6rem;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  margin-top:3px;
text-align:center}

.mixer-knob {
  width:100%;
padding:0}

.mixer-knob .knob-body {
  width:32px;
height:32px}

.mixer-knob label {
font-size:.5rem}

.mixer-knob .knob-value {
font-size:.55rem}

.btn-icon.active {
  background:var(--accent-primary);
  color:#fff;
border-radius:4px}

.io-section {
  margin-bottom:16px;
  padding-bottom:12px;
border-bottom:1px solid var(--border-color)}

.io-section:last-child {
  margin-bottom:0;
  padding-bottom:0;
border-bottom:none}

.io-section-title {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-secondary);
margin:0 0 8px}

.io-row {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
margin-bottom:8px}

.io-row:last-child {
margin-bottom:0}

.io-row label {
  width:90px;
  -webkit-flex-shrink:0;
  flex-shrink:0;
  font-size:.8rem;
color:var(--text-primary)}

.io-select {
  -webkit-flex:1;
  flex:1;
  padding:6px 24px 6px 8px;
  background:var(--bg-tertiary);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:4px;
  font-size:.8rem;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
background-position:right 8px center}

.io-select:focus {
  outline:none;
border-color:var(--accent-primary)}

.io-slider {
  -webkit-flex:1;
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--bg-tertiary);
  border-radius:2px;
  outline:none;
margin:0 8px}

.io-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent-primary);
cursor:pointer}

.io-slider::-moz-range-thumb {
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent-primary);
  border:none;
cursor:pointer}

.io-value {
  width:30px;
  text-align:right;
  font-size:.75rem;
  color:var(--text-secondary);
font-variant-numeric:tabular-nums}

.fx-panel {
  max-width:520px;
  width:95vw;
  max-height:85vh;
  overflow:hidden;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
flex-direction:column}

.fx-body {
  overflow-y:auto;
  max-height:calc(85vh - 100px);
-webkit-overflow-scrolling:touch}

.fx-tabs {
  display:-webkit-flex;
  display:flex;
  border-bottom:1px solid var(--border-color);
padding:0 var(--spacing-md)}

.fx-tab {
  -webkit-flex:1;
  flex:1;
  padding:8px 4px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--text-secondary);
  font-size:.75rem;
  cursor:pointer;
text-align:center}

.fx-tab.active {
  color:var(--accent-primary);
border-bottom-color:var(--accent-primary)}

.fx-section {
  margin-bottom:16px;
  padding-bottom:12px;
border-bottom:1px solid var(--border-color)}

.fx-section:last-child {
  margin-bottom:0;
  padding-bottom:0;
border-bottom:none}

.fx-section-header {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:space-between;
  justify-content:space-between;
margin-bottom:8px}

.fx-section-header h3 {
  font-size:.8rem;
  font-weight:600;
  color:var(--text-primary);
margin:0}

.fx-type-row {
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
margin-bottom:8px}

.fx-type-row label {
  width:50px;
  -webkit-flex-shrink:0;
  flex-shrink:0;
  font-size:.75rem;
color:var(--text-secondary)}

.fx-type-row .io-select {
  -webkit-flex:1;
flex:1}

.fx-knob-grid {
padding:4px 0}

.fx-params-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
padding:4px 0}

.fx-params-grid .mixer-knob {
  -webkit-flex:none;
  flex:none;
width:auto}

.fx-hint {
  font-size:.75rem;
  color:var(--text-secondary);
  margin:0 0 12px;
  padding:6px 8px;
  background:var(--bg-tertiary);
border-radius:4px}

.fx-hint strong {
color:var(--accent-primary)}

.eq-grid-header {
  display:grid;
  grid-template-columns:52px 1fr 1fr 1fr 56px;
  gap:4px;
  padding:4px 0 0;
  -webkit-align-items:center;
align-items:center}

.eq-grid-header span {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--text-secondary);
text-align:center}

.eq-band-row {
  display:grid;
  grid-template-columns:52px 1fr 1fr 1fr 56px;
  gap:4px;
  padding:2px 0;
  -webkit-align-items:center;
  align-items:center;
border-bottom:1px solid var(--border-color)}

.eq-band-row:last-child {
border-bottom:none}

.eq-band-label {
  font-size:.65rem;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
white-space:nowrap}

.eq-band-row .mixer-knob {
width:auto}

.eq-shape-select {
  font-size:.65rem;
  padding:3px 2px;
  -webkit-align-self:center;
align-self:center}

.eq-shape-placeholder {
display:block}

.toggle-btn.small {
  padding:2px 8px;
  font-size:.65rem;
min-width:36px}

.sample-name-display {
padding:var(--spacing-sm) var(--spacing-md)}

.sample-name-display label {
  display:block;
  font-size:.7rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
margin-bottom:var(--spacing-xs)}

.sample-name-value {
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  padding:var(--spacing-sm) var(--spacing-md);
  font-size:.875rem;
  font-weight:500;
  color:var(--text-primary);
  min-height:36px;
  display:flex;
  align-items:center;
  font-family:JetBrains Mono,Fira Code,monospace;
letter-spacing:.02em}

.number-control {
  display:flex;
  flex-direction:column;
gap:var(--spacing-xs)}

.number-control label {
  font-size:.7rem;
  color:var(--text-muted);
  text-transform:uppercase;
letter-spacing:.05em}

.number-control input[type=number] {
  width:100%;
  padding:var(--spacing-sm);
  background:var(--bg-tertiary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
font-family:JetBrains Mono,Fira Code,monospace}

.number-control input[type=number]:focus {
  outline:none;
border-color:var(--accent-primary)}

.sampler-points-grid {
  grid-template-columns:repeat(3,1fr)!important;
  gap:var(--spacing-sm);
padding:var(--spacing-sm) var(--spacing-md)}

.algo-display {
  display:flex;
  flex-wrap:wrap; 
  justify-content:center;
  gap:2px 8px;
  padding:var(--spacing-sm) var(--spacing-md)
  /*
  background:var(--bg-tertiary);
  margin:var(--spacing-sm) var(--spacing-md) 0;
  border-radius:var(--radius-sm) 
  */
}

.algo-canvas {
  width:200px;
  height:200px;
  display: block;
  margin: 20px auto; /* centers horizontally */
  border: 2px solid #333; /* just for visibility */
}