/* ============================================================
   阿龙吉他 · 在线练习器（practice.html）独立样式
   依赖 css/style.css 的 CSS 变量与通用组件（按钮、区块）
   ============================================================ */

/* ---------- 工具卡片 ---------- */
.tool-card {
  max-width: 560px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 22px 34px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(34, 29, 23, 0.06);
}

.tool-status {
  font-size: 14px;
  color: var(--ink-soft);
  min-height: 1.5em;
  margin-bottom: 22px;
}

.tool-actions {
  margin-top: 26px;
}

.tool-actions .btn {
  min-width: 168px;
}

.tool-hint {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* 只在桌面于指定位置断行：避免末行只剩一两个字，
   手机端忽略这个断点、按自身宽度自然换行 */
@media (min-width: 900px) {
  .br-desk::before {
    content: "\A";
    white-space: pre;
  }
}

/* 六弦对照（调音器入口卡片）：把标准调弦的音名与频率列清楚，
   同时填满入口卡片下的空白，避免两栏高度差被留白撑出空洞 */
.tuner-ref {
  display: grid;
  gap: 7px;
  width: 100%;
  max-width: 340px;
  margin: 22px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}

.tuner-ref > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tuner-ref dt {
  color: var(--ink-faint);
}

.tuner-ref dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 调音器：读数 ---------- */
.tuner-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
}

.tuner-note {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.tuner-note.is-tuned { color: var(--accent-deep); }

.tuner-freq {
  font-family: var(--font-latin);
  font-size: 15px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* ---------- 调音器：偏差仪表 ---------- */
.tuner-meter {
  max-width: 420px;
  margin-inline: auto;
  padding: 0 6px;
}

.meter-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--line) 0%, var(--line) 42%,
    rgba(154, 107, 63, 0.5) 42%, rgba(154, 107, 63, 0.5) 58%,
    var(--line) 58%, var(--line) 100%
  );
}

.meter-ok {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #4f7c4a;
  opacity: 0;
  transition: opacity .15s;
  z-index: 1;
}

.meter-ok.is-on { opacity: 1; }

.meter-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 26px;
  margin-top: -13px;
  border-radius: 3px;
  background: var(--espresso);
  transform: translateX(-50%);
  transition: left .06s linear;
  z-index: 2;
}

.meter-needle.is-tuned { background: #4f7c4a; }

.meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
}

.meter-labels span:nth-child(2) { color: var(--accent); }

/* ---------- 弦选择 ---------- */
.tuner-strings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.string-chip,
.sig-chip {
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.string-chip:hover,
.sig-chip:hover { border-color: var(--accent); color: var(--ink); }

.string-chip.is-active,
.sig-chip.is-active {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* ---------- 节拍器：显示 ---------- */
.metro-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.metro-bpm {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.metro-bpm-value {
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.metro-bpm-unit {
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
}

.metro-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 26px;
  flex-wrap: wrap;
}

.beat-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: transparent;
  transition: background .08s linear, border-color .08s linear, transform .08s linear;
}

.beat-dot.beat-strong {
  width: 24px;
  height: 24px;
  border-color: var(--accent);
}

.beat-dot.beat-mid { border-color: rgba(154, 107, 63, 0.45); }

.beat-dot.is-on {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.12);
}

.beat-dot.beat-strong.is-on {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.beat-dot.beat-mid.is-on { background: rgba(154, 107, 63, 0.6); }

/* ---------- 节拍器：速度控制 ---------- */
.metro-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin-inline: auto;
}

.metro-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.metro-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

.metro-btn:active { transform: scale(.94); }

.metro-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input[type="range"].metro-range,
.metro-controls input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  /* 轨道本身只有 6px 高，浏览器默认焦点环会贴着它、几乎看不见，
     所以关掉默认环，改由下面的 :focus-visible 用外扩的环 + 高亮滑块表达焦点 */
  outline: none;
  margin: 0;
}

.metro-controls input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(154, 107, 63, 0.28);
}

.metro-controls input[type="range"]:focus-visible::-webkit-slider-thumb {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px rgba(154, 107, 63, 0.32);
}

.metro-controls input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px rgba(154, 107, 63, 0.32);
}

.metro-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(34, 29, 23, 0.2);
  cursor: pointer;
}

.metro-controls input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(34, 29, 23, 0.2);
  cursor: pointer;
}

.metro-controls input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}

/* ---------- 节拍器：拍号 ---------- */
.metro-signature {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---------- 响应式 ---------- */
@media (max-width: 420px) {
  .tuner-note { font-size: 68px; }
  .metro-bpm-value { font-size: 62px; }
  .tool-card { padding: 26px 16px 30px; }
}

/* ============================================================
   和弦练习器（chord practice）样式
   ============================================================ */

.tool-card-wide { max-width: 620px; }

.btn-sm {
  min-height: 40px;
  padding: 6px 18px;
  font-size: 14px;
}

/* ---------- 搜索 ---------- */
.chord-search {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-inline: auto;
}

.chord-search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.chord-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 107, 63, 0.15);
}

.chord-search input::placeholder { color: var(--ink-faint); }

.chord-error {
  margin-top: 10px;
  font-size: 13px;
  color: #a3482e;
}

/* ---------- 常用和弦 ---------- */
.chord-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.q-chip {
  min-height: 34px;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.q-chip:hover { border-color: var(--accent); color: var(--ink); }

.q-chip.is-active {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* ---------- 和弦图 ---------- */
.chord-board {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.chord-board-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.chord-name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.chord-subtitle {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* A1：和弦类型浏览 */
.chord-browse {
  margin-top: 14px;
  text-align: center;
}
.browse-toggle {
  font-size: 13px;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.browse-toggle:hover { border-color: var(--accent); color: var(--ink); }
.browse-toggle.is-open { border-color: var(--accent-deep); color: var(--accent-deep); }
.browse-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream-soft);
}
.browse-panel[hidden] { display: none; }
.browse-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.browse-root-chip {
  font-size: 13px;
  min-width: 40px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.browse-root-chip:hover { border-color: var(--accent); color: var(--ink); }
.browse-root-chip.is-active {
  border-color: var(--accent-deep);
  background: var(--espresso);
  color: var(--cream);
}
.browse-type-row {
  margin-top: 12px;
  align-items: center;
}
.browse-label {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  margin-right: 8px;
}
.browse-select {
  font-size: 14px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--cream);
  max-width: 240px;
}

.chord-pos {
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* 音组成 / 指法信息 / 难度筛选（第 3 步新增） */
.chord-mode-switch {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 12px;
}
.mode-btn {
  font-size: 13px;
  padding: 5px 16px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.mode-btn:first-child { border-radius: 999px 0 0 999px; }
.mode-btn:last-child { border-radius: 0 999px 999px 0; }
.mode-btn + .mode-btn { border-left: none; }
.mode-btn:hover { border-color: var(--accent); color: var(--ink); }
.mode-btn.is-active {
  border-color: var(--accent-deep);
  background: var(--espresso);
  color: var(--cream);
}

/* 普通模式：和弦理论组成音（去重） */
.chord-theory {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chord-theory[hidden] { display: none; }
.theory-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.theory-label {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}
.theory-notes {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.16em;
}
.theory-intervals {
  font-size: 13px;
  color: var(--accent-deep);
  letter-spacing: 0.18em;
}

/* 详细模式：当前指法逐弦音 */
.chord-detail {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-hint {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-align: center;
}
.chord-detail[hidden] { display: none; }

.chord-notes-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
}
.chord-notes {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.14em;
}
.chord-intervals {
  font-size: 12px;
  color: var(--accent-deep);
  letter-spacing: 0.16em;
}
.chord-info {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-align: center;
}
.chord-diff-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chord-inv-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chord-inv-filter[hidden] { display: none; }
.chord-filter-label {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  margin-right: 2px;
}
.inv-chip {
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.inv-chip:hover { border-color: var(--accent); color: var(--ink); }
.inv-chip.is-active {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--cream);
}
.df-chip {
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.df-chip:hover { border-color: var(--accent); color: var(--ink); }
.df-chip.is-active {
  border-color: var(--accent-deep);
  background: var(--espresso);
  color: var(--cream);
}

.chord-diagram {
  max-width: 210px;
  margin: 6px auto 0;
}

.chord-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG 内元素 */
.cd-nut { stroke: var(--ink); stroke-width: 4; }
.cd-nut-marker { stroke: var(--ink); stroke-width: 1.5; }
.cd-string { stroke: var(--ink-soft); stroke-width: 1.4; }
.cd-fret { stroke: var(--ink-faint); stroke-width: 1; }
.cd-marker-x { stroke: var(--accent-deep); stroke-width: 2.2; }
.cd-marker-o { stroke: var(--accent-deep); stroke-width: 2.2; }
.cd-dot { fill: var(--espresso); }
.cd-dot-num {
  fill: var(--cream);
  font-size: 9px;
  font-family: var(--font-body);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.cd-barre { stroke: var(--espresso); stroke-width: 7; stroke-linecap: round; }
.cd-fret-num {
  fill: var(--ink-faint);
  font-size: 9px;
  font-family: var(--font-body);
  text-anchor: middle;
}

.chord-pos-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.pos-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.pos-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.pos-btn:active { transform: scale(.94); }

/* ---------- 和弦进行 ---------- */

/* 页内锚点落点补偿：吸顶页头（桌面 69px / 手机 63px）会压住目标，
   这里留出页头高度 + 一点呼吸空间，避免跳过去后被遮住或看不到刚载入的内容 */
#chordBoard,
#progression,
#chord-practice,
#metronome,
#tuner { scroll-margin-top: 78px; }

.prog-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

.prog-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.prog-transpose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.t-btn {
  min-height: 34px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.t-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.t-btn:active { transform: scale(.96); }

.t-label {
  min-width: 44px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 0.06em;
}

.prog-clear {
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 4px 8px;
  border-radius: 8px;
  transition: color .2s;
}

.prog-clear:hover { color: #a3482e; }

/* B3：常用和弦进行模板 */
.prog-templates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.prog-tpl-label {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
.prog-tpl {
  font-size: 12.5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--cream);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.prog-tpl:hover { border-color: var(--accent); color: var(--ink); }

.prog-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.prog-empty {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-faint);
  text-align: center;
  padding: 14px 0;
}

.prog-empty[hidden] { display: none; }

.prog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}

.prog-item:hover { border-color: rgba(154, 107, 63, 0.55); }

.prog-item.is-selected { border-color: var(--accent); }

.prog-item.is-playing {
  border-color: var(--accent-deep);
  background: rgba(154, 107, 63, 0.1);
  box-shadow: inset 4px 0 0 var(--accent-deep);
}

.prog-item.is-playing .prog-name { color: var(--accent-deep); }

.prog-del {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-faint);
  transition: color .2s, background .2s;
}

.prog-del:hover { color: #a3482e; background: rgba(163, 72, 46, 0.08); }

/* B2：相对级数徽章 */
.prog-degree {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-deep);
  background: rgba(154, 107, 63, 0.12);
  border-radius: 6px;
  padding: 2px 5px;
}
.prog-item.is-playing .prog-degree {
  background: var(--accent-deep);
  color: var(--cream);
}

.prog-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prog-beats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.beat-minus,
.beat-plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-soft);
  transition: border-color .2s, color .2s;
}

.beat-minus:hover,
.beat-plus:hover { border-color: var(--accent); color: var(--accent-deep); }
.beat-minus:active,
.beat-plus:active { transform: scale(.92); }

.beat-num {
  min-width: 26px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.prog-beats-label {
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: 2px;
}

/* 当前和弦大字（播放时） */
.prog-now[hidden],
.chord-board[hidden],
.chord-error[hidden] { display: none; }

.prog-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.1em;
}

.prog-now strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  letter-spacing: 0.04em;
}

/* 和弦练习器响应式 */
@media (max-width: 420px) {
  .prog-head h3 { width: 100%; }
  .prog-transpose { margin-left: 0; }
  .chord-name { font-size: 30px; }
}

/* ============================================================
   五度圈与移调训练（js/circle.js 对应的样式）
   ============================================================ */

.cof-card {
  max-width: 900px;
  text-align: left;
}

.cof-layout {
  display: grid;
  gap: 26px;
}

.cof-wheel svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.cof-wedge,
.cof-minor-wedge {
  cursor: pointer;
  outline: none;
}

.cof-wedge path {
  fill: var(--paper);
  stroke: var(--line);
  transition: fill .2s var(--ease), stroke .2s var(--ease);
}

.cof-wedge:hover path,
.cof-wedge:focus-visible path { fill: var(--card); stroke: var(--accent); }

.cof-wedge.is-near path { fill: rgba(154, 107, 63, 0.12); }

.cof-wedge.is-active path {
  fill: rgba(154, 107, 63, 0.26);
  stroke: var(--accent-deep);
  stroke-width: 1.4;
}

.cof-minor-wedge path {
  fill: var(--card);
  stroke: var(--line);
  transition: fill .2s var(--ease), stroke .2s var(--ease);
}

.cof-minor-wedge:hover path,
.cof-minor-wedge:focus-visible path { fill: var(--paper-deep); stroke: var(--accent); }

.cof-minor-wedge.is-near path { fill: rgba(154, 107, 63, 0.10); }

.cof-minor-wedge.is-active path {
  fill: rgba(154, 107, 63, 0.22);
  stroke: var(--accent-deep);
  stroke-width: 1.2;
}

.cof-key-label {
  font-family: var(--font-display);
  font-size: 15px;
  fill: var(--ink);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.cof-sig-label {
  font-size: 9px;
  fill: var(--ink-faint);
  pointer-events: none;
}

.cof-minor-label {
  font-size: 11px;
  fill: var(--ink-soft);
  pointer-events: none;
}

.cof-center {
  fill: var(--card);
  stroke: var(--line);
}

.cof-center-key {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  fill: var(--ink);
  pointer-events: none;
}

.cof-center-sub {
  font-size: 11px;
  fill: var(--ink-faint);
  pointer-events: none;
}

.cof-detail { min-width: 0; }

.cof-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.cof-detail-key {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cof-detail-meta {
  font-size: 13px;
  color: var(--ink-faint);
}

.cof-detail-near {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.cof-detail-near strong {
  font-family: var(--font-display);
  color: var(--accent-deep);
}

.cof-detail-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-faint);
}

.cof-degrees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.cof-deg-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.cof-deg-chip:hover {
  border-color: var(--accent);
  background: var(--card);
}

.cof-deg-roman {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
}

.cof-deg-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}

.cof-load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.cof-load-label {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-right: 2px;
}

.cof-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.cof-chip:hover { border-color: var(--accent); color: var(--ink); }

.cof-chip.is-active {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

.cof-chip-tag {
  margin-right: 6px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--cream);
  font-size: 10px;
  letter-spacing: 0.08em;
  border-radius: 4px;
}

.cof-status {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--accent-deep);
}

.cof-status a { text-decoration: underline; }

.cof-status[hidden] { display: none; }

/* ---------- 同一个进行，七个调 ---------- */

.keymap-card {
  max-width: 900px;
  margin-top: 26px;
  text-align: left;
}

.keymap-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}

.keymap-lead {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.keymap-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.keymap-degrees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.keymap-deg-label {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-right: 2px;
}

.keymap-deg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.keymap-deg {
  min-width: 42px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.keymap-deg:hover { border-color: var(--accent); background: var(--card); }

.keymap-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.keymap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.keymap-row-key {
  flex: 0 0 auto;
  min-width: 62px;
  font-size: 13px;
  color: var(--accent-deep);
  white-space: nowrap;
}

.keymap-chords {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.keymap-chord {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.keymap-chord:hover { border-color: var(--accent); }

.keymap-roman { font-size: 10.5px; color: var(--ink-faint); }

.keymap-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}

.keymap-sep { font-size: 12px; color: var(--ink-faint); }

.keymap-empty {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-faint);
}

/* 窄屏：调名与按钮一行，和弦名换到下一行排开，不挤压卡片 */
@media (max-width: 620px) {
  .keymap-row { gap: 10px; }
  .keymap-chords { flex: 1 1 100%; order: 3; }
  .keymap-load { margin-left: auto; }
  .keymap-chord { padding: 7px 11px; }
  .keymap-deg { min-width: 44px; padding: 8px 11px; }
}

/* ---------- 移调训练 ---------- */

.cof-train {
  max-width: 900px;
  margin-top: 26px;
  text-align: left;
}

.cof-train-head h3 {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.06em;
}

.cof-train-lead {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.cof-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.cof-chips-scope { margin-top: 10px; }

.cof-chips-label {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.cof-chips[hidden] { display: none; }

.cof-q {
  margin-top: 22px;
  padding: 18px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}

.cof-q-top {
  display: block;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
}

.cof-q-main {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.cof-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.cof-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.cof-opt:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--paper);
}

.cof-opt:active:not(:disabled) { transform: scale(.98); }

.cof-opt:disabled { cursor: default; opacity: .7; }

.cof-opt.is-right {
  border-color: #4f7c4a;
  background: rgba(79, 124, 74, 0.14);
  opacity: 1;
}

.cof-opt.is-wrong {
  border-color: #a3482e;
  background: rgba(163, 72, 46, 0.12);
  opacity: 1;
}

.cof-opt-num {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-faint);
}

.cof-feedback {
  margin-top: 14px;
  font-size: 14.5px;
  text-align: center;
}

.cof-feedback.is-ok { color: #4f7c4a; }
.cof-feedback.is-no { color: #a3482e; }
.cof-feedback[hidden] { display: none; }

.cof-scale {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  text-align: center;
}

.cof-scale[hidden] { display: none; }

.cof-train-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}

.cof-stats {
  font-size: 13px;
  color: var(--ink-soft);
}

.cof-reset {
  margin-left: auto;
  padding: 4px;
  background: none;
  border: none;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}

.cof-reset:hover { color: #a3482e; }

/* 五度圈与移调训练：响应式 */

/* 手机端：三合一区块标题（五度圈 · 七调对照 · 移调训练）较长，
   28px 时会断成两行且断在词中间；下面的说明文字也会剩「应。」孤零零一行。
   窄屏缩小一号保证各自一行；平板/桌面不变 */
@media (max-width: 450px) {
  #circle .section-title { font-size: 22px; }
  #circle .section-lead { font-size: 13px; }
}

@media (min-width: 760px) {
  .cof-layout {
    grid-template-columns: 330px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  /* 桌面端四个选项排成一行，像答题一样一眼扫完 */
  .cof-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .cof-q-main { font-size: 21px; }
  .cof-opt { min-height: 54px; font-size: 18px; }
  .cof-detail-key { font-size: 20px; }
}

/* ---------- 五度圈折叠（默认收起，点按钮展开） ---------- */

.cof-fold {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cof-body { width: 100%; }

.cof-body[hidden] { display: none; }

/* ---------- 节拍器 + 调音器：桌面并排，窄屏堆叠 ---------- */

.tool-pair { display: grid; gap: 34px; }

.tool-pair-col { min-width: 0; }

.tool-pair-col > .section-head { margin-bottom: 22px; }

@media (min-width: 900px) {
  .tool-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
  }

  /* 两栏等高：让短的一侧（调音器入口卡片）跟随行高伸展，
     卡片内部用 flex 分配空档，不额外写死高度。 */
  .tool-pair-col {
    display: flex;
    flex-direction: column;
  }

  .tool-pair-col > .tool-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

/* ---------- 和弦练习器 + 练琴小贴士（桌面并排，窄屏堆叠） ---------- */

.chord-row {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  justify-content: center;
}

.chord-row > .tool-card {
  flex: 0 1 620px;
  margin-inline: 0;
}

.tips-side {
  flex: 0 0 250px;
  padding: 20px 18px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(34, 29, 23, 0.06);
}

.tips-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  text-align: left;
  cursor: pointer;
}

.tips-toggle:hover { color: var(--accent); }

.tips-toggle-caret {
  font-size: 12px;
  transition: transform .2s var(--ease);
}

.tips-toggle.is-open .tips-toggle-caret { transform: rotate(180deg); }

#tipsBody[hidden] { display: none; }

.tips-side ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.tips-side li {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.tips-side strong { color: var(--ink); }

/* 贴士里的行内链接：沿用 style.css 里正文内链的视觉。
   站点默认 a 是「继承颜色 + 无下划线」，贴士区不补这条规则链接会被当成普通文字。 */
.tips-side a {
  color: var(--accent-deep);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(154, 107, 63, 0.45);
  transition: color .2s;
}

.tips-side a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

@media (max-width: 999px) {
  .chord-row {
    flex-direction: column;
    align-items: center;
  }

  .tips-side {
    flex: 0 1 auto;
    width: 100%;
    max-width: 620px;
    padding: 14px 16px 16px;
  }
}


/* ---------- 术语解释（点击/悬停出现小气泡，固定定位，不占页面布局高度） ---------- */
.term {
  border-bottom: 1px dashed rgba(154, 107, 63, 0.75);
  cursor: help;
}
.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.term.is-open { background: rgba(154, 107, 63, 0.12); }
.term-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px; padding: 0;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--accent-deep);
  background: rgba(154, 107, 63, 0.12);
  border: 1px solid rgba(154, 107, 63, 0.45);
  border-radius: 50%;
  vertical-align: middle;
  cursor: help;
}
.term-q:hover, .term-q.is-open { background: var(--accent); color: var(--cream); border-color: var(--accent); }
.term-tip {
  position: fixed;
  left: 0; top: 0;
  z-index: 80;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--espresso);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.65;
  box-shadow: 0 14px 30px -12px rgba(33, 28, 22, 0.5);
}
.term-tip[hidden] { display: none; }
.term-tip .term-tip-guide {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: #e2c9a4;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 页内锚点落点：吸顶页头高 62px + 间距 */
#circle { scroll-margin-top: 78px; }