* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0b0b0f;
  color: #f2f2f2;
  margin: 0;
  padding: 0 16px 60px;
}
header {
  padding: 24px 0 8px;
  text-align: center;
}
header h1 { margin: 0; font-size: 1.8rem; }
.tagline { color: #999; margin-top: 4px; }

.step { display: none; max-width: 720px; margin: 0 auto; }
.step.active { display: block; }

h2 { border-bottom: 1px solid #2a2a33; padding-bottom: 8px; }

form, .controls { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: #ccc; }
input, textarea, select, button {
  font-size: 1rem;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #1a1a22;
  color: #fff;
}
button {
  background: #ff5c39;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-top: 10px;
}
button:hover { background: #ff7a5c; }

audio { width: 100%; margin: 12px 0; }

.row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }

#lyricList { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; max-height: 40vh; overflow-y: auto; }
.lyric-row { display: flex; align-items: center; gap: 10px; background: #15151b; padding: 8px 10px; border-radius: 8px; }
.lyric-row .text { flex: 1; }
.lyric-row .time { width: 70px; font-variant-numeric: tabular-nums; color: #8fd6a8; font-size: 0.85rem; }
.lyric-row button { margin: 0; padding: 6px 10px; font-size: 0.85rem; }
.hint { color: #999; font-size: 0.85rem; }

.style-grid { display: flex; flex-direction: column; gap: 20px; }
.preview-wrap { display: flex; justify-content: center; }
#previewCanvas { width: 100%; max-width: 480px; aspect-ratio: 16/9; border-radius: 10px; background: #000; }

#progressWrap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
progress { flex: 1; height: 20px; }

#downloadLink {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 14px;
  background: #2ecc71;
  color: #06210f;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

#autosyncStatus { font-size: 0.85rem; color: #999; }