/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  min-height: 100vh;
  font-family: 'Segoe UI', Rounded, sans-serif;
  background: linear-gradient(135deg, #1a1aff 0%, #c04cff 40%, #ff4ca1 70%, #ff9de2 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

/* ── App card ── */
#app {
  background: rgba(255,255,255,0.93);
  border-radius: 28px; padding: 40px 36px 36px;
  max-width: 560px; width: 100%;
  box-shadow: 0 12px 48px rgba(80,0,180,0.25), 0 2px 8px rgba(0,0,0,0.10);
  text-align: center;
}

/* ── Header ── */
header { margin-bottom: 28px; }
header h1 {
  font-size: 3.2rem; font-weight: 900;
  background: linear-gradient(90deg, #2255ff, #d400b8, #ff3399);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: -1px; margin-bottom: 4px; line-height: 1;
}
#subtitle { color: #7a4fa3; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.3px; }

/* ── Mood selector ── */
#mood-selector { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.mood-label { font-size: 0.78rem; font-weight: 700; color: #9933cc; text-transform: uppercase; letter-spacing: 0.8px; width: 100%; }
.mood-btn { border: 2px solid transparent; border-radius: 50px; padding: 8px 16px; font-size: 0.88rem; font-weight: 700; cursor: pointer; background: #f3e8ff; color: #5a2080; transition: transform 0.12s, background 0.15s; }
.mood-btn:hover { background: #e9d5ff; transform: translateY(-1px); }
.mood-btn.active { background: linear-gradient(135deg, #c04cff, #ff3399); color: #fff; box-shadow: 0 4px 14px rgba(192,76,255,0.45); }

/* ── Controls ── */
#controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 24px; }
button { border: none; border-radius: 50px; padding: 12px 22px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s; letter-spacing: 0.2px; }
button:active:not(:disabled) { transform: scale(0.95); }
button:disabled { opacity: 0.38; cursor: not-allowed; }
#btn-record { background: linear-gradient(135deg, #ff3399, #d400b8); color: #fff; box-shadow: 0 4px 14px rgba(255,51,153,0.40); }
#btn-record:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(255,51,153,0.55); }
#btn-record.recording { animation: pulse-record 0.8s ease-in-out infinite alternate; }
@keyframes pulse-record {
  from { box-shadow: 0 4px 14px rgba(255,51,153,0.40); }
  to   { box-shadow: 0 6px 28px rgba(255,51,153,0.80), 0 0 0 6px rgba(255,51,153,0.15); }
}
#btn-make  { background: linear-gradient(135deg, #ff9de2, #c04cff); color: #fff; box-shadow: 0 4px 14px rgba(192,76,255,0.35); }
#btn-make:hover:not(:disabled)  { box-shadow: 0 6px 20px rgba(192,76,255,0.55); }
#btn-retry { background: linear-gradient(135deg, #ffe066, #ffb347); color: #7a4000; box-shadow: 0 4px 14px rgba(255,179,71,0.35); }
#btn-retry:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(255,179,71,0.55); }

/* ── Status ── */
#status-area { background: linear-gradient(90deg, #eef0ff, #ffe6f6); border-radius: 14px; padding: 13px 18px; margin-bottom: 20px; }
#status { color: #3a2060; font-size: 0.98rem; }

/* ── Notes area ── */
#notes-area { background: linear-gradient(135deg, #f0e6ff, #ffe6f6, #e6f0ff); border-radius: 18px; padding: 18px 20px; margin-bottom: 18px; border: 2px solid #d4aaff; }
#notes-area h2 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #9933cc; margin-bottom: 10px; }
#detected-notes { font-size: 1.35rem; font-weight: 800; color: #2255ff; letter-spacing: 2px; word-break: break-word; line-height: 1.8; }
#detected-notes span { display: inline-block; background: linear-gradient(135deg, #2255ff, #d400b8); color: #fff; border-radius: 50px; padding: 3px 13px; margin: 3px; font-size: 1rem; font-weight: 700; box-shadow: 0 2px 8px rgba(100,0,200,0.25); }
#melody-stats { margin-top: 8px; font-size: 0.82rem; color: #5a2080; font-weight: 600; }

/* ── Chord display ── */
#chord-display { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); border-radius: 18px; padding: 16px 18px; margin-bottom: 18px; }
#chord-display h2 { font-size: 0.80rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a78bfa; margin-bottom: 12px; text-align: center; }
#chord-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.chord-pill { border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; min-width: 54px; cursor: default; transition: transform 0.12s; }
.chord-pill:hover { transform: scale(1.07); }
.chord-pill strong { font-size: 1.15rem; font-weight: 900; line-height: 1; }
.chord-pill span   { font-size: 0.68rem; font-weight: 600; margin-top: 2px; text-transform: uppercase; }
.chord-pill em     { font-size: 0.64rem; font-weight: 700; margin-top: 3px; font-style: normal; opacity: 0.85; }
.chord-pill.maj { background: linear-gradient(135deg, #2255ff, #4f7cff); color: #fff; }
.chord-pill.min { background: linear-gradient(135deg, #7c3aed, #c04cff); color: #fff; }
.chord-pill.dim { background: linear-gradient(135deg, #dc2626, #f97316); color: #fff; }
.chord-pill.aug { background: linear-gradient(135deg, #059669, #34d399); color: #fff; }
#chord-analysis { font-size: 0.82rem; color: #c4b5fd; font-weight: 600; text-align: center; line-height: 1.7; }

/* ── Variation cards ── */
#variations-area { margin-bottom: 18px; }
#variations-area h2 { font-size: 1.05rem; font-weight: 800; color: #5a2080; margin-bottom: 16px; }
#variation-cards { display: flex; flex-direction: column; gap: 16px; }
.var-card { background: linear-gradient(135deg, #f0e6ff, #ffe6f6); border-radius: 20px; padding: 18px 20px; border: 2px solid #d4aaff; text-align: left; }
.var-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.var-num { background: linear-gradient(135deg, #c04cff, #ff3399); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; font-weight: 900; flex-shrink: 0; }
.var-label { font-size: 0.95rem; font-weight: 800; color: #3a1060; flex: 1; }
.var-meta  { font-size: 0.80rem; color: #9333ea; font-weight: 600; }
.var-opening { font-size: 0.80rem; color: #5a2080; font-weight: 600; background: rgba(255,255,255,0.60); border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; line-height: 1.5; }
.var-opening strong { color: #c04cff; }
.var-chords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chord-tag { border-radius: 30px; padding: 3px 10px; font-size: 0.76rem; font-weight: 700; }
.chord-tag.maj { background: #2255ff18; color: #2255ff; border: 1px solid #2255ff44; }
.chord-tag.min { background: #7c3aed18; color: #7c3aed; border: 1px solid #7c3aed44; }
.chord-tag.dim { background: #dc262618; color: #dc2626; border: 1px solid #dc262644; }
.chord-tag.aug { background: #05966918; color: #059669; border: 1px solid #05966944; }
.var-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.var-btn { border: none; border-radius: 50px; padding: 9px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: transform 0.12s; white-space: nowrap; }
.var-btn:hover { transform: scale(1.04); }
.play-btn  { background: linear-gradient(135deg, #00d4ff, #2255ff); color: #fff; box-shadow: 0 3px 10px rgba(0,212,255,0.30); }
.save-btn  { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a4a30; }
.wav-btn   { background: linear-gradient(135deg, #ff9de2, #c04cff); color: #fff; }
.midi-btn  { background: linear-gradient(135deg, #ffe066, #ffb347); color: #7a4000; }
.share-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.var-progress { flex: 1; min-width: 80px; accent-color: #c04cff; cursor: pointer; height: 5px; }
.var-time { font-size: 0.80rem; color: #7a4fa3; font-weight: 700; white-space: nowrap; min-width: 80px; text-align: right; }

/* ── Playlist ── */
#playlist-section { margin-top: 24px; text-align: left; }
#playlist-section h2 { font-size: 1.05rem; font-weight: 800; color: #5a2080; margin-bottom: 12px; text-align: center; }
#playlist-list { display: flex; flex-direction: column; gap: 10px; }
.playlist-row { display: flex; align-items: center; gap: 6px; background: linear-gradient(90deg, #f0e6ff, #ffe6f6); border-radius: 14px; padding: 10px 14px; border: 1px solid #d4aaff; }
.playlist-label { flex: 1; font-size: 0.82rem; font-weight: 600; color: #3a1060; word-break: break-word; }
.pl-btn { border: none; border-radius: 50px; padding: 8px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: transform 0.12s; white-space: nowrap; }
.pl-play  { background: linear-gradient(135deg, #00d4ff, #2255ff); color: #fff; }
.pl-wav   { background: linear-gradient(135deg, #ff9de2, #c04cff); color: #fff; }
.pl-share { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.pl-btn:hover { transform: scale(1.05); }

/* ── Name dialog overlay ── */
#name-overlay {
  position: fixed; inset: 0;
  background: rgba(30,0,60,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 999; backdrop-filter: blur(4px);
}
#name-overlay[hidden] { display: none; }
#name-dialog {
  background: #fff; border-radius: 22px;
  padding: 32px 28px; max-width: 340px; width: 90%;
  box-shadow: 0 8px 32px rgba(80,0,180,0.30);
  text-align: center;
}
#name-dialog p { font-size: 1.1rem; font-weight: 800; color: #3a1060; margin-bottom: 16px; }
#name-input {
  width: 100%; border: 2px solid #d4aaff; border-radius: 12px;
  padding: 10px 14px; font-size: 1rem; font-weight: 600; color: #3a1060;
  outline: none; margin-bottom: 16px;
}
#name-input:focus { border-color: #c04cff; }
#name-btns { display: flex; gap: 10px; justify-content: center; }
#name-cancel { background: #f3e8ff; color: #5a2080; padding: 10px 20px; }
#name-save   { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a4a30; padding: 10px 20px; }

/* ── Responsive ── */
@media(max-width: 560px) {
  #app { padding: 24px 16px 20px; }
  header h1 { font-size: 2.4rem; }
  .var-controls { flex-direction: column; align-items: stretch; }
  .var-time { text-align: left; }
  .playlist-row { flex-wrap: wrap; }
}

/* ── Share modal ── */
#share-modal {
  position: fixed; inset: 0;
  background: rgba(30,0,60,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(4px);
}
#share-dialog {
  background: #fff; border-radius: 22px;
  padding: 32px 28px; max-width: 400px; width: 92%;
  box-shadow: 0 8px 32px rgba(80,0,180,0.30);
  text-align: center;
}
#share-dialog p { font-size: 1.1rem; font-weight: 800; color: #3a1060; margin-bottom: 14px; }
#share-url-input {
  width: 100%; border: 2px solid #d4aaff; border-radius: 12px;
  padding: 10px 12px; font-size: 0.82rem; font-weight: 600; color: #3a1060;
  outline: none; margin-bottom: 10px; word-break: break-all;
  background: #f3e8ff; cursor: text;
}
#share-url-input:focus { border-color: #c04cff; }
#share-msg { font-size: 0.88rem; color: #7a4fa3; font-weight: 600; margin-bottom: 16px; }
#share-action-btns { display: flex; gap: 10px; justify-content: center; }
#share-copy-btn { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; padding: 10px 20px; }
#share-close-btn { background: #f3e8ff; color: #5a2080; padding: 10px 20px; }