:root {
  color-scheme: dark;
  --bg: #0e0e12;
  --panel: #17171e;
  --panel-2: #1e1e27;
  --line: #2a2a35;
  --text: #ecedf2;
  --dim: #8f909f;
  --accent: #7c8cff;
  --accent-ink: #0c0c11;
  --danger: #ff6b6b;
  --ok: #4ec98a;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* NOT height:100% — that pins the body box to the viewport, and its bottom
   padding then stops extending the scrollable area, which leaves the last
   layer's controls stranded under the fixed transport with no scroll left. */
html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* Measured from the real transport at runtime (see app.js). The fallback only
     has to hold for the first frame; the footer's height changes with the
     safe-area inset and with the status line wrapping, so it is never a constant. */
  padding-bottom: var(--transport-clearance, 210px);
}

/* Keep anything scrolled-to clear of the footer too. */
html { scroll-padding-bottom: var(--transport-clearance, 210px); }

/* ---------------------------------------------------------------- header */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: rgba(14, 14, 18, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.top h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.top-actions { display: flex; gap: 8px; }

main { padding: 16px; }

/* ---------------------------------------------------------------- buttons */

button {
  font: inherit;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  background: var(--panel-2);
  min-height: 44px;
  padding: 10px 14px;
}

button:disabled { opacity: .4; cursor: default; }

button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  font-size: 14px;
  padding: 8px 12px;
  min-height: 38px;
}

button.icon {
  background: transparent;
  color: var(--dim);
  min-height: 36px;
  min-width: 36px;
  padding: 4px 8px;
  font-size: 15px;
  line-height: 1;
}

button.icon.danger:hover, button.icon.danger:active { color: var(--danger); }

/* ---------------------------------------------------------------- layers */

.layer-list { display: flex; flex-direction: column; gap: 14px; }

.empty, .no-tracks {
  color: var(--dim);
  font-size: 14px;
  margin: 8px 0;
}

.layer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.layer.has-error { border-color: rgba(255, 107, 107, .5); }

.layer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.layer-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font: 600 16px/1.3 inherit;
  padding: 4px 0;
}

.layer-name:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.modes {
  display: inline-flex;
  background: var(--panel-2);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}

button.mode {
  min-height: 34px;
  padding: 6px 16px;
  font-size: 14px;
  background: transparent;
  color: var(--dim);
  border-radius: 7px;
}

button.mode.on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.hint {
  color: var(--dim);
  font-size: 12.5px;
  margin: 8px 0 12px;
}

.tracks {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 14px;
}

.track.current {
  box-shadow: inset 2px 0 0 var(--ok);
}

.track-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-name.missing { color: var(--danger); }

button.add-track {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--dim);
  font-size: 14px;
  margin-bottom: 14px;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin: 10px 0 0;
}

/* ---------------------------------------------------------------- volume */

.vol { display: flex; align-items: center; gap: 10px; }

input[type=range] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
  height: 44px; /* full touch target — a 28px strip is easy to miss with a thumb */
  touch-action: pan-y; /* let a vertical swipe on the slider still scroll the page */
}

.vol-out, .master output {
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  font-size: 12.5px;
  min-width: 44px;
  text-align: right;
}

button.mute {
  font-size: 13px;
  padding: 8px 12px;
  min-height: 38px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
}

button.mute.on {
  color: var(--accent);
  border-color: var(--accent);
}

button.add-layer {
  width: 100%;
  margin: 16px 0 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  min-height: 50px;
}

.fineprint {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* ---------------------------------------------------------------- transport */

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(14, 14, 18, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

.master {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.master label {
  font-size: 12.5px;
  color: var(--dim);
  min-width: 48px;
}

button.play {
  width: 100%;
  min-height: 54px;
  font-size: 17px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
}

.status {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--dim);
  text-align: center;
}

/* ---------------------------------------------------------------- sheets */

dialog.sheet {
  width: min(520px, 100%);
  max-height: 82vh;
  margin: auto auto 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--panel);
  color: var(--text);
  overflow-y: auto;
}

dialog.sheet::backdrop { background: rgba(0, 0, 0, .6); }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.sheet-head h2 { margin: 0; font-size: 17px; }

.sheet-sub {
  color: var(--dim);
  font-size: 13px;
  margin: 0 0 14px;
}

label.upload {
  display: block;
  text-align: center;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.library, .preset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lib-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border-radius: 10px;
  padding-right: 6px;
}

button.lib-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  text-align: left;
  padding: 11px 12px;
}

button.lib-pick:disabled { opacity: 1; cursor: default; }

.lib-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.lib-size {
  flex: none;
  color: var(--dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.save-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

input[type=text] {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  padding: 11px 12px;
}

input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
}

button.save {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}