* { box-sizing: border-box }

body {
  margin: 0;
  font: 16px/1.5 system-ui, sans-serif;
  color: #222;
  background: #f5f5f5;
}

.wrap {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

h1 { margin: 0 0 8px }
h2 { margin: 0 0 4px }
p { margin: 0 }

a { color: #666 }
a:hover { color: #222 }

/* 面板 */
.box {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.form {
  grid-template-columns: minmax(96px, 120px) minmax(96px, 120px) minmax(0, 1fr) minmax(88px, auto);
  align-items: center;
}
.single {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.single > div { min-width: 0 }
.batch {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(108px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

/* 曲目列表 */
.tracks { display: grid; gap: 8px; margin-top: 16px }
.track {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(64px, auto);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.track div { min-width: 0 }
.track strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track p { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* 通用元素 */
img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #eee;
}
audio { width: 100%; margin: 12px 0 }
input, select, button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: inherit;
}
button { background: #222; color: #fff; cursor: pointer }
button:disabled { opacity: .5 }
[hidden] { display: none !important }

/* 消息 */
#message { margin-top: 12px; color: #666 }
#message.ok { color: #0a7a43 }
#message.err { color: #c0392b }
.api-status {
  margin-top: 4px;
  color: #666;
  font-size: 14px;
}
.api-status.ok { color: #0a7a43 }
.api-status.err { color: #c0392b }
.api-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
#progress { color: #666 }
#singleTitle,
#playlistTitle {
  overflow-wrap: anywhere;
}
#singleMeta,
#singleExtra,
#playlistMeta,
#playlistExtra {
  color: #666;
  overflow-wrap: anywhere;
}

/* 移动端 */
@media (max-width: 760px) {
  .form { grid-template-columns: 1fr }
  .single { grid-template-columns: 1fr }
  .batch { grid-template-columns: 1fr }
  .api-panel { grid-template-columns: 1fr }
  img {
    max-width: 240px;
    justify-self: center;
  }
  .track {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .track button {
    grid-column: 2;
    width: max-content;
    max-width: 100%;
  }
}