:root {
  --bg: #141418;
  --surface: #1e1e24;
  --surface2: #28282f;
  --surface3: #323239;
  --accent: #e04040;
  --accent2: #4a8fe8;
  --accent2-dim: #2a4f88;
  --text: #c8c8d0;
  --text-dim: #5a5a70;
  --text-bright: #f0f0f8;
  --cell-off: #242430;
  --cell-low: #5c2a0a;
  --cell-mid: #b04a10;
  --cell-high: #ff6a18;
  --border: #333340;
  --step-h: 36px;
  --header-h: 62px;
  --label-w: 24px;
}

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

html { height: 100%; }

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
}

/* ── Header ── */
#header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-title {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--accent);
}

/* ── Transport ── */
#transport {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 7px 10px;
  background: var(--surface2);
  border-bottom: 2px solid var(--border);
}

.play-btn {
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.1s;
  min-width: 84px;
  touch-action: manipulation;
}
.play-btn:hover { background: #f05050; }
.play-btn.playing { background: #404040; }
.play-btn.playing:hover { background: #505050; }

.transport-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.transport-label {
  color: var(--text-dim);
  letter-spacing: 1px;
  font-size: 10px;
}

.transport-value {
  min-width: 28px;
  font-size: 10px;
  color: var(--text);
}

input[type="range"] {
  -webkit-appearance: none;
  width: 80px;
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent2);
  border-radius: 50%;
  cursor: pointer;
}

input[type="number"] {
  width: 46px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 3px;
  text-align: center;
}
input[type="number"]:focus { outline: 1px solid var(--accent2); }

select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
}
select:focus { outline: 1px solid var(--accent2); }

.add-track-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  touch-action: manipulation;
}
.add-track-btn:hover, .add-track-btn:active {
  background: var(--accent2);
  color: #fff;
}

.midi-btn {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--surface3);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
}
.midi-btn:hover, .midi-btn:active {
  border-color: var(--text-dim);
  color: var(--text);
}

/* ── Sequencer ── */
#track-list {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Each row is a horizontal flex: [step-label] [cell] [cell] ... */
.seq-row {
  display: flex;
  align-items: stretch;
}

/* Sticky column-header row */
.header-row {
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface2);
  border-bottom: 2px solid var(--border);
}

/* Each step row */
.step-row {
  height: var(--step-h);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Beat grouping: top border every 4 steps */
.step-row[data-beat="true"] {
  border-top: 2px solid var(--surface3);
}

/* Playhead highlight */
.step-row.active {
  background: rgba(74, 143, 232, 0.13);
}

/* Step number label column */
.step-label {
  flex: 0 0 var(--label-w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-dim);
  border-right: 1px solid var(--border);
  user-select: none;
}

.step-row[data-beat="true"] .step-label {
  color: var(--text);
  font-weight: bold;
}

/* Track column header */
.track-header {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5px 3px 4px;
  border-left: 1px solid var(--border);
  overflow: hidden;
  gap: 3px;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.track-header:active { cursor: grabbing; }

/* Volume fill bar — grows from bottom, behind content */
.vol-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(74, 143, 232, 0.18);
  pointer-events: none;
  transition: height 0.04s linear;
}

.track-header-name {
  font-size: 9px;
  text-align: center;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  letter-spacing: 0.2px;
  position: relative; /* above vol-bar */
}

.track-header-btns {
  display: flex;
  gap: 2px;
  align-items: center;
  position: relative; /* above vol-bar */
}

.mute-btn, .remove-btn {
  width: 20px;
  height: 20px;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 8px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  touch-action: manipulation;
}
.mute-btn.muted {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.remove-btn:hover { background: #502020; border-color: #804040; color: #ff8080; }

/* Step cells inside each step-row */
.step-cell {
  flex: 1 1 0;
  min-width: 0;
  margin: 3px 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.05s;
  touch-action: manipulation;
}

.step-cell.vel-0 { background: var(--cell-off); }
.step-cell.vel-1 { background: var(--cell-low); }
.step-cell.vel-2 { background: var(--cell-mid); }
.step-cell.vel-3 { background: var(--cell-high); }

.step-cell.vel-0:hover { background: var(--surface3); }
.step-cell.vel-1:hover { filter: brightness(1.25); }
.step-cell.vel-2:hover { filter: brightness(1.15); }
.step-cell.vel-3:hover { filter: brightness(1.1); }

/* ── Add Instrument Dialog ── */
dialog {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 20px 20px;
  min-width: 260px;
  max-width: 90vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
dialog::backdrop { background: rgba(0,0,0,0.7); }

dialog h2 {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-bright);
  margin-bottom: 14px;
  text-transform: uppercase;
}

#preset-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.preset-btn {
  padding: 10px 8px;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
  touch-action: manipulation;
}
.preset-btn:hover, .preset-btn:active {
  background: var(--accent2-dim);
  border-color: var(--accent2);
  color: var(--text-bright);
}

.dialog-cancel-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.dialog-cancel-btn:hover { background: var(--surface3); color: var(--text); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }