/* ---- Looper ---- */
.tool-page:has(.lp-tracks) { max-width: 100%; }

/* Loop name input */
.lp-name-input {
  display: block; max-width: 400px; margin: -8px auto 16px; width: 100%;
  background: transparent; border: none; border-bottom: 1px solid #2a2d3e;
  padding: 8px 4px; color: #fff; font-size: 1.1rem; font-weight: 700; font-family: inherit;
  outline: none; transition: border-color 0.15s; text-align: center;
}
.lp-name-input:focus { border-bottom-color: var(--spot); }
.lp-name-input::placeholder { color: #444; font-weight: 400; }

/* Toolbar */
.lp-toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin-bottom: 1.5rem; max-width: 960px; width: 100%; }
.lp-select-wrap { position: relative; }
.lp-select { padding: 8px 32px 8px 12px; border: 1.5px solid #2a2d3a; border-radius: 10px; background: #1a1d27; color: #ccc; font-size: 0.8rem; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.15s; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.lp-select:focus { border-color: #3a3d4a; outline: none; }

/* BPM */
.lp-bpm-val { font-size: 0.6rem; font-weight: 700; color: #444; letter-spacing: 0.1em; }
.lp-bpm-unit { font-size: 0.6rem; font-weight: 700; color: #444; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }
.lp-bpm-adj { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #2a2d3a; background: transparent; color: #666; font-size: 0.75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s, color 0.12s; flex-shrink: 0; }
.lp-bpm-adj:hover { border-color: #555; color: #fff; background: rgba(255,255,255,0.05); }
.lp-bpm-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; max-width: 110px; height: 3px; border-radius: 10px; background: #2a2d3a; outline: none; cursor: pointer; }
.lp-bpm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #2a6cb0; cursor: pointer; border: 2px solid #4a8cd0; }
.lp-bpm-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #2a6cb0; cursor: pointer; border: 2px solid #4a8cd0; }

/* Control rows (latency, mic sensitivity) */
.lp-ctrl-row { display: flex; align-items: center; gap: 4px; }
.lp-ctrl-label-wrap { display: inline-flex; align-items: center; gap: 4px; min-width: 100px; width: 100px; justify-content: flex-start; }
.lp-ctrl-label { font-size: 0.6rem; font-weight: 600; color: #444; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.lp-ctrl-val { font-size: 0.6rem; font-weight: 600; color: #444; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.1em; }
.lp-mic-slider { width: 80px; accent-color: #2a6cb0; }

/* Count-in */
.lp-countin { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100; }
.lp-countin-num { font-size: 5rem; font-weight: 900; color: #fff; text-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 120px rgba(0,0,0,0.7); animation: lp-pulse 0.4s ease-out; }
@keyframes lp-pulse { 0% { transform: scale(1.5); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } }

/* Transport */
.lp-main-transport { display: flex; align-items: center; justify-content: center; margin: 4px 0 4px; }
.lp-transport { display: flex; gap: 8px; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-transport-left, .lp-transport-right { flex: 1; display: flex; align-items: center; gap: 6px; }
.lp-transport-left { justify-content: flex-end; padding-right: 28px; }
.lp-transport-right { justify-content: flex-start; padding-left: 28px; flex-direction: column; align-items: flex-start; gap: 4px; }
.lp-transport-btn { background: #1a1d27; color: #888; border: 1.5px solid #2a2d3a; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; font-size: 0.6rem; font-weight: 700; font-family: inherit; }
.lp-transport-btn:hover { background: #222640; border-color: #555; color: #ccc; }
.lp-transport-btn svg { width: 16px; height: 16px; fill: currentColor; }
.lp-play-btn { background: #2a6cb0; color: #fff; border: 2px solid #4a8cd0; width: 44px; height: 44px; }
.lp-play-btn:hover { background: #3580cc; }
.lp-play-btn.playing { background: #3580cc; border-color: #70b0ff; }
.lp-play-btn svg { fill: #fff; }
.lp-rec-btn { background: #1a1d27; color: #c04040; border-color: #502020; }
.lp-rec-btn:hover { background: #2a1520; border-color: #804040; }
.lp-rec-btn.recording { background: #802020; border-color: #e06060; color: #fff; animation: lp-rec-pulse 1s infinite; }
@keyframes lp-rec-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,80,80,0.4); } 50% { box-shadow: 0 0 0 8px rgba(224,80,80,0); } }
.lp-transport-btn.active { border-color: #2a6cb0; color: #7cb8ff; background: #1a2a3c; }

/* Tracks */
.lp-tracks { max-width: 960px; width: 100%; margin-bottom: 1rem; padding: 12px; border: 1.5px solid #2a2d3a; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #1a1d27, #12141c); }
.lp-tracks-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.78rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.08em; }
.lp-add-track-btn { background: transparent; border: none; color: #555; font-size: 1.1rem; cursor: pointer; transition: color 0.15s; font-family: inherit; margin: 6px auto 0; display: block; padding: 2px 8px; }
.lp-add-track-btn:hover { color: #ccc; }
.lp-track-list { display: flex; flex-direction: column; gap: 4px; }

/* Individual track */
.lp-track { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid #2a2d3a; border-radius: 10px; background: #1a1d27; transition: all 0.15s; flex-wrap: wrap; }
.lp-track.active { border-color: #2a6cb0; }
.lp-track.recording { border-color: #c04040; background: #1f1520; }
.lp-track.muted { opacity: 0.5; }
.lp-track-num { font-size: 0.68rem; font-weight: 700; color: #555; min-width: 14px; text-align: center; }

/* Volume fader */
.lp-track-vol { -webkit-appearance: none; appearance: none; width: 80px; height: 4px; border-radius: 10px; background: #2a2d3a; outline: none; cursor: pointer; flex-shrink: 0; }
.lp-track-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 16px; border-radius: 2px; background: #4a8cd0; cursor: pointer; border: 1px solid #7cb8ff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.lp-track-vol::-moz-range-thumb { width: 6px; height: 16px; border-radius: 2px; background: #4a8cd0; cursor: pointer; border: 1px solid #7cb8ff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

.lp-vol-val { font-size: 0.5rem; color: #555; min-width: 16px; text-align: center; flex-shrink: 0; }

/* Pan knob with L/R labels */
.lp-pan-wrap { display: flex; align-items: center; gap: 2px; flex-shrink: 0; min-width: 34px; }
.lp-pan-lr { font-size: 0.45rem; color: #444; font-weight: 700; user-select: none; }
.lp-pan-knob { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #3a3d4a, #1a1d27 70%); border: 1.5px solid #3a3d4a; cursor: pointer; position: relative; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04); }
.lp-pan-knob:hover { border-color: #555; }
.lp-pan-indicator { position: absolute; top: 3px; left: 50%; width: 2px; height: 7px; background: #7cb8ff; border-radius: 1px; transform-origin: 50% 125%; margin-left: -1px; pointer-events: none; }

.lp-track-waveform { flex: 1; height: 32px; border-radius: 10px; background: #13151f; overflow: hidden; position: relative; cursor: pointer; min-width: 100px; outline: 1px solid rgba(255,255,255,0.1); outline-offset: -1px; }
.lp-track-waveform canvas { width: 100%; height: 100%; display: block; }
.lp-track-controls { display: flex; gap: 3px; align-items: center; flex-shrink: 0; min-width: 78px; }
.lp-track-btn { width: 24px; height: 20px; border-radius: 10px; border: 1px solid #2a2d3a; background: #1a1d27; color: #555; font-size: 0.55rem; font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.lp-track-btn:hover { border-color: #555; color: #ccc; }
.lp-track-btn.mute-active { background: #5a2020; border-color: #a03030; color: #ff8a8a; }
.lp-track-btn.solo-active { background: #4a4a10; border-color: #c0c030; color: #ffff60; }
.lp-fx-btn.fx-active { background: #1a2a3c; border-color: #2a6cb0; color: #7cb8ff; }
.lp-track-del { color: #444; font-size: 0.75rem; }
.lp-track-del:hover { color: #e05050; border-color: #a03030; }
.lp-track-del.disabled { opacity: 0.25; pointer-events: none; }

/* Click track — same style as regular tracks */
.lp-click-track { margin-top: 4px; flex-wrap: nowrap; }
.lp-click-left { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; min-width: 94px; max-width: 94px; }
.lp-click-buttons { display: flex; flex-direction: column; gap: 2px; }
.lp-click-mode-btn { width: 100% !important; padding: 4px 6px; font-size: 0.58rem !important; font-weight: 700 !important; text-align: center; }
.lp-click-mode-btn.active { background: #1a2a3c; border-color: #2a6cb0; color: #7cb8ff; }
.lp-dice-btn { font-size: 0.58rem !important; font-weight: 700 !important; width: 100% !important; padding: 4px 6px; color: #555 !important; text-align: center; }
.lp-click-waveform.drums-mode { height: 200px; } /* 10 rows × 20px */
/* Rhythm controls wrapper */
.lp-click-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lp-click-controls .lp-track-vol { width: 80px; flex-shrink: 0; }
.lp-click-btns { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; width: 24px; }
/* Labels + grid wrapper */
.lp-drum-grid-row { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.lp-drum-grid-row .lp-click-waveform { flex: 1; min-width: 0; }
.lp-drum-labels { display: flex; flex-direction: column; flex-shrink: 0; min-width: 40px; max-width: 40px; align-self: stretch; }
.lp-drum-labels span { flex: 1; display: flex; align-items: center; justify-content: flex-end; font-size: 0.42rem; color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; padding-right: 4px; white-space: nowrap; overflow: hidden; }

/* FX Panel — matches backing tracks FX style */
.lp-fx-panel { width: 100%; padding: 6px 0; order: 100; }
.lp-fx-list { display: flex; flex-direction: column; gap: 4px; }
.lp-fx-item { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 10px; background: #13151f; position: relative; margin-bottom: 4px; }
.lp-fx-item-header { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 4px; position: relative; }
.lp-fx-drag { cursor: grab; color: #3a3d4a; font-size: 0.9rem; line-height: 1; user-select: none; position: absolute; left: 0; }
.lp-fx-drag:hover { color: #888; }
.lp-fx-name { font-size: 0.5rem; font-weight: 700; color: #7cb8ff; text-transform: uppercase; text-align: center; }
.lp-fx-dragging { opacity: 0.4; }
.lp-fx-dragover { outline: 1px dashed #2a6cb0; }
.lp-fx-knobs { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.lp-fx-knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; width: 36px; }
.lp-fx-knob { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #3a3d4a, #1a1d27 70%); border: 1.5px solid #3a3d4a; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04); }
.lp-fx-knob:hover { border-color: #555; }
.lp-fx-knob-indicator { position: absolute; top: 4px; left: 50%; width: 2px; height: 10px; background: #7cb8ff; border-radius: 1px; transform-origin: 50% 125%; margin-left: -1px; pointer-events: none; }
.lp-fx-knob-label { font-size: 0.48rem; color: #555; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; text-align: center; }
.lp-fx-remove { background: none; border: none; color: #3a3d4a; font-size: 0.65rem; cursor: pointer; padding: 0; transition: color 0.15s; position: absolute; right: 0; }
.lp-fx-remove:hover { color: #e05050; }
.lp-fx-add-row { display: flex; gap: 3px; flex-wrap: wrap; padding-top: 4px; justify-content: center; }
.lp-fx-add-btn { padding: 2px 6px; border-radius: 10px; border: 1px dashed #2a2d3a; background: transparent; color: #555; font-size: 0.45rem; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.lp-fx-add-btn:hover { border-color: #2a6cb0; color: #7cb8ff; }

/* Actions */
.lp-actions-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.lp-action-btn { padding: 8px 16px; border-radius: 10px; border: 1.5px solid #2a2d3a; background: #1a1d27; color: #ccc; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.lp-action-btn:hover { border-color: #555; color: #fff; background: #252836; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .lp-toolbar-row { gap: 4px; margin-top: -3px; margin-bottom: 21px; min-height: 40px; flex-wrap: nowrap; }
  .lp-select { font-size: 0.75rem; padding: 6px 26px 6px 8px; }
  /* Transport: play row on top, BPM row below on one line */
  .lp-main-transport { flex-direction: column; gap: 6px; }
  .lp-transport { order: -1; }
  .lp-transport-left { flex-direction: row; align-items: center; justify-content: center; padding-right: 0; gap: 4px; flex-wrap: nowrap; }
  .lp-bpm-slider { max-width: 80px; min-width: 50px; }
  .lp-transport-right { align-items: center; padding-left: 0; }
  /* Tracks: num + M/S/FX/pan tight left, vol slider right-aligned, waveform below */
  .lp-track { gap: 3px; padding: 6px 8px; justify-content: flex-start; align-items: center; }
  .lp-track-num { flex-shrink: 0; }
  .lp-track-controls { flex-shrink: 0; gap: 2px; }
  .lp-pan-wrap { flex-shrink: 0; }
  .lp-track-vol { width: 60px; flex-shrink: 0; margin-left: auto; }
  .lp-vol-val { flex-shrink: 0; }
  .lp-track-del { flex-shrink: 0; }
  .lp-track-waveform { flex: none; width: 100%; min-width: 0; order: 99; }
  .lp-transport-btn { width: 40px; height: 40px; }
  .lp-play-btn { width: 44px; height: 44px; }
  .lp-bpm-inline { max-width: 260px; }
  .lp-bpm-adj { width: 36px; height: 36px; font-size: 0.8rem; }
  .lp-actions-row { flex-wrap: wrap; }
  .lp-action-btn { flex: 1; min-width: 0; min-height: 44px; }
  /* Rhythm section: wrap layout on mobile */
  .lp-click-track.lp-track { flex-wrap: wrap; gap: 4px 3px; padding: 8px; align-items: center; justify-content: center; }
  /* Line 1: Click/A-Drums/E-Drums + (Randomise/Humanise/Clear when visible) */
  .lp-click-left { max-width: none; min-width: 0; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: center; order: 1; }
  .lp-click-left .lp-click-buttons { flex-direction: row; flex-wrap: nowrap; gap: 4px; width: 100%; justify-content: center; }
  .lp-click-mode-btn { width: auto !important; padding: 4px 10px; flex: 1; text-align: center; }
  .lp-dice-btn { width: auto !important; padding: 4px 10px; flex: 1; text-align: center; font-size: 0.58rem !important; }
  /* Line 2: M S FX + vol slider centered on own line */
  /* Line 2: M S FX + vol — compact group, centered */
  .lp-click-controls { display: flex; align-items: center; gap: 4px; order: 2; margin: 0 auto; }
  .lp-click-controls .lp-click-btns { flex-direction: row; gap: 4px; width: auto; }
  .lp-click-controls .lp-click-btns .lp-track-btn { width: 24px; height: 20px; font-size: 0.55rem; }
  .lp-click-controls .lp-track-vol { width: 60px; flex: none; }
  /* Line 3: drum grid — force new line, full width */
  .lp-drum-grid-row { width: 100%; order: 3; flex-basis: 100%; }
  /* In click mode, labels are empty — hide them so grid takes full width */
  .lp-drum-labels:empty { display: none; }
  .lp-click-track .lp-drum-labels { min-width: 32px; max-width: 32px; }
}
/* Cloud sessions modal */
.lp-cloud-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
.lp-cloud-modal-content { background: #1a1d27; border: 1.5px solid #2a2d3a; border-radius: 14px; width: 90%; max-width: 480px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.lp-cloud-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #2a2d3a; color: #ccc; font-size: 0.85rem; font-weight: 700; }
.lp-cloud-modal-close { background: none; border: none; color: #666; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; line-height: 1; }
.lp-cloud-modal-close:hover { color: #fff; }
.lp-cloud-sessions-list { overflow-y: auto; padding: 8px; flex: 1; }
.lp-cloud-loading { text-align: center; color: #666; padding: 24px; font-size: 0.8rem; }
.lp-cloud-session-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 4px; background: #13151f; border: 1px solid #2a2d3a; border-radius: 10px; transition: all 0.15s; }
.lp-cloud-session-item:hover { border-color: #555; }
.lp-cloud-session-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lp-cloud-session-name { color: #ddd; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cloud-session-meta { color: #888; font-size: 0.75rem; margin-top: 2px; }
.lp-cloud-session-btn { margin-left: 8px; padding: 4px 14px; border: 1.5px solid #2a2d3a; border-radius: 6px; background: #1a1d27; color: #ccc; font-size: 0.8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: all 0.15s; }
.lp-cloud-session-btn:hover { border-color: #555; color: #fff; background: #252836; }
.lp-cloud-session-btn.export-btn, .lp-cloud-session-btn.delete { font-size: 0.75rem; padding: 4px 10px; }

@media (max-width: 400px) {
  .lp-select { font-size: 0.75rem; padding: 6px 26px 6px 8px; flex: 1; min-width: 0; }
  .lp-transport-btn { width: 38px; height: 38px; }
  .lp-play-btn { width: 44px; height: 44px; }
  .lp-bpm-adj { width: 34px; height: 34px; }
  .lp-bpm-inline { max-width: 220px; }
  .lp-name-input { font-size: 0.75rem; }
}