/* LoopState loop2 — UI enhancements ported from native iOS wrapper */

body { padding: 6px 8px !important; box-sizing: border-box !important; }
.wrap { padding: 0 !important; }
input[type=range] { touch-action: none !important; }

/* Canvas-Knob container */
.knob.lsKnob {
  padding: 6px 6px 4px !important;
  min-height: 80px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  box-sizing: border-box !important;
}
#acidPanel .acidBox.lsKnob {
  height: auto !important;
  min-height: 82px !important;
  padding: 6px 6px 4px !important;
}
#acidPanel .knob.lsKnob > label,
#drumPanel .knob.lsKnob > label,
.knob.lsKnob > label {
  position: static !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  margin: 0 0 4px !important;
  left: auto !important; right: auto !important; top: auto !important;
}
.knob.lsKnob .knobModeToggle {
  font-size: 8px !important;
  height: 15px !important;
  padding: 0 5px !important;
  flex-shrink: 0 !important;
}

/* Echo section — CSS grid layout */
.acidHeaderEcho {
  display: grid !important;
  grid-template-columns: 92px 1fr 92px !important;
  grid-template-rows: 18px 60px !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 90px !important;
  height: 90px !important;
  padding-top: 7px !important;
  padding-bottom: 5px !important;
  width: auto !important;
}
#acidEchoToggle { display: none !important; }
#echoOuterLabel { display: none !important; }
.acidHeaderEcho > .echoMixLabel {
  display: flex !important;
  grid-column: 1 !important; grid-row: 1 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  justify-self: stretch !important;
  width: 100% !important;
  gap: 4px !important;
  justify-content: space-between !important;
  align-self: start !important;
}
.acidHeaderEcho > canvas[data-ls-knob]:first-of-type {
  grid-column: 1 !important; grid-row: 2 !important;
  justify-self: start !important;
}
.acidHeaderEcho > .echoFeedbackLabel {
  grid-column: 3 !important; grid-row: 1 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  justify-self: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  justify-content: space-between !important;
  align-self: start !important;
}
.acidHeaderEcho > canvas[data-ls-knob]:nth-of-type(2) {
  grid-column: 3 !important; grid-row: 2 !important;
  justify-self: end !important;
}
.acidHeaderEcho > button:not(#acidEchoToggle) {
  grid-column: 2 !important; grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 1px 5px !important;
  font-size: 8px !important;
}
.acidHeaderEcho > input[type=range] { display: none !important; }

#waveToggle.echoToggleSwitch { top: 58% !important; }
#acidPanel .waveSelectorBox {
  min-height: 90px !important;
  height: 90px !important;
  padding-top: 7px !important;
  padding-bottom: 5px !important;
  box-sizing: border-box !important;
}
#acidPanel .waveSelectorBox label {
  top: 9px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* ACCENT / SLIDE / REST / DOWN / UP buttons — Step-Farbpalette mit 3D-Effekt */
#acidPanel .acidEditControls {
  gap: 5px !important;
  margin: 0 0 6px !important;
}
#acidPanel .acidEditControls button {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #f0ede6, #ccc9c0) !important;
  color: #14110d !important;
  border: 1px solid #0d0b09 !important;
  box-shadow:
    0 3px 0 #080604,
    inset 0 1px rgba(255,255,255,.75),
    inset 0 -1px rgba(0,0,0,.12) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  gap: 5px !important;
  transition: background .05s, box-shadow .05s, transform .05s !important;
}
/* Kurzes Antippen */
#acidPanel .acidEditControls button.pressedFx {
  background: linear-gradient(180deg, #b8b5ae, #a0a09a) !important;
  box-shadow: 0 1px 0 #040302, inset 0 2px 3px rgba(0,0,0,.2) !important;
  transform: translateY(2px) !important;
}
/* Gerasteter Zustand — dunkel, eingedrückt */
#acidPanel .acidEditControls button.lsActive {
  background: linear-gradient(180deg, #a8a49c, #bcb8b0) !important;
  color: #2a2520 !important;
  border-color: #0a0806 !important;
  box-shadow:
    0 1px 0 #060503,
    inset 0 3px 5px rgba(0,0,0,.3),
    inset 0 1px 2px rgba(0,0,0,.2),
    inset 0 -1px 0 rgba(255,255,255,.15) !important;
  transform: translateY(1px) !important;
}
#acidPanel .acidEditControls button.lsActive::before { color: #4a7a2a !important; }
/* Icons */
#acidPanel .acidEditControls button::before {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 11px !important;
  color: #5a8a3a !important;
  font-weight: 400 !important;
}
#selectedAccent::before { content: "◆" !important; font-size: 8px !important; }
#selectedSlide::before  { content: "∿" !important; font-size: 13px !important; }
#selectedRest::before   { content: "○" !important; font-size: 10px !important; }
#octDown::before        { content: "▼" !important; font-size: 9px !important; }
#octUp::before          { content: "▲" !important; font-size: 9px !important; }

.panel { border-radius: 10px !important; }
#acidPanel, #drumPanel { margin-bottom: 8px !important; }