#app-body { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 1.25rem; }

h1 { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }


.file-bar {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border-radius: .5rem; background: color-mix(in srgb, var(--fg) 6%, transparent); font-size: .875rem;
}
.file-bar .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-bar .dur   { opacity: .5; font-variant-numeric: tabular-nums; font-size: .8rem; }

.info-row { display: flex; align-items: center; gap: .5rem; opacity: .6; font-size: .875rem; }
.err-row  { display: flex; align-items: center; gap: .5rem; color: #f66; font-size: .875rem; }

/* ── waveform ── */
.waveform-wrap {
  position: relative; height: 96px; border-radius: .5rem;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  margin-bottom: 1.75rem; /* room for handle labels */
}
.waveform-canvas { width: 100%; height: 100%; display: block; border-radius: .5rem; }

/* handles */
.handle {
  position: absolute; top: 0; height: 100%; width: 16px;
  transform: translateX(-50%); cursor: ew-resize; z-index: 2;
}
.handle::before {                    /* vertical line */
  content: ''; position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%; background: var(--accent);
}
.handle::after {                     /* grip knob */
  content: ''; position: absolute;
  left: 50%; transform: translate(-50%, -50%); top: 50%;
  width: 10px; height: 18px;
  background: var(--accent); border-radius: 3px;
}
.handle-label {
  position: absolute; top: calc(100% + 6px);
  background: var(--accent); color: var(--bg);
  font-size: .7rem; font-variant-numeric: tabular-nums;
  padding: .1rem .35rem; border-radius: .25rem;
  white-space: nowrap; pointer-events: none;
}
.handle-s .handle-label { left: 0; }
.handle-e .handle-label { right: 0; left: auto; }

/* ── time row ── */
.time-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.time-field { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.time-field label { opacity: .55; min-width: 2.5rem; }
.time-field input {
  width: 4.5rem; padding: .3rem .45rem; border-radius: .35rem;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.time-field input:focus { outline: none; border-color: var(--accent); }
.time-fmt { opacity: .45; font-size: .78rem; font-variant-numeric: tabular-nums; }

.sel-dur {
  flex: 1; text-align: center; font-size: .85rem; opacity: .6;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  font-variant-numeric: tabular-nums;
}

/* ── actions ── */
.actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: .5rem; border: none;
  cursor: pointer; font-size: .9rem; font-weight: 500;
  transition: opacity .15s; text-decoration: none;
}
.btn:hover        { opacity: .85; }
.btn:disabled     { opacity: .4; cursor: not-allowed; }
.btn.icon-only    { padding: .5rem .65rem; }
.btn.primary      { background: var(--accent); color: var(--bg); }
.btn.secondary    { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }

.icon-btn {
  background: transparent; border: none; color: var(--fg); cursor: pointer;
  padding: .2rem; border-radius: .3rem; display: flex; align-items: center;
  opacity: .5; transition: opacity .15s, color .15s;
}
.icon-btn:hover        { opacity: 1; }
.icon-btn.remove:hover { color: #f66; }