/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:Arial, Helvetica, sans-serif; line-height:1.5; background:#f9fafb; color:#333; padding:1rem;}
header, footer {text-align:center; margin-bottom:1.5rem;}
h1 {font-size:2rem; color:#2c3e50;}
section {margin-bottom:2rem;}
.input-section form {display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center;}
.input-section input {padding:0.5rem; font-size:1rem; border:1px solid #ccc; border-radius:4px;}
.input-section button {padding:0.5rem 1rem; font-size:1rem; background:#2980b9; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.input-section button:hover {background:#1c5980;}
.song-list {list-style:none; max-width:600px; margin:auto;}
.song-list li {background:#fff; padding:0.75rem 1rem; margin-bottom:0.5rem; border:1px solid #ddd; border-radius:4px; display:flex; justify-content:space-between; align-items:center; cursor:grab;}
.song-list li .info {flex-grow:1;}
.song-list li button {background:#e74c3c; color:#fff; border:none; border-radius:4px; padding:0.25rem 0.5rem; cursor:pointer;}
.song-list li button:hover {background:#c0392b;}
.total-time {font-weight:bold; text-align:center; margin-top:0.5rem;}
.timeline {display:flex; height:30px; margin:auto; max-width:600px; border:1px solid #ccc; border-radius:4px; overflow:hidden;}
.timeline .segment {height:100%; background:#27ae60; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.75rem; overflow:hidden; white-space:nowrap;}
@media (max-width:600px) {
  .input-section form {flex-direction:column; align-items:stretch;}
}