/* 乐谱跳动 · AI 陪练增强模块样式 v31 */
.fingerHint {
  margin: 6px 0 0;
  font-size: 14px;
  color: #7a5c2e;
  min-height: 18px;
  letter-spacing: .02em;
}
[data-theme="dark"] .fingerHint { color: #d8b96a; }

#keyboard [data-midi] { position: relative; }
.keyFinger {
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: #b3541e; color: #fff;
  font-size: 10px; line-height: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.enhSecHead {
  margin: 18px 0 4px;
  font-weight: 700;
  font-size: 14px;
  color: inherit;
  opacity: .75;
  border-top: 1px solid rgba(127,127,127,.25);
  padding-top: 14px;
}
.enhSec { margin: 4px 0; }
.enhLoopRow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; margin: 6px 0 10px;
}
.enhLoopRow input[type="number"] {
  width: 58px; padding: 4px 6px;
  border: 1px solid rgba(127,127,127,.4); border-radius: 8px;
  background: transparent; color: inherit; font-size: 14px;
}
.enhChk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.chip.on { background: #b3541e; color: #fff; border-color: #b3541e; }
.enhMidiHint { font-size: 13px; opacity: .75; margin: 8px 0 0; }

/* 五维报告 */
.enhReport { max-width: 420px; }
.enhStars { font-size: 26px; color: #e8a13c; text-align: center; margin: 4px 0; }
.enhTotal { text-align: center; margin-bottom: 10px; }
.enhTotal b { font-size: 40px; font-weight: 800; margin-right: 8px; }
.enhTotal span { font-size: 13px; opacity: .7; }
.enhDims { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.enhDimRow { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.enhDimName { width: 52px; flex: none; }
.enhDimRow b { width: 30px; text-align: right; flex: none; }
.enhDimBar { flex: 1; height: 10px; border-radius: 5px; background: rgba(127,127,127,.2); overflow: hidden; }
.enhDimBar i { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.enhDimBar i.good { background: #3d9d63; }
.enhDimBar i.mid { background: #e8a13c; }
.enhDimBar i.low { background: #c04545; }
.enhWrong { font-size: 13px; margin-bottom: 10px; }
.enhWrong span { font-weight: 700; display: block; margin-bottom: 4px; }
.enhWrong p { margin: 2px 0; opacity: .85; }
.enhPerfect { color: #3d9d63; font-weight: 600; }
.enhTrend { margin-bottom: 12px; }
.enhTrend > span { font-size: 12px; opacity: .7; display: block; margin-bottom: 4px; }
.enhTrendBars { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.enhTrendBars i {
  flex: 1; max-width: 26px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #e8a13c, #b3541e);
  min-height: 6%;
}
.enhActions { display: flex; gap: 8px; flex-wrap: wrap; }
.enhActions .action, .enhActions .tool { flex: 1; min-width: 100px; }

@media (max-width: 560px) {
  .enhReport { max-width: none; }
  .enhTotal b { font-size: 34px; }
  .enhStars { font-size: 22px; }
}