/* style.css */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#f7f8fb,#ffffff);
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:2rem;
  color:#111827;
}
.card {
  width:100%;
  max-width:980px;
  background:white;
  border-radius:12px;
  padding:20px;
  box-shadow:0 10px 30px rgba(16,24,40,0.08);
}
h1 { margin-top:0; }
.file-label {
  display:block;
  border:2px dashed #e6e9ef;
  padding:12px;
  border-radius:8px;
  text-align:center;
  cursor:pointer;
  margin-bottom:12px;
}
.file-label input { display:none; }
.hidden { display:none; }
#waveform { width:100%; background:#f8fafc; border-radius:8px; padding:8px; box-sizing:border-box; }
.time-row { display:flex; gap:12px; margin-top:10px; }
.time-row > div { flex:1; }
.time-row label { display:block; font-size:0.85rem; color:#6b7280; margin-bottom:6px;}
input[type="number"] { width:100%; padding:8px; border-radius:6px; border:1px solid #e5e7eb; }
.button-row { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
button { padding:8px 12px; border-radius:8px; border: none; background:#2563eb; color:white; cursor:pointer;}
button[type="button"] { background:#6b7280; }
.submit-row { margin-top:14px; }
.note { color:#6b7280; font-size:0.9rem; margin-top:10px;}
.error { color:#b91c1c; }

.progress-bar-outer {
  width:100%;
  background:#e6eefc;
  border-radius:8px;
  height:18px;
  margin-top:12px;
  overflow:hidden;
}
.progress-bar-inner {
  height:100%;
  width:0%;
  background:#2563eb;
  transition: width 0.6s ease;
}