:root {
  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #8a90a3;
  --accent: #4f5de5;
  --accent-soft: #eef0fd;
  --border: #d9dce6;
  --warn-bg: #fff4e0;
  --warn-border: #e8b64c;
  --ok: #1f9d63;
  --ok-soft: #e8f7ef;
  --bad: #d34a4a;
  --bad-soft: #fdecec;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 110px; /* 给底部播放条留空间 */
}

.hidden { display: none !important; }

.topbar { text-align: center; padding: 22px 12px 6px; }
.topbar h1 { margin: 0; font-size: 1.5rem; letter-spacing: 1px; }
.subtitle { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }

.notice {
  max-width: 720px; margin: 10px auto 0; padding: 10px 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: 8px; font-size: 0.88rem; line-height: 1.6;
}
.notice.hidden { display: none; }

.container { max-width: 720px; margin: 0 auto; padding: 0 12px; }

/* ---------- 顶部控制区：模式切换 + 根音 ---------- */
.controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 8px;
}

.modes {
  display: flex; gap: 6px; flex: 1; min-width: 240px;
  background: #eceef5; padding: 4px; border-radius: 10px;
}
.tab {
  flex: 1; padding: 9px 12px; font-size: 0.95rem; cursor: pointer;
  border: none; border-radius: 8px; background: transparent; color: var(--muted);
  transition: background .15s, color .15s;
}
.tab.active { background: var(--card); color: var(--accent); font-weight: 600; }

.root-picker {
  display: flex; align-items: center; gap: 6px; font-size: 0.9rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
}
.root-picker select {
  border: none; background: transparent; color: var(--text);
  font-size: 0.9rem; padding: 2px 0;
}

.disclaimer {
  margin: 8px 0 0; padding: 8px 12px; font-size: 0.82rem; line-height: 1.6;
  color: #6b5a25; background: #fffaf0; border-left: 3px solid var(--warn-border);
  border-radius: 6px;
}

.audio-hint {
  margin: 8px 0 0; padding: 8px 12px; font-size: 0.82rem;
  color: #55637d; background: #eef2fa; border-radius: 8px;
}
.audio-hint.hidden { display: none; }

/* ---------- 歌词逐字色标（还原原图：蓝=根音/起始音，红=到达音） ---------- */
.legend {
  margin: 8px 0 0; font-size: 0.8rem; color: var(--muted);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.legend-note { margin-left: 6px; font-size: 0.74rem; opacity: .85; }

.lyric-mark { font-weight: 700; }
.lyric-mark.blue { color: #5aafd0; }
.lyric-mark.red { color: #b84040; }
/* 打印 / 弱色彩环境下也能分辨 */
@media print {
  .lyric-mark.blue { text-decoration: underline; }
  .lyric-mark.red { text-decoration: underline dotted; }
}

/* ---------- YouTube（可选真实音源） ---------- */
.yt-area {
  margin: 8px 0; padding: 12px;
  background: var(--card); border-radius: var(--radius);
  text-align: center; border: 1px solid var(--border);
}
.yt-area .hint { display: block; margin-top: 8px; color: var(--muted); font-size: 0.82rem; }
#yt-player { margin-top: 10px; }

/* ---------- 真实歌曲片段：播放条 + 逐句配置 ---------- */
.yt-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center;
}
.yt-title { font-size: 0.92rem; font-weight: 600; }
.btn.small { padding: 6px 10px; font-size: 0.82rem; border-radius: 8px; }
#yt-player { width: 100%; }
#yt-player iframe { display: block; max-width: 100%; }

.yt-links {
  margin-top: 10px; text-align: left; max-height: 280px; overflow: auto;
  border-top: 1px dashed #e6e9f2; padding-top: 8px;
}
.yt-links.hidden { display: none; }
.yt-link {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
  background: #fbfcfe; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.82rem;
}
.yt-link:hover { border-color: #c9cff2; }
.yt-link.ok { background: var(--ok-soft); border-color: #b6e2ca; }
.yt-link-name { font-weight: 600; flex: none; }
.yt-link-song { color: var(--accent); }
.yt-link-state { margin-left: auto; color: var(--muted); font-size: 0.76rem; }

/* 未配置 yt 的歌词行点开后出现的配置面板 */
.yt-panel {
  margin-top: 12px; padding: 12px; text-align: left;
  background: #f8f9ff; border: 1px solid #c9cff2; border-radius: 10px;
}
.yt-panel.hidden { display: none; }
.yt-panel-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.yt-panel-head strong { flex: 1; font-size: 0.95rem; }
.yt-panel-song { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.6; }
.yt-panel-sub { color: var(--muted); font-size: 0.8rem; }
.yt-field {
  display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 8px;
}
.yt-field input {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  font-size: 0.86rem; font-family: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.yt-panel-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.yt-panel-start {
  font-size: 0.82rem; color: #55637d; background: #eef2fa;
  padding: 7px 10px; border-radius: 8px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.yt-panel-note { margin: 0 0 10px; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.yt-panel-note code {
  background: #eceffb; padding: 1px 5px; border-radius: 4px;
  font-size: 0.76rem;
}
#yt-panel-player { width: 100%; }
#yt-panel-player iframe { display: block; max-width: 100%; }
.yt-panel a { color: var(--accent); font-size: 0.84rem; }

/* 把区域内的文字/按钮限制在容器宽度内，避免窄屏横向溢出 */
.yt-area, .yt-panel, .yt-links { max-width: 100%; overflow-wrap: anywhere; }

/* ---------- 播放器 + 实时音程面板：宽屏并排，≤760px 堆叠 ---------- */
/* .container 只有 720px 宽，视频(340 起)+面板(320 起) 并排放不下，
   所以在 ≥1100px 的窗口里让这一块单独放宽到 1048px（居中，两侧仍有余量）；
   1100px 以下只在容器内堆叠，390px 手机上依旧单列。
   注意：.container 本身也要一起放宽，否则 1048px 的子元素会把 720px
   的父容器撑出横向滚动条（原来 max-width 仍是 720px 时实测
   documentElement.scrollWidth=1293 > clientWidth=1185）。 */
@media (min-width: 1100px) {
  .container { max-width: 1080px; }
  .yt-area { width: 1048px; max-width: calc(100vw - 32px); }
}
.yt-rows {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  margin-top: 10px; text-align: left; max-width: 100%;
}
.yt-rows > #yt-player { flex: 1 1 340px; min-width: 0; margin-top: 0; }
.yt-rows > #yt-player iframe { width: 100%; max-width: 100%; }

.an-panel {
  flex: 1 1 320px; min-width: 0;
  padding: 10px 12px; background: #f8f9ff;
  border: 1px solid #c9cff2; border-radius: 10px;
}
.an-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.an-title { font-size: 0.9rem; }
.an-sources {
  margin-left: auto; display: flex; gap: 4px; padding: 3px;
  background: #eceef5; border-radius: 8px;
}
.an-src {
  border: none; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 0.76rem; padding: 4px 9px;
  border-radius: 6px; cursor: pointer;
}
.an-src.active { background: var(--card); color: var(--accent); font-weight: 600; }

.an-status {
  font-size: 0.78rem; color: #55637d; background: #eef2fa;
  padding: 6px 9px; border-radius: 8px; margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.an-readout { margin-bottom: 8px; }
.an-big {
  font-size: 1.6rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.an-line { font-size: 0.82rem; color: #55637d; margin-top: 2px; overflow-wrap: anywhere; }
.an-line.an-interval { font-size: 0.95rem; font-weight: 600; color: var(--accent); }
.an-line.an-song { color: #7a4fd0; }

.an-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.an-chip {
  font-size: 0.76rem; padding: 3px 9px; border-radius: 999px;
  background: #eef0f4; color: var(--muted); white-space: nowrap;
}
.an-chip.hit { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.an-chip.soft { background: #f2f4f9; }

.an-canvas {
  display: block; width: 100%; height: 150px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.an-foot {
  margin: 6px 0 0; font-size: 0.74rem; color: var(--muted);
  line-height: 1.5; overflow-wrap: anywhere;
}
.an-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.an-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 0.8rem;
  color: var(--muted); cursor: pointer;
}

/* ≤760px：播放器与实时音程面板上下堆叠（沿用现有断点风格） */
@media (max-width: 760px) {
  .yt-rows { flex-direction: column; }
  .yt-rows > #yt-player,
  .an-panel { flex: 1 1 auto; width: 100%; }
}

/* ---------- 列表 / 卡片通用 ---------- */
.segments { margin: 8px 0; }
.card-list { list-style: none; margin: 0; padding: 0; }

.card {
  background: var(--card); border: 1.5px solid transparent;
  border-radius: var(--radius); margin-bottom: 8px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(31, 36, 48, .04);
}
.card-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 6px; border-bottom: 1px dashed #e6e9f2; margin-bottom: 6px;
}
.interval-name { font-size: 1.02rem; font-weight: 600; }
.semitones {
  margin-left: auto; font-size: 0.76rem; color: var(--muted);
  background: #f2f4f9; border-radius: 999px; padding: 2px 9px;
}

/* ---------- 记忆模式：可点击的歌词行 ---------- */
.row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--card); border: 1.5px solid transparent;
  border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
.row:last-child { margin-bottom: 0; }
.row:hover { border-color: #c9cff2; }
.row:active { transform: scale(.995); }
.row.active { background: var(--accent-soft); border-color: var(--accent); }

.row .dir {
  flex: none; font-size: 0.74rem; padding: 3px 8px; border-radius: 999px;
}
.row .dir.up { background: #e8f1ff; color: #2b6fd4; }
.row .dir.down { background: #f3ebff; color: #7a4fd0; }
.row.active .dir.up { background: #2b6fd4; color: #fff; }
.row.active .dir.down { background: #7a4fd0; color: #fff; }

.row .song { flex: none; font-size: 0.9rem; color: var(--accent); }
.row .lyric { flex: 1 1 100%; font-size: 1.02rem; line-height: 1.5; }
.row .meta {
  flex: 1 1 100%; color: var(--muted); font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* 「♪ 参考音」：只播钢琴合成的两声，不弹 YouTube 配置面板 */
.row .ref-btn {
  flex: none; margin-left: auto;
  padding: 5px 10px; font-size: 0.78rem; font-family: inherit;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid #d5daf7; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.row .ref-btn:hover { background: #e3e7fd; }
.row .ref-btn:active { transform: scale(.97); }

/* ---------- 测验模式 ---------- */
.quiz-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.quiz-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.84rem; color: var(--muted); margin-bottom: 10px;
}
.quiz-stats b { color: var(--text); font-size: 0.95rem; }
.quiz-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.feedback { margin-top: 10px; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.feedback.ok { color: var(--ok); font-weight: 600; }
.feedback.bad { color: var(--bad); font-weight: 600; }

.quiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px; min-height: 56px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; text-align: left;
  color: var(--text); font-family: inherit;
  transition: border-color .15s, background .15s;
}
.answer:hover { border-color: #c9cff2; }
.answer .ans-name { font-size: 0.95rem; }
.answer .ans-sem { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.answer.correct { background: var(--ok-soft); border-color: var(--ok); }
.answer.wrong { background: var(--bad-soft); border-color: var(--bad); }
.answer.reveal { border-color: var(--ok); border-style: dashed; }

/* ---------- 底部播放条 ---------- */
.playbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--card); border-top: 1px solid #e3e6ef;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; flex-wrap: wrap;
  box-shadow: 0 -2px 10px rgba(31, 36, 48, 0.05);
}

.btn {
  padding: 9px 18px; font-size: 0.95rem; border: none; border-radius: 8px;
  background: #eef0f4; color: var(--text); cursor: pointer;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.chk { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }
.spd { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.spd select {
  padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}

.status {
  margin-left: auto; color: var(--muted); font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}

/* ---------- 移动端单列 ---------- */
@media (max-width: 480px) {
  .status { max-width: 100%; width: 100%; margin-left: 0; order: 10; }
  .playbar { gap: 10px; }
  .topbar h1 { font-size: 1.25rem; }
  .controls { gap: 8px; }
  .modes { min-width: 100%; }
  .root-picker { width: 100%; justify-content: space-between; }
  .quiz-grid { grid-template-columns: 1fr; }
  .row .song { flex: 1 1 100%; }
  /* 窄屏：参考音按钮单独占一行，避免把歌词挤到溢出 */
  .row .ref-btn { margin-left: 0; flex: 1 1 100%; text-align: center; }
  .yt-bar { justify-content: stretch; }
  .yt-bar .yt-title { flex: 1 1 100%; text-align: center; }
  .yt-bar .btn.small { flex: 1 1 auto; }
  .yt-link-state { margin-left: 0; flex: 1 1 100%; }
  /* 实时音程面板：音源选择与读数字号收一点，避免窄屏挤爆 */
  .an-head { gap: 6px; }
  .an-title { flex: 1 1 100%; }
  .an-sources { margin-left: 0; width: 100%; }
  .an-src { flex: 1 1 auto; text-align: center; }
  .an-big { font-size: 1.4rem; }
  .an-canvas { height: 130px; }
  .an-chip { font-size: 0.72rem; }
}