/* ═══════════════════════════════════════════════════════
   TB-303 Bass Line — Stylesheet
   Visual reference: Roland TB-303 hardware panel
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../fonts/tex-gyre-adventor.bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alte DIN 1451 Mittelschrift";
  src: url("../fonts/alte-din-1451-mittelschrift.regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roland TB303";
  src: url("../fonts/roland-tb303-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --panel-bg: #c6c2bc;
  --panel-bg-light: #ccc8c2;
  --panel-bg-dark: #b8b4ae;
  --panel-border: #9a968e;
  --text-dark: #1a1a1a;
  --text-red: #c02020;
  --text-muted: #686460;
  --knob-bg: radial-gradient(
    circle at 42% 38%,
    #b0aaa2,
    #8a8480 45%,
    #6a6460 85%
  );
  --knob-large-bg: radial-gradient(
    circle at 40% 35%,
    #4a4844,
    #2c2a28 55%,
    #1a1a18 90%
  );
  --key-white: #eae6e0;
  --key-black: #1a1816;
  --key-white-active: #f4f0ec;
  --led-off: #5a2a2a;
  --led-on: #ff1a1a;
  --led-glow: 0 0 6px 2px rgba(255, 26, 26, 0.8);
  --step-bg: linear-gradient(180deg, #ccc8c2 0%, #c0bcb6 100%);
  --step-border: #9a968e;
  --btn-bg: #b8b4ae;
  --btn-active: #aaa6a0;
  --section-line: #a09c96;
  --fx-bg: #2a2826;
  --fx-text: #c6c2bc;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: #1a1816;
  color: var(--text-dark);
  font-family: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 12px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* ─── Power-on overlay ──────────────────────────── */

.power-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 12, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.4s;
}

.power-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.power-content {
  text-align: center;
  color: var(--panel-bg);
}

.power-title {
  font-family: "Roland TB303", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: 400;
  letter-spacing: 6px;
  color: #d0cac2;
}

.power-sub {
  font-family: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, sans-serif;
  font-size: 18px;
  font-weight: 200;
  margin-bottom: 32px;
  color: #8a847a;
}

.power-btn {
  background: linear-gradient(180deg, #ccc8c2 0%, #b8b4ae 100%);
  color: var(--text-dark);
  border: 1px solid #9a968e;
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.power-btn:hover {
  background: linear-gradient(180deg, #d8d4ce 0%, #c4c0ba 100%);
}

/* ─── Main panel ────────────────────────────────── */

.tb303-panel {
  width: 100%;
  max-width: 940px;
  background: linear-gradient(
    180deg,
    #d6d2cc 0%,
    #ccc8c2 4%,
    #c6c2bc 15%,
    #c0bcb6 50%,
    #c4c0ba 80%,
    #ccc8c2 95%,
    #d0ccc6 100%
  );
  border-radius: 6px;
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

/* ─── Top strip ─────────────────────────────────── */

.top-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  background: linear-gradient(
    180deg,
    var(--panel-bg-light) 0%,
    var(--panel-bg) 100%
  );
  border-bottom: 1px solid var(--section-line);
  position: relative;
}

.top-strip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.jack-label {
  font-size: 8px;
  text-align: center;
  line-height: 1.2;
  color: var(--text-dark);
  letter-spacing: 0.5px;
}

.jack-label-sm {
  font-size: 7px;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.waveform-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wf-icons {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dark);
}

.knob-strip {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.knob-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.knob-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dark);
  text-align: center;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, sans-serif;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── Brand bar ─────────────────────────────────── */

.brand-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 20px 8px;
  border-bottom: 2px solid var(--section-line);
  position: relative;
}

.brand-bar::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.roland-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.roland-mark {
  width: 30px;
  height: 28px;
  flex-shrink: 0;
}

.roland-text {
  font-family:
    "TeX Gyre Adventor", "ITC Avant Garde Gothic", "Century Gothic", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.5px;
  line-height: 1;
}

.bass-line-text {
  font-family:
    "Roland TB303", "Alte DIN 1451 Mittelschrift", "DIN Alternate", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-dark);
  letter-spacing: 2px;
}

/* ─── Knob widget ───────────────────────────────── */

.knob-widget {
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  outline: none;
  touch-action: none;
}

.knob-widget:focus-visible .knob-body {
  outline: 2px solid #4a90d9;
  outline-offset: 2px;
  border-radius: 50%;
}

.knob-body {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--knob-bg);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  transition: box-shadow 0.1s;
}

.knob-widget.active .knob-body {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.knob-indicator {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 2px;
  height: 11px;
  background: #e0dcd6;
  border-radius: 1px;
  transform: translateX(-50%);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Large knobs (tempo, volume) — silver with bottom cutout arc */
.knob-large {
  width: 68px;
  height: 68px;
  position: relative;
}

.knob-large .knob-body {
  background: radial-gradient(
    circle at 44% 40%,
    #d0ccc8 0%,
    #b8b4b0 25%,
    #a09c98 50%,
    #8a8682 75%,
    #787470 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.knob-large .knob-indicator {
  height: 16px;
  top: 6px;
  width: 2.5px;
  background: #d0ccc8;
  border-radius: 1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.knob-large::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 8px;
  background: linear-gradient(180deg, #b4b0ab 0%, #c2beb8 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  z-index: 2;
  pointer-events: none;
}

/* Selector knobs (patt.group, mode) — silver body with rectangular center pointer */
.knob-selector {
  width: 56px;
  height: 56px;
}

.knob-selector .knob-body {
  background: radial-gradient(
    circle at 44% 40%,
    #d0ccc8 0%,
    #b8b4b0 25%,
    #a09c98 50%,
    #8a8682 75%,
    #787470 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

.knob-selector .knob-indicator {
  width: 14px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    #b0aca8 0%,
    #c4c0bc 20%,
    #d0ccc8 50%,
    #c4c0bc 80%,
    #b0aca8 100%
  );
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Small knobs (FX) */
.knob-small {
  width: 32px;
  height: 32px;
}

.knob-small .knob-indicator {
  height: 9px;
  top: 2px;
}

/* ─── Toggle switch ─────────────────────────────── */

.toggle-switch {
  width: 34px;
  height: 20px;
  background: #3a3836;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 1px rgba(0, 0, 0, 0.3);
}

.switch-lever {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 16px;
  background: linear-gradient(180deg, #d0ccc4, #a8a49c);
  border-radius: 2px;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.15s;
}

.toggle-switch.on .switch-lever {
  transform: translateX(16px);
}

/* ─── Middle section ────────────────────────────── */

.middle-section {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 16px;
  border-bottom: 2px solid var(--section-line);
  position: relative;
}

.middle-section::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.tempo-area,
.volume-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.tempo-labels,
.volume-labels {
  display: flex;
  justify-content: space-between;
  width: 64px;
  font-size: 7px;
  color: var(--text-muted);
}

.bpm-display {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  min-width: 40px;
}

.mode-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.mode-knob-group {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.mode-knob-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.mode-knob-labels {
  display: flex;
  gap: 6px;
  font-size: 7px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.title-area {
  flex: 2;
  text-align: right;
}

.title-main {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--text-dark);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--text-dark);
  display: inline-block;
}

.title-sub {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 3.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

.power-label {
  font-size: 7px;
  color: var(--text-muted);
  margin-top: 4px;
}

.section-label {
  font-family: "Helvetica Neue", Helvetica, "Arial Narrow", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dark);
}

.section-label.red {
  color: var(--text-red);
}

/* ─── Bottom section ────────────────────────────── */

.bottom-section {
  padding: 10px 14px 8px;
  background: linear-gradient(
    180deg,
    #c0bcb6 0%,
    #c4c0ba 4%,
    var(--panel-bg) 100%
  );
  border-top: 1px solid #9a968e;
  border-left: 1px solid #aaa6a0;
  border-right: 1px solid #aaa6a0;
  border-bottom: 1px solid #aaa6a0;
  border-radius: 0;
  margin: 0 8px 0;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Keyboard row */
.keyboard-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 6px;
}

.row-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 56px;
  gap: 4px;
}

.fn-label {
  font-size: 8px;
}

.keyboard {
  display: flex;
  gap: 2px;
  flex: 1;
}

.key-btn {
  flex: 1;
  min-height: 52px;
  min-width: 0;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 1px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 600;
  transition:
    background 0.1s,
    transform 0.05s;
  position: relative;
  outline: none;
}

.key-btn.white-key {
  background: linear-gradient(180deg, #eceae6 0%, #dcdad4 50%, #d0cec8 100%);
  color: var(--text-dark);
  border: 1px solid #aaa8a2;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}

.key-btn.black-key {
  background: linear-gradient(180deg, #2a2826 0%, #1a1816 50%, #0e0e0c 100%);
  color: #a09a90;
  border: 1px solid #0a0a08;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.key-btn:active,
.key-btn.highlight {
  transform: translateY(1px);
}

.key-btn.white-key:active,
.key-btn.white-key.highlight {
  background: linear-gradient(180deg, #f0eee8 0%, #e6e4de 50%, #dcdad4 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.key-btn.black-key:active,
.key-btn.black-key.highlight {
  background: linear-gradient(180deg, #3a3836 0%, #2a2826 50%, #1a1816 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.key-name {
  font-size: 7px;
  pointer-events: none;
}

.time-mode-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 140px;
}

.edit-toggles {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Step buttons ──────────────────────────────── */

.step-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 6px;
}

.step-buttons {
  display: flex;
  gap: 3px;
  flex: 1;
}

.step-btn {
  flex: 1;
  min-height: 48px;
  min-width: 0;
  background: linear-gradient(180deg, #ccc8c2 0%, #c0bcb6 50%, #b6b2ac 100%);
  border: 1px solid #9a968e;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  position: relative;
  outline: none;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 1px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition:
    background 0.1s,
    box-shadow 0.1s;
}

.step-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.step-btn.selected {
  border-color: #5a8ac0;
  box-shadow:
    0 0 0 2px rgba(90, 138, 192, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.step-btn.playing {
  background: linear-gradient(180deg, #d8d4ce 0%, #ccc8c2 100%);
  border-color: var(--text-red);
  box-shadow:
    0 0 0 1px var(--text-red),
    inset 0 0 8px rgba(255, 26, 26, 0.06);
}

.step-btn.gate-on {
  background: linear-gradient(180deg, #c4c0ba 0%, #b0aca6 100%);
}

.step-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
  transition:
    background 0.1s,
    box-shadow 0.15s;
}

.step-led.lit {
  background: var(--led-on);
  box-shadow: var(--led-glow);
}

.step-led.accent {
  background: #ff2020;
  box-shadow: 0 0 8px 3px rgba(255, 32, 32, 0.8);
}

.step-note-label {
  font-size: 7px;
  font-weight: 700;
  color: var(--text-dark);
  min-height: 10px;
}

.step-num {
  font-size: 7px;
  color: var(--text-muted);
}

.step-btn.slide-on::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: #4a90d9;
  border-radius: 1px;
}

.step-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

/* ─── Transport row ─────────────────────────────── */

.transport-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
}

.transport-left {
  flex-shrink: 0;
}

.transport-btn {
  background: linear-gradient(180deg, #c0bcb6 0%, #a8a49e 100%);
  border: 1px solid #8a8680;
  border-radius: 3px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: background 0.1s;
}

.transport-btn:active {
  background: linear-gradient(180deg, #b0aca6 0%, #9a9690 100%);
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.transport-btn .led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led-off);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  transition:
    background 0.15s,
    box-shadow 0.15s;
}

.transport-btn .led.on {
  background: var(--led-on);
  box-shadow: var(--led-glow);
}

.pattern-select {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pattern-btns {
  display: flex;
  gap: 3px;
}

.pat-btn {
  width: 36px;
  height: 28px;
  background: linear-gradient(180deg, #ccc8c2 0%, #b8b4ae 100%);
  border: 1px solid #9a968e;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background 0.1s;
}

.pat-btn:active {
  transform: translateY(1px);
}

.pat-btn.selected {
  background: linear-gradient(180deg, #807c76 0%, #686460 100%);
  color: #eae6e0;
  border-color: #585450;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.transport-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.octave-select {
  display: flex;
  align-items: center;
  gap: 4px;
}

.oct-display {
  font-size: 14px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

/* ─── Small buttons ─────────────────────────────── */

.small-btn {
  background: linear-gradient(180deg, #c0bcb6 0%, #aaa6a0 100%);
  border: 1px solid #8a8680;
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: var(--text-dark);
  white-space: nowrap;
  min-width: 32px;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.small-btn:active {
  background: linear-gradient(180deg, #aaa6a0 0%, #9a9690 100%);
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.small-label {
  font-size: 6px;
  color: var(--text-muted);
}

.toggle-btn.active {
  background: linear-gradient(180deg, #6a6660 0%, #504c48 100%);
  color: #eae6e0;
  border-color: #484440;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ─── FX section ────────────────────────────────── */

.fx-section {
  border-top: 1px solid var(--section-line);
}

.fx-toggle-btn {
  display: block;
  width: 100%;
  background: var(--fx-bg);
  color: var(--fx-text);
  border: none;
  padding: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  text-align: center;
}

.fx-toggle-btn:hover {
  background: #3a3634;
}

.fx-panel {
  display: none;
  background: var(--fx-bg);
  padding: 12px 20px;
  gap: 24px;
  justify-content: center;
}

.fx-panel.open {
  display: flex;
}

.fx-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fx-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--fx-text);
  letter-spacing: 1px;
}

.fx-sub-label {
  font-size: 7px;
  color: #8a847a;
}

.fx-group .knob-small .knob-body {
  background: radial-gradient(
    circle at 40% 35%,
    #5a5850,
    #3a3836 60%,
    #2a2826 90%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fx-group .knob-small .knob-indicator {
  background: #cac4ba;
}

/* ─── Utility bar ───────────────────────────────── */

.utility-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--panel-bg-dark);
  border-top: 1px solid var(--section-line);
  border-radius: 0 0 6px 6px;
}

.util-btn {
  background: linear-gradient(180deg, #c0bcb6 0%, #aaa6a0 100%);
  border: 1px solid #8a8680;
  border-radius: 2px;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: var(--text-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.util-btn:active {
  background: linear-gradient(180deg, #aaa6a0 0%, #9a9690 100%);
}

.midi-status {
  font-size: 9px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════
   UPLOAD BUTTON & MODAL
   ═══════════════════════════════════════════════════════ */

.util-btn-upload {
  background: linear-gradient(180deg, #806AD8 0%, #6A54B8 100%);
  color: #fff;
  border-color: #9E8EE8;
}

.util-btn-upload:active {
  background: linear-gradient(180deg, #6A54B8 0%, #5A44A8 100%);
}

.upload-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.upload-modal.hidden {
  display: none;
}

.upload-modal-content {
  background: #1F1F1F;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 400px;
  width: 90%;
  position: relative;
  color: #EDEDED;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(128, 106, 216, 0.08);
}

.upload-close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #757575;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.upload-close-btn:hover {
  color: #EDEDED;
}

.upload-heading {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
  color: #EDEDED;
}

.upload-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-step.hidden {
  display: none;
}

.upload-text {
  font-size: 13px;
  color: #9E9E9E;
  line-height: 1.5;
}

.upload-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #9E9E9E;
  text-transform: uppercase;
}

.upload-input {
  background: #141414;
  border: 1px solid #474747;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  color: #EDEDED;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.upload-input:focus {
  border-color: #806AD8;
  box-shadow: 0 0 0 2px rgba(128, 106, 216, 0.2);
}

.upload-input::placeholder {
  color: #636363;
}

.upload-action-btn {
  background: linear-gradient(180deg, #806AD8 0%, #6A54B8 100%);
  color: #fff;
  border: 1px solid #9E8EE8;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.upload-action-btn:hover {
  background: linear-gradient(180deg, #9E8EE8 0%, #806AD8 100%);
}

.upload-action-btn:active {
  background: linear-gradient(180deg, #6A54B8 0%, #5A44A8 100%);
}

.upload-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upload-login-btn {
  margin-top: 4px;
}

.upload-link-sm {
  font-size: 11px;
  color: #9E8EE8;
  text-decoration: none;
}

.upload-link-sm:hover {
  color: #D8CFFF;
  text-decoration: underline;
}

.upload-progress-bar {
  width: 100%;
  height: 6px;
  background: #292929;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #806AD8, #C67CFF);
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s ease;
}

.upload-link {
  color: #9E8EE8;
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
}

.upload-link:hover {
  color: #D8CFFF;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  body {
    padding: 4px;
  }

  .tb303-panel {
    border-radius: 4px;
    overflow-x: hidden;
  }

  .top-strip {
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 4px;
  }

  .top-left,
  .top-right {
    display: none;
  }

  .knob-strip {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .knob-widget {
    width: 40px;
    height: 40px;
  }

  .brand-bar {
    padding: 2px 12px 4px;
  }

  .roland-mark {
    width: 24px;
    height: 22px;
  }

  .roland-text {
    font-size: 20px;
  }

  .bass-line-text {
    font-size: 18px;
  }

  .middle-section {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px;
    justify-content: center;
    align-items: flex-start;
  }

  .tempo-area,
  .volume-area {
    flex: 0 0 auto;
  }

  .title-area {
    flex: 1 1 100%;
    order: -1;
    text-align: center;
  }

  .tempo-area,
  .volume-area {
    order: 1;
  }

  .knob-large {
    width: 52px;
    height: 52px;
  }

  .knob-large .knob-indicator {
    height: 14px;
  }

  .title-main {
    font-size: 24px;
  }

  .title-sub {
    font-size: 10px;
  }

  .mode-area {
    display: none;
  }

  .mode-knob-group {
    gap: 12px;
  }

  .knob-selector {
    width: 44px;
    height: 44px;
  }

  .knob-selector .knob-indicator {
    width: 10px;
    height: 32px;
  }

  .power-label {
    display: none;
  }

  .bottom-section {
    padding: 6px 6px;
    margin: 0 4px;
  }

  .keyboard-row {
    flex-wrap: wrap;
  }

  .row-label {
    min-width: 40px;
    order: 0;
  }

  .keyboard {
    order: 1;
    flex-basis: calc(100% - 44px);
    gap: 1px;
  }

  .time-mode-area {
    order: 2;
    min-width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 4px 0;
    gap: 3px;
  }

  .time-mode-area .section-label {
    display: none;
  }

  .key-btn {
    min-height: 44px;
  }

  .step-row {
    flex-wrap: wrap;
  }

  .step-row .row-label {
    order: 2;
    flex-direction: row;
    min-width: auto;
    width: 100%;
    justify-content: flex-start;
    padding: 2px 0;
  }

  .step-buttons {
    gap: 2px;
    order: 1;
    flex-basis: 100%;
  }

  .step-btn {
    min-height: 44px;
  }

  .step-extra {
    display: none;
  }

  .transport-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .pattern-select {
    flex-basis: 100%;
    order: -1;
  }

  .pattern-btns {
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
  }

  .pat-btn {
    width: 36px;
    height: 28px;
    font-size: 10px;
  }

  .transport-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .fx-panel {
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 12px;
  }

  .utility-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
  }
}

/* ═══════════════════════════════════════════════════════
   AUDIUS MODE — Brand switching & toggle
   ═══════════════════════════════════════════════════════ */

.brand-audius {
  display: none;
}

.audius-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #1a1a1a;
}

.audius-toggle-area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.audius-toggle-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   AUDIUS MODE — Full dark theme
   Tokens: P300 #806AD8, P400 #9E8EE8, P500 #D8CFFF
           S300 #C67CFF, S400 #CF90FF
           N25-N950 grayscale
   ═══════════════════════════════════════════════════════ */

body.audius-mode {
  background: #000;
}

body.audius-mode .brand-audius {
  display: initial;
}

body.audius-mode .brand-roland {
  display: none;
}

body.audius-mode .audius-mark {
  color: #EDEDED;
}

/* Panel */
body.audius-mode .tb303-panel {
  background: linear-gradient(
    180deg,
    #282828 0%,
    #222 4%,
    #1C1C1C 15%,
    #1A1A1A 50%,
    #1C1C1C 80%,
    #222 95%,
    #282828 100%
  );
  box-shadow:
    0 6px 40px rgba(128, 106, 216, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Top strip */
body.audius-mode .top-strip {
  background: linear-gradient(180deg, #232323 0%, #1C1C1C 100%);
  border-bottom-color: #333;
}

body.audius-mode .top-strip::after {
  background: rgba(255, 255, 255, 0.02);
}

body.audius-mode .jack-label,
body.audius-mode .wf-icons,
body.audius-mode .knob-label {
  color: #9E9E9E;
}

body.audius-mode .jack-label-sm {
  color: #636363;
}

/* Standard knobs */
body.audius-mode .knob-body {
  background: radial-gradient(circle at 42% 38%, #474747, #333 45%, #1F1F1F 85%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

body.audius-mode .knob-indicator {
  background: #C67CFF;
  box-shadow: 0 0 3px rgba(198, 124, 255, 0.4);
}

body.audius-mode .knob-widget:focus-visible .knob-body {
  outline-color: #806AD8;
}

/* Large knobs (tempo, volume) */
body.audius-mode .knob-large .knob-body {
  background: radial-gradient(
    circle at 44% 40%,
    #474747 0%,
    #3a3a3a 25%,
    #2a2a2a 50%,
    #222 75%,
    #1a1a1a 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

body.audius-mode .knob-large .knob-indicator {
  background: #C67CFF;
  box-shadow: 0 0 4px rgba(198, 124, 255, 0.5);
}

body.audius-mode .knob-large::after {
  background: linear-gradient(180deg, #1A1A1A 0%, #222 100%);
  border-color: rgba(255, 255, 255, 0.04);
  border-top-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Selector knobs (patt.group, mode) */
body.audius-mode .knob-selector .knob-body {
  background: radial-gradient(
    circle at 44% 40%,
    #474747 0%,
    #3a3a3a 25%,
    #2a2a2a 50%,
    #222 75%,
    #1a1a1a 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
}

body.audius-mode .knob-selector .knob-indicator {
  background: linear-gradient(
    90deg,
    #474747 0%,
    #555 20%,
    #636363 50%,
    #555 80%,
    #474747 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Brand bar */
body.audius-mode .brand-bar {
  border-bottom-color: #333;
}

body.audius-mode .brand-bar::after {
  background: rgba(255, 255, 255, 0.02);
}

body.audius-mode .roland-text {
  color: #EDEDED;
}

body.audius-mode .bass-line-text {
  color: #C67CFF;
}

/* Toggle switch (waveform, etc.) */
body.audius-mode .toggle-switch {
  background: #333;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 0 1px rgba(0, 0, 0, 0.4);
}

body.audius-mode .switch-lever {
  background: linear-gradient(180deg, #806AD8, #6A54B8);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(128, 106, 216, 0.3);
}

/* Middle section */
body.audius-mode .middle-section {
  border-bottom-color: #333;
}

body.audius-mode .middle-section::after {
  background: rgba(255, 255, 255, 0.02);
}

body.audius-mode .section-label {
  color: #9E9E9E;
}

body.audius-mode .section-label.red {
  color: #C67CFF;
}

body.audius-mode .tempo-labels,
body.audius-mode .volume-labels,
body.audius-mode .mode-knob-labels {
  color: #636363;
}

body.audius-mode .bpm-display {
  color: #EDEDED;
}

body.audius-mode .title-main {
  color: #EDEDED;
  border-bottom-color: #EDEDED;
}

body.audius-mode .title-sub {
  color: #757575;
}

body.audius-mode .power-label {
  color: #636363;
}

/* Bottom section */
body.audius-mode .bottom-section {
  background: linear-gradient(180deg, #1A1A1A 0%, #1C1C1C 4%, #1F1F1F 100%);
  border-color: #333;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Keyboard */
body.audius-mode .key-btn.white-key {
  background: linear-gradient(180deg, #333 0%, #292929 50%, #222 100%);
  color: #9E9E9E;
  border-color: #474747;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.audius-mode .key-btn.black-key {
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 50%, #080808 100%);
  color: #636363;
  border-color: #0A0A0A;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.audius-mode .key-btn.white-key:active,
body.audius-mode .key-btn.white-key.highlight {
  background: linear-gradient(180deg, #443873 0%, #3a2f63 50%, #332a58 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(128, 106, 216, 0.25);
  color: #D8CFFF;
}

body.audius-mode .key-btn.black-key:active,
body.audius-mode .key-btn.black-key.highlight {
  background: linear-gradient(180deg, #332a58 0%, #261F40 50%, #1a1533 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 10px rgba(128, 106, 216, 0.25);
  color: #D8CFFF;
}

/* Step buttons */
body.audius-mode .step-btn {
  background: linear-gradient(180deg, #292929 0%, #222 50%, #1C1C1C 100%);
  border-color: #474747;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.audius-mode .step-btn.selected {
  border-color: #806AD8;
  box-shadow:
    0 0 0 2px rgba(128, 106, 216, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

body.audius-mode .step-btn.playing {
  background: linear-gradient(180deg, #332a58 0%, #2a2348 100%);
  border-color: #C67CFF;
  box-shadow:
    0 0 0 1px #C67CFF,
    inset 0 0 8px rgba(198, 124, 255, 0.1);
}

body.audius-mode .step-btn.gate-on {
  background: linear-gradient(180deg, #2a2a2a 0%, #252525 100%);
}

body.audius-mode .step-led {
  background: #332a58;
}

body.audius-mode .step-led.lit {
  background: #C67CFF;
  box-shadow: 0 0 6px 2px rgba(198, 124, 255, 0.7);
}

body.audius-mode .step-led.accent {
  background: #D7A3FF;
  box-shadow: 0 0 8px 3px rgba(215, 163, 255, 0.8);
}

body.audius-mode .step-note-label {
  color: #D1D1D1;
}

body.audius-mode .step-num {
  color: #636363;
}

body.audius-mode .step-btn.slide-on::after {
  background: #806AD8;
}

/* Transport */
body.audius-mode .transport-btn {
  background: linear-gradient(180deg, #333 0%, #282828 100%);
  border-color: #474747;
  color: #EDEDED;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.audius-mode .transport-btn:active {
  background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
}

body.audius-mode .transport-btn .led {
  background: #332a58;
}

body.audius-mode .transport-btn .led.on {
  background: #C67CFF;
  box-shadow: 0 0 6px 2px rgba(198, 124, 255, 0.7);
}

/* Pattern buttons */
body.audius-mode .pat-btn {
  background: linear-gradient(180deg, #333 0%, #282828 100%);
  border-color: #474747;
  color: #D1D1D1;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.audius-mode .pat-btn.selected {
  background: linear-gradient(180deg, #806AD8 0%, #6A54B8 100%);
  color: #fff;
  border-color: #9E8EE8;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(128, 106, 216, 0.3);
}

/* Small buttons */
body.audius-mode .small-btn {
  background: linear-gradient(180deg, #333 0%, #282828 100%);
  border-color: #474747;
  color: #D1D1D1;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.audius-mode .small-btn:active {
  background: linear-gradient(180deg, #282828 0%, #222 100%);
}

body.audius-mode .small-label {
  color: #636363;
}

body.audius-mode .toggle-btn.active {
  background: linear-gradient(180deg, #806AD8 0%, #6A54B8 100%);
  color: #fff;
  border-color: #9E8EE8;
}

/* Octave display */
body.audius-mode .oct-display {
  color: #EDEDED;
}

/* FX section */
body.audius-mode .fx-section {
  border-top-color: #333;
}

body.audius-mode .fx-toggle-btn {
  background: #0F0F0F;
  color: #9E9E9E;
}

body.audius-mode .fx-toggle-btn:hover {
  background: #1A1A1A;
}

body.audius-mode .fx-panel {
  background: #0F0F0F;
}

body.audius-mode .fx-label {
  color: #D1D1D1;
}

body.audius-mode .fx-sub-label {
  color: #636363;
}

body.audius-mode .fx-group .knob-small .knob-body {
  background: radial-gradient(circle at 40% 35%, #3a3a3a, #222 60%, #141414 90%);
}

body.audius-mode .fx-group .knob-small .knob-indicator {
  background: #C67CFF;
}

/* Utility bar */
body.audius-mode .utility-bar {
  background: #1A1A1A;
  border-top-color: #333;
}

body.audius-mode .util-btn {
  background: linear-gradient(180deg, #333 0%, #282828 100%);
  border-color: #474747;
  color: #D1D1D1;
}

body.audius-mode .util-btn:active {
  background: linear-gradient(180deg, #282828 0%, #222 100%);
}

body.audius-mode .midi-status {
  color: #636363;
}

body.audius-mode .audius-toggle-label {
  color: #C67CFF;
}

/* Power overlay */
body.audius-mode .power-overlay {
  background: rgba(0, 0, 0, 0.95);
}

body.audius-mode .power-content {
  color: #EDEDED;
}

body.audius-mode .power-title {
  color: #EDEDED;
}

body.audius-mode .power-sub {
  color: #757575;
}

body.audius-mode .power-btn {
  background: linear-gradient(180deg, #806AD8 0%, #6A54B8 100%);
  color: #fff;
  border-color: #9E8EE8;
  box-shadow: 0 3px 12px rgba(128, 106, 216, 0.4);
}

body.audius-mode .power-btn:hover {
  background: linear-gradient(180deg, #9E8EE8 0%, #806AD8 100%);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .knob-strip {
    gap: 2px;
  }

  .knob-col {
    flex: 0 0 auto;
  }

  .knob-widget {
    width: 38px;
    height: 38px;
  }

  .knob-indicator {
    height: 10px !important;
    top: 2px !important;
  }

  .knob-label {
    font-size: 6px;
  }

  .middle-section {
    padding: 6px 8px;
    gap: 6px;
  }

  .knob-large {
    width: 48px;
    height: 48px;
  }

  .knob-large .knob-indicator {
    height: 16px;
  }

  .title-main {
    font-size: 20px;
    letter-spacing: 2px;
  }

  .keyboard {
    gap: 1px;
  }

  .key-btn {
    min-height: 40px;
    padding: 2px 0;
  }

  .key-name {
    font-size: 6px;
  }

  .step-btn {
    min-height: 40px;
    padding: 3px 1px;
  }

  .step-note-label {
    font-size: 6px;
  }

  .step-num {
    font-size: 6px;
  }

  .edit-toggles {
    gap: 2px;
  }

  .small-btn {
    padding: 3px 5px;
    font-size: 7px;
    min-width: 28px;
    min-height: 24px;
  }

  .tempo-labels,
  .volume-labels {
    display: none;
  }

  .bpm-display {
    font-size: 12px;
  }
}