/* ── Base ── */
body { font-family: Inter, sans-serif; }

:root {
  --dm-bg-dark: #1a1a2e;
  --dm-bg-mid: #16213e;
  --dm-panel: #0f3460;
  --dm-accent: #e94560;
  --dm-accent-soft: rgba(233, 69, 96, 0.18);
  --dm-gold: #f5a623;
  --dm-gold-soft: rgba(245, 166, 35, 0.15);
  --dm-grid-off: #1e2a3a;
  --dm-grid-off-hover: #263446;
  --dm-grid-on-808: #e94560;
  --dm-grid-on-accent: #f5a623;
  --dm-playhead: rgba(255, 255, 255, 0.12);
  --dm-playhead-active: rgba(255, 255, 255, 0.22);
  --dm-text-dim: #8899aa;
  --dm-border: rgba(255, 255, 255, 0.07);
}

/* ── Tool card ── */
.tool-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

/* ── Controls row ── */
.dm-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Transport buttons ── */
.dm-transport {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dm-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #065f46;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(6,95,70,0.30);
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.dm-play-btn:hover { background: #047857; transform: scale(1.05); }
.dm-play-btn.playing { background: #b45309; box-shadow: 0 2px 8px rgba(180,83,9,0.30); }
.dm-play-btn.playing:hover { background: #92400e; }

.dm-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dm-stop-btn:hover { background: #e5e7eb; }

/* ── BPM ── */
.dm-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
}
.dm-bpm-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dm-bpm-input {
  width: 62px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #065f46;
  text-align: center;
  background: #f9fafb;
}
.dm-bpm-input:focus { outline: 2px solid #6ee7b7; border-color: transparent; }
.dm-bpm-slider {
  width: 64px;
  accent-color: #065f46;
}

/* ── Mode buttons (matches kalimba exactly) ── */
.mode-btn {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mode-btn.active {
  background: #fff;
  color: #065f46;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Fullscreen button (matches kalimba exactly) ── */
.fullscreen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}
.fullscreen-btn:hover {
  background: #fff;
  color: #065f46;
  border-color: #6ee7b7;
}
.fullscreen-btn svg { width: 15px; height: 15px; pointer-events: none; }

/* ── Sequencer grid ── */
.dm-grid-wrap {
  background: var(--dm-bg-dark);
  border-radius: 12px;
  padding: 14px 12px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Step number header ── */
.dm-step-header {
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
  padding-left: 88px; /* align with track rows */
}
.dm-step-num {
  font-size: 8px;
  color: var(--dm-text-dim);
  text-align: center;
  font-weight: 600;
  user-select: none;
  line-height: 1;
}
/* beat group highlight — every 4th step number */
.dm-step-num.beat-start { color: #e2e8f0; }

/* ── Track row ── */
.dm-track-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.dm-track-row:last-child { margin-bottom: 0; }

/* Track label */
.dm-track-label {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dm-track-name {
  font-size: 10px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.dm-track-vol {
  width: 28px;
  accent-color: #6ee7b7;
  flex-shrink: 0;
}

/* Step buttons grid within track */
.dm-steps {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* Individual step button */
.dm-step {
  height: 30px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background: var(--dm-grid-off);
  position: relative;
  transition: background 0.08s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dm-step:hover { background: var(--dm-grid-off-hover); }
.dm-step.on { background: var(--dm-grid-on-808); box-shadow: 0 0 6px rgba(233,69,96,0.5); }

/* Beat group divider — every 4 steps get a tiny left border */
.dm-step.beat-start { border-left: 2px solid rgba(255,255,255,0.06); }

/* Accent (velocity) steps — quarter notes get gold tint when on */
.dm-step.accent.on { background: var(--dm-grid-on-accent); box-shadow: 0 0 6px rgba(245,166,35,0.5); }

/* Playhead highlight */
.dm-step.playhead {
  background: var(--dm-playhead) !important;
  box-shadow: none !important;
}
.dm-step.on.playhead {
  background: #ff6b84 !important;
  box-shadow: 0 0 10px rgba(255,107,132,0.7) !important;
  transform: scaleY(0.93);
}

/* Per-kit color themes via data attribute on grid wrap */
.dm-grid-wrap[data-kit="acoustic"] .dm-step.on { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.5); }
.dm-grid-wrap[data-kit="acoustic"] .dm-step.accent.on { background: #60a5fa; }
.dm-grid-wrap[data-kit="electronic"] .dm-step.on { background: #8b5cf6; box-shadow: 0 0 6px rgba(139,92,246,0.5); }
.dm-grid-wrap[data-kit="electronic"] .dm-step.accent.on { background: #a78bfa; }
.dm-grid-wrap[data-kit="hiphop"] .dm-step.on { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.5); }
.dm-grid-wrap[data-kit="hiphop"] .dm-step.accent.on { background: #34d399; }

/* ── BPM display bar ── */
.dm-bpm-display {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.dm-bpm-big {
  font-size: 1.6rem;
  font-weight: 700;
  color: #065f46;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dm-bpm-unit {
  font-size: 0.65rem;
  font-weight: 600;
  color: #9ca3af;
  margin-top: 4px;
}
.dm-beat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  margin-left: 4px;
  transition: background 0.04s, transform 0.04s;
  flex-shrink: 0;
}
.dm-beat-dot.flash {
  background: #e94560;
  transform: scale(1.5);
}

/* ── Action buttons ── */
.dm-action-btn {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dm-action-btn:hover { background: #fff; border-color: #6ee7b7; color: #065f46; }

/* ── Fullscreen mode (matches kalimba exactly) ── */
.tool-card.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* ── Mobile (<640px) ── */
@media (max-width: 639px) {
  .dm-controls-row { gap: 7px; }
  .dm-bpm-slider { width: 44px; }
  .dm-step { height: 26px; }
  .dm-track-label { width: 60px; }
  .dm-track-name { font-size: 9px; }
  .dm-step-header { padding-left: 66px; }
  .dm-grid-wrap { padding: 10px 8px; }
}

/* table stripes — same as kalimba */
tbody tr:nth-child(even) { background: #f9fafb; }