:root {
  --bg: #aeb7bf;
  --panel: #d7dde2;
  --panel-dark: #52606b;
  --panel-mid: #75828d;
  --line: #74818c;
  --line-dark: #46525c;
  --text: #20272d;
  --text-light: #f7f9fa;
  --muted: #59656f;
  --accent: #f2b425;
  --accent-blue: #2f88ad;
  --accent-red: #ad4d43;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(180deg, #d9dee2 0, #aab3bb 46%, #929da6 100%);
}

a:link, a:visited { color: #185d7b; }
button, input { font: inherit; }

button,
.file-button {
  border: 1px solid #4e5d68;
  background: linear-gradient(#71808b, #53616c);
  color: #fff;
  border-radius: 5px;
  padding: .58rem .82rem;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.18);
}

button:hover,
.file-button:hover { filter: brightness(1.06); }
button.secondary { background: linear-gradient(#858f98, #67737d); }

.app { width: min(1480px, 96%); margin: 18px auto 42px; }

.topbar,
.sample-card,
.fx-panel,
.sequencer-panel,
.keyboard-panel,
.record-panel,
.lexicon-panel {
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  box-shadow: 0 5px 14px rgba(34,45,54,.18), inset 0 1px rgba(255,255,255,.55);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: linear-gradient(#edf0f2, #c5ccd2);
}

h1, h2, h3, p { margin-top: 0; }
h1 {
    margin-bottom: 6px;
    font-size: clamp(2rem, 6vw, 2.9rem);
    letter-spacing: -.060em;
    line-height: .92;
    font-weight: 550;
}
h2 { margin-bottom: 0; font-size: 1.15rem; }
h3 { margin-bottom: 6px; font-size: .96rem; color:#26323a; }
.topbar p, .record-panel p { margin-bottom: 0; color: var(--muted); }

.eyebrow {
  display: block;
  color: #8a6100;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 4px;
}

.master,
.level-row label {
  display: grid;
  grid-template-columns: auto minmax(110px,180px) 60px;
  align-items: center;
  gap: 10px;
}

.sample-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sample-card, .sequencer-panel, .keyboard-panel, .record-panel, .fx-panel, .lexicon-panel { padding:15px; }
.sample-card { background: linear-gradient(#e4e8eb, #cbd2d7); }
.fx-panel, .sequencer-panel, .keyboard-panel, .record-panel, .lexicon-panel { margin-top:14px; background: linear-gradient(#dce1e5, #c7cfd5); }

.card-head, .section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:11px; }
.file-button { display:inline-flex; white-space:nowrap; }
.file-button input { display:none; }
.filename { min-height:1.5em; color:var(--muted); font-size:.9rem; margin-bottom:9px; overflow-wrap:anywhere; }

.wave-wrap { border:1px solid #4a5660; background:#263039; border-radius:5px; overflow:hidden; box-shadow:inset 0 2px 8px rgba(0,0,0,.35); }
canvas { display:block; width:100%; height:180px; touch-action:none; }
.wave-help { color:#c7d0d7; background:#3d4851; font-size:.78rem; padding:6px 9px 8px; border-top:1px solid #596670; }

.trim-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:11px; }
.trim-row label, .transport label { display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
input[type="number"] { width:88px; background:#f7f8f9; color:var(--text); border:1px solid #7d8992; border-radius:4px; padding:.45rem .5rem; }
input[type="range"] { accent-color: var(--accent); }
.level-row { display:flex; flex-wrap:wrap; gap:15px 22px; margin-top:13px; }

/* Kompakte Rhythmus-Sektion im Stil klassischer Drum-Machines */
.rhythm-controls {
  display:grid;
  grid-template-columns:repeat(4,minmax(86px,1fr));
  gap:7px;
  margin-top:10px;
  padding:8px;
  border:1px solid #66737d;
  border-radius:6px;
  background:linear-gradient(#707d87,#56636d);
}
.rhythm-controls label { display:grid; grid-template-columns:1fr; gap:3px; min-width:0; text-align:center; color:#fff; }
.rhythm-controls label > span { font-size:.69rem; font-weight:800; letter-spacing:.08em; }
.rhythm-controls input[type="range"] { width:100%; min-width:0; }
.rhythm-controls output { color:#ffe28a; font-size:.69rem; font-variant-numeric:tabular-nums; white-space:nowrap; }

.transport { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.steps { display:grid; grid-template-columns:repeat(16,minmax(42px,1fr)); gap:6px; }
.step { min-height:56px; padding:0; border-radius:5px; background:linear-gradient(#66737e,#4c5862); border:1px solid #45515b; color:#e6ebee; }
.step.active { background:linear-gradient(#3c94b7,#267291); border-color:#1c617d; color:#fff; }
.step.playing { outline:3px solid var(--accent); outline-offset:1px; }
.hint { margin:9px 0 0; color:var(--muted); font-size:.86rem; }

.fx-note { color:var(--muted); font-size:.82rem; }
.fx-grid { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:11px 34px; }
.fx-grid label { display:grid; grid-template-columns:105px minmax(120px,1fr) 86px; align-items:center; gap:10px; color:var(--muted); }
.fx-grid output { text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
#delaySpacingOut { min-width:105px; }

.envelope-row { align-items:flex-end; }
.envelope-row label { min-width:230px; }

.keyboard-head { margin-bottom:7px; }
.keyboard-tools, .midi-controls, .octave-controls { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.keyboard-tools { gap:14px; }
.octave-controls strong { min-width:76px; text-align:center; color:#8a6100; }
.keyboard-info { color:var(--muted); font-size:.82rem; margin-bottom:10px; line-height:1.45; }
.keyboard-scroll { overflow-x:auto; padding-bottom:4px; border:1px solid #64717b; background:#4b5660; }
.keyboard { position:relative; width:1318px; min-width:1318px; height:220px; margin:0 auto; user-select:none; touch-action:none; }
.key { position:absolute; top:0; border:1px solid #24272c; cursor:pointer; display:flex; align-items:end; justify-content:center; padding-bottom:10px; font-size:.72rem; font-weight:700; }
.key.white { width:69.333px; height:220px; background:linear-gradient(#fff,#e5e5df); color:#3a3d42; border-radius:0 0 4px 4px; z-index:1; }
.key.black { width:42px; height:135px; background:linear-gradient(#30353c,#080a0e); color:#d5dde5; border-radius:0 0 4px 4px; z-index:3; box-shadow:0 7px 10px rgba(0,0,0,.42); }
.key.pressed { filter:brightness(.78); transform:translateY(2px); }
.key .pc-label { display:block; font-size:.62rem; color:#74808b; margin-top:4px; }
.key.black .pc-label { color:#9aa7b4; }

#midiStatus { color:var(--muted); font-size:.8rem; max-width:360px; overflow-wrap:anywhere; }
#midiConnect:disabled { opacity:.48; cursor:not-allowed; }

.record-panel { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.record-actions { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.record { background:linear-gradient(#b45c53,#8f4039); border-color:#7b332e; }
.record.active { background:linear-gradient(#cf584b,#9d3028); box-shadow:0 0 0 3px rgba(185,69,59,.18); }
#recordStatus { color:var(--muted); min-width:78px; }

.lexicon-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.lexicon-grid article { padding:11px 12px; border:1px solid #9aa5ad; border-radius:6px; background:rgba(248,250,251,.68); }
.lexicon-grid p { margin:0; color:#4e5b64; font-size:.86rem; line-height:1.45; }

footer { color:#52616c; font-size:.82rem; padding:14px 4px 0; text-align:center; }

@media (max-width:950px) {
  .sample-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:repeat(8,minmax(42px,1fr)); }
  .fx-grid { grid-template-columns:1fr; }
  .lexicon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .app { width:calc(100% - 16px); margin-top:8px; }
  .topbar, .card-head, .section-head, .record-panel { align-items:stretch; flex-direction:column; }
  .master, .level-row label { grid-template-columns:92px 1fr 58px; }
  .steps { grid-template-columns:repeat(4,1fr); }
  .step { min-height:50px; }
  .record-actions { justify-content:space-between; }
  canvas { height:150px; }
  .fx-grid label { grid-template-columns:90px 1fr 76px; }
  .octave-controls { justify-content:space-between; }
  .keyboard-info { font-size:.76rem; }
  .keyboard-tools { align-items:stretch; flex-direction:column; }
  .midi-controls { justify-content:space-between; }
  #midiStatus { max-width:none; }
  .envelope-row label { min-width:0; width:100%; }
  .rhythm-controls { grid-template-columns:repeat(2,1fr); }
  .lexicon-grid { grid-template-columns:1fr; }
}


/* =========================================================
   Metronom
   ========================================================= */

.metronome-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 4px;
  color: var(--muted);
  white-space: nowrap;
}

.metronome-switch input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}

.metronome-volume {
  display: grid !important;
  grid-template-columns: auto 110px 48px;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.metronome-volume input[type="range"] {
  width: 110px;
}

.metronome-volume output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  .metronome-volume {
    grid-template-columns: auto minmax(90px, 1fr) 48px;
    width: 100%;
  }

  .metronome-volume input[type="range"] {
    width: 100%;
  }
}