/* 听音训练：手机优先。输入盘在拇指区，操作栏贴底，适配刘海 / 横屏 / 键盘 */
:root {
  --bg: #0a0f17; --bg2: #101826; --panel: #151f30; --panel2: #1b2740; --line: #26354f;
  --text: #e9eff8; --muted: #8b9cb4; --gold: #e8c468; --good: #4ade80; --bad: #fb7185;
  --scale: #1d3a66; --scale2: #2a5290; --chrom: #2a2641; --chrom2: #3c3560; --off: #121a28;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overscroll-behavior: none; }
body { font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

#app {
  height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 3px auto minmax(0, 1fr) auto;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); background: radial-gradient(120% 70% at 50% -10%, #17233a 0%, var(--bg) 60%);
}

/* 顶栏 */
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; min-width: 0; }
.grow { flex: 1 1 0; min-width: 0; }
.chip { min-width: 0; flex: 0 1 auto; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip::after { content: "▾"; color: var(--muted); font-size: 12px; }
.chip small { color: var(--muted); font-weight: 500; }
.icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.icon:active { background: var(--panel2); }
.me-entry { gap: 0; align-content: center; color: var(--gold); }
.me-entry svg { width: 18px; height: 18px; }
.me-entry span { font-size: 10px; line-height: 14px; font-weight: 600; }

.progress { background: #0d1522; margin: 0 12px; border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--scale2), var(--gold)); transition: width .3s ease; }

/* 状态区 */
#stage { padding: 12px 16px 6px; text-align: center; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.counter { font-size: 13px; color: var(--muted); min-height: 18px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.prompt { font-size: 30px; font-weight: 800; line-height: 1.15; min-height: 38px; letter-spacing: .01em; }
.prompt.good { color: var(--good); } .prompt.bad { color: var(--bad); } .prompt.gold { color: var(--gold); }
.prompt.big { font-size: 46px; }
.sub { font-size: 14px; color: var(--muted); min-height: 20px; max-width: 92%; }
.sub b { color: var(--text); font-weight: 700; }
.melody { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.melody .slot { min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; background: var(--panel); border: 1.5px dashed var(--line); display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.melody .slot.fill { border-style: solid; border-color: var(--scale2); background: var(--scale); }
.melody .slot.bad { border-color: var(--bad); background: #4a1d2b; }
.melody .slot.good { border-color: var(--good); background: #14402a; }
.melody .slot.cur { border-color: var(--gold); border-style: solid; }

/* 输入盘 */
#padHost { min-height: 0; display: grid; place-items: center; padding: 4px 12px 8px; }
#pad { position: relative; width: var(--s, 320px); height: var(--s, 320px); }
#pad.grid { width: 100%; max-width: 480px; height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: center; }
#pad.grid.cols2 { grid-template-columns: repeat(2, 1fr); }
#pad.grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.cell { position: absolute; width: 17.2%; aspect-ratio: 1; margin: -8.6% 0 0 -8.6%; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--chrom); border: 1.5px solid var(--chrom2); color: #cfc8ee; font-weight: 800; font-size: clamp(16px, 5.6vw, 24px); line-height: 1; transition: transform .08s, background .15s, border-color .15s, opacity .15s; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.cell small { display: block; font-size: .5em; font-weight: 600; opacity: .7; margin-top: 2px; letter-spacing: .02em; }
.cell.scale { background: var(--scale); border-color: var(--scale2); color: #e3eeff; }
.cell.tonic { border-color: var(--gold); color: var(--gold); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 2px rgba(232,196,104,.25); }
.cell.off { opacity: .22; background: var(--off); border-color: var(--line); box-shadow: none; pointer-events: none; }
.cell.void { visibility: hidden; pointer-events: none; }
.cell:active:not(.off) { transform: scale(.92); }
.cell.play { background: var(--scale2); border-color: #8ab4ff; transform: scale(1.08); }
.cell.good { background: #14532d; border-color: var(--good); color: #eafff2; animation: pop .35s ease; }
.cell.bad { background: #5b1b2b; border-color: var(--bad); color: #ffe9ee; animation: shake .35s ease; }
.cell.reveal { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,196,104,.45); animation: pop .4s ease; }
.cell.passive { pointer-events: none; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1.04); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.center { position: absolute; left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.center b { display: block; font-size: clamp(26px, 9vw, 40px); font-weight: 800; letter-spacing: .01em; }
.center span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ringline { position: absolute; inset: 8.6%; border-radius: 50%; border: 1px dashed #1c2a42; pointer-events: none; }

.gcell { min-height: 64px; border-radius: 16px; background: var(--chrom); border: 1.5px solid var(--chrom2); font-weight: 800; font-size: 20px; display: grid; place-items: center; align-content: center; padding: 6px; box-shadow: 0 3px 0 rgba(0,0,0,.35); line-height: 1.1; transition: transform .08s, background .15s; }
.gcell small { font-size: 12px; font-weight: 600; opacity: .7; }
.gcell.scale { background: var(--scale); border-color: var(--scale2); color: #e3eeff; }
.gcell.tonic { border-color: var(--gold); color: var(--gold); }
.gcell.off { opacity: .22; pointer-events: none; box-shadow: none; }
.gcell:active:not(.off) { transform: scale(.95); }
.gcell.good { background: #14532d; border-color: var(--good); } .gcell.bad { background: #5b1b2b; border-color: var(--bad); animation: shake .35s ease; }
.gcell.reveal { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,196,104,.45); }
.gcell.play { background: var(--scale2); border-color: #8ab4ff; }
.gcell.passive { pointer-events: none; }
.gcell.cmid { min-height: 78px; font-size: 22px; }

/* 底部操作栏 */
.actions { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 14px calc(10px + var(--safe-b)); background: linear-gradient(0deg, rgba(10,15,23,.96) 60%, transparent); }
.act { min-width: 64px; min-height: 56px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--muted); padding: 4px 10px; }
.act:active { background: var(--panel2); }
.act[disabled] { opacity: .35; pointer-events: none; }
.act.on { color: var(--gold); border-color: rgba(232,196,104,.5); }
.go { flex: 1; max-width: 220px; min-height: 60px; border-radius: 30px; background: linear-gradient(180deg, #f1d27e, #d9a93d); color: #3a2a06; font-size: 19px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(217,169,61,.28); }
.go svg { fill: currentColor; stroke: none; width: 26px; height: 26px; }
.go:active { transform: scale(.97); }
.go.stop { background: linear-gradient(180deg, #3a4660, #2a3550); color: var(--text); box-shadow: none; border: 1px solid var(--line); }

/* 底部弹层 */
#scrim { position: fixed; inset: 0; background: rgba(2,6,12,.62); z-index: 20; animation: fade .2s ease; }
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-width: 560px; margin: 0 auto; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; animation: rise .22s ease; padding-bottom: var(--safe-b); }
.grab { width: 38px; height: 4px; border-radius: 2px; background: #33455f; margin: 8px auto 2px; flex: none; }
#sheetBody { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 18px; }
@keyframes rise { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sh-title { font-size: 20px; font-weight: 800; margin: 8px 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-title button { font-size: 15px; font-weight: 600; color: var(--gold); min-height: 44px; padding: 0 6px; }
.sect { margin: 18px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid #1a2639; }
.row:last-child { border-bottom: 0; }
.row .lab { flex: 1; min-width: 0; } .row .lab b { display: block; font-weight: 600; } .row .lab small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 1px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.seg button.on { background: var(--scale2); color: #fff; }
.tog { width: 54px; height: 32px; border-radius: 16px; background: #2a374e; position: relative; flex: none; transition: background .2s; }
.tog::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tog.on { background: #2f8f55; } .tog.on::after { transform: translateX(22px); }
input[type=range] { width: 150px; accent-color: var(--gold); height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { min-height: 44px; min-width: 52px; padding: 0 12px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); font-weight: 700; font-size: 16px; }
.pick.on { background: var(--scale); border-color: var(--scale2); color: #fff; }
.pick.chromatic.on { background: var(--chrom2); border-color: #6b5fa8; }
.pick small { color: var(--muted); font-weight: 500; margin-left: 4px; font-size: 12px; }
.modes { display: grid; gap: 8px; }
.mode { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); min-height: 64px; }
.mode.on { border-color: var(--gold); background: #1b2536; }
.mode .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--scale); display: grid; place-items: center; font-size: 22px; }
.mode b { display: block; font-size: 16.5px; } .mode small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.btn { min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); font-weight: 700; font-size: 15.5px; }
.btn.gold { background: linear-gradient(180deg, #f1d27e, #d9a93d); color: #3a2a06; border: 0; }
.btn.danger { color: var(--bad); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .btns .btn { flex: 1; min-width: 130px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; } .kpi b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } .kpi span { font-size: 12px; color: var(--muted); }
.mini { position: relative; width: min(100%, 250px); aspect-ratio: 1; margin: 6px auto 4px; }
.mini .cell { font-size: 13px; box-shadow: none; pointer-events: none; }
.legend { display: flex; justify-content: center; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 6px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.rep { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #1a2639; }
.rep .k { font-weight: 800; font-size: 18px; text-align: center; }
.rep .k small { display: block; font-weight: 500; font-size: 10px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.rep .meter { height: 8px; border-radius: 4px; background: #0d1522; overflow: hidden; } .rep .meter i { display: block; height: 100%; border-radius: 4px; }
.rep .m { font-size: 12px; color: var(--muted); margin-top: 3px; } .rep .v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.help { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); max-width: 86vw; background: #0b1220; border: 1px solid var(--line); padding: 10px 16px; border-radius: 14px; font-size: 14px; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.45); text-align: center; }

/* 小屏：缩一点，保证输入盘和操作栏都在一屏内 */
@media (max-height: 700px) { #stage { min-height: 92px; padding-top: 6px; } .prompt { font-size: 26px; min-height: 32px; } .prompt.big { font-size: 38px; } .go { min-height: 54px; } .act { min-height: 52px; } }
@media (max-width: 350px) { .chip { padding: 0 10px; font-size: 14px; } .act { min-width: 56px; padding: 4px 6px; } .actions { gap: 8px; } }

/* 横屏手机：左边状态和操作，右边输入盘 */
@media (orientation: landscape) and (max-height: 520px) {
  #app { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 3px minmax(0, 1fr) auto; grid-template-areas: "bar pad" "prog pad" "stage pad" "act pad"; padding-left: calc(var(--safe-l) + 4px); padding-right: calc(var(--safe-r) + 4px); }
  .bar { grid-area: bar; } .progress { grid-area: prog; } #stage { grid-area: stage; min-height: 0; padding-top: 4px; } #padHost { grid-area: pad; padding: 6px 6px 6px 0; } .actions { grid-area: act; padding-bottom: calc(6px + var(--safe-b)); background: none; }
  .prompt { font-size: 24px; min-height: 28px; } .prompt.big { font-size: 34px; } .go { min-height: 48px; font-size: 17px; } .act { min-height: 46px; min-width: 52px; } .act span { display: none; }
  #sheet { max-height: 94vh; }
}
/* 电脑：居中、略放大 */
@media (min-width: 900px) and (min-height: 700px) { #app { max-width: 620px; } .prompt { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 练习中心：今日 / 闯关 / 复习 / 自由 */
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px; margin-bottom: 10px; }
.tabs button { flex: 1; min-height: 42px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: 15px; }
.tabs button.on { background: var(--scale2); color: #fff; }
.goal { display: flex; align-items: center; gap: 16px; padding: 10px 4px 6px; }
.ringbox { position: relative; width: 90px; height: 90px; flex: none; }
.ringbox svg { width: 90px; height: 90px; stroke: none; }
.ringbox b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.gtxt b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } .gtxt span { display: block; font-size: 13px; color: var(--muted); }
.task { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px; margin-bottom: 8px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); }
.task.done { opacity: .72; }
.task .tk { width: 40px; height: 40px; border-radius: 12px; background: var(--scale); display: grid; place-items: center; font-size: 19px; }
.task.done .tk { background: #14532d; color: var(--good); font-weight: 800; }
.task .tt b { display: block; font-size: 15.5px; line-height: 1.3; } .task .tt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.task .btn { min-height: 44px; padding: 0 14px; }
.world { margin: 18px 0 8px; } .world b { display: block; font-size: 16px; } .world small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.lvgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.lv { width: 56px; height: 62px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.lv b { font-size: 19px; font-weight: 800; } .lv small { font-size: 11px; letter-spacing: -.5px; color: var(--gold); min-height: 14px; }
.lv.done { background: var(--scale); border-color: var(--scale2); }
.lv.now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,196,104,.25); }
.lv.lock { opacity: .45; }
.lv.sel { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.lvinfo { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); display: grid; gap: 6px; }
.lvinfo b { font-size: 16px; } .lvinfo .btn { justify-self: start; margin-top: 4px; }
.lvgrid.lv-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lv-cards .lv { position: relative; width: 100%; height: auto; min-height: 128px; padding: 16px 16px 18px; align-items: stretch; text-align: left; gap: 12px; overflow: hidden; }
.lv-cards .lv.lock { opacity: .7; }
.lv-heading, .lv-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lv-cards .lv b { font-size: 17px; line-height: 1.4; }
.lv-score { flex: 0 0 auto; padding: 4px 8px; border-radius: 9px; background: var(--panel2); color: var(--muted); font-size: 12px; }
.lv-score.tried { background: var(--gold); color: #392b0b; font-size: 14px; font-weight: 800; }
.lv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.lv-tags .lv-range { padding: 3px 7px; border-radius: 6px; background: var(--panel2); color: var(--text); }
.lv-tags .lv-cadence { padding: 3px 7px; border-radius: 6px; background: var(--scale); color: var(--good); }
.lv-footer { color: var(--muted); font-size: 11px; }
.lv-cards .lv small { font-size: 15px; letter-spacing: 2px; }
.lv-track { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--line); }
.lv-track > span { display: block; height: 100%; background: var(--gold); }
.lv-cards .lvinfo { margin: -4px 0 0; }

.notice { display: grid; gap: 8px; margin: 4px 0 8px; padding: 10px 12px; border-radius: 14px; background: #2a2412; border: 1px solid #6b5a22; font-size: 13.5px; color: #f0dca0; }
.notice .btn { justify-self: start; min-height: 40px; }

/* 判断调性：圆环中间选大调 / 小调；选中的候选主音；确定按钮 */
.center.kf { width: 44%; }
.kfmode { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.kfmode button { min-height: 44px; min-width: 88px; padding: 0 12px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); font-weight: 800; font-size: 17px; color: var(--text); }
.kfmode button.on { background: var(--scale2); border-color: #8ab4ff; color: #fff; }
.cell.sel { border-color: var(--gold); background: #3a3320; color: var(--gold); box-shadow: 0 0 0 3px rgba(232,196,104,.4); transform: scale(1.06); }
.act.ok { color: #3a2a06; background: linear-gradient(180deg, #f1d27e, #d9a93d); border: 0; font-weight: 800; }
.act.ok[disabled] { opacity: .35; }

/* 按钮下方的小字（真实音名 / 唱名）：空的时候不占位；足够清楚但不抢数字 */
.cell small:empty, .gcell small:empty { display: none; }
.cell small.sb { font-size: 11.5px; font-weight: 700; opacity: .88; margin-top: 2px; letter-spacing: 0; white-space: nowrap; color: #bcd0f0; }
.cell.scale small.sb { color: #cfe0ff; }
.cell.tonic small.sb { color: var(--gold); }
@media (max-width: 350px) { .cell small.sb { font-size: 10.5px; } }

/* 钢琴输入：真实黑白键次序，内部横向滑动保留足够触控面积。 */
#pad.piano { width:100%; max-width:560px; height:auto; min-width:0; }
.piano-tools { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.piano-tools>span { font-size:12px; color:var(--muted); max-width:45%; }
.piano-tools .seg { flex:none; }
.piano-tools .seg button { min-height:44px; font-size:12px; padding:0 8px; }
.piano-scroll { width:100%; overflow-x:auto; overflow-y:hidden; padding:4px 2px 10px; touch-action:pan-x; overscroll-behavior-x:contain; scrollbar-color:#516481 #182234; scrollbar-width:thin; border-radius:8px; background:#090e15; }
.piano-bed { --key-width:64px; position:relative; width:calc(var(--whites) * var(--key-width)); height:calc(var(--piano-height,184px) + 10px); }
.piano-scroll.fit { overflow-x:hidden; }
.piano-scroll.fit .pkey.black { width:calc(var(--key-width) * .68); }
.piano-scroll.fit .pk-label b { font-size:clamp(12px,calc(var(--key-width) * .38),17px); }
.piano-scroll.fit .pk-label small { font-size:clamp(8px,calc(var(--key-width) * .23),10px); }
.pkey { position:absolute; left:calc(var(--position) * var(--key-width)); top:0; display:flex; align-items:flex-end; justify-content:center; padding:0 2px 12px; border:1px solid #b1bdca; font-weight:700; line-height:1.1; transition:background .1s; }
.pkey.white { width:var(--key-width); height:var(--piano-height,184px); z-index:1; border-radius:0 0 5px 5px; color:#28364d; background:linear-gradient(#eef2f7 84%,#d4dce6); box-shadow:0 7px 0 #a6b3c3; }
.pkey.black { width:44px; height:max(60px,calc(var(--piano-height,184px) * .61)); transform:translateX(-50%); z-index:2; border-radius:0 0 4px 4px; border-color:#050912; color:#e9eff8; background:linear-gradient(90deg,#1c2b40,#101928 55%,#27344a); box-shadow:0 6px 0 #060b14; }
.pk-label b { display:block; font-size:17px; }
.pk-label small { display:block; font-size:10px; margin-top:4px; }
.pkey.tonic:not(.play):not(.good):not(.bad):not(.reveal) { border-bottom:4px solid var(--gold); }
.pkey.off .pk-label { opacity:.32; }
.pkey.play,.pkey.sel { background:#95bdf7; color:#13243d; border-color:#aaceff; }
.pkey.good { background:#9eebbb; color:#143922; border-color:#4ade80; }
.pkey.bad { background:#f6adba; color:#4a1822; border-color:#fb7185; }
.pkey.reveal { background:#f1d994; color:#3a2a06; border-color:var(--gold); }
.pkey:active:not(:disabled) { padding-bottom:8px; box-shadow:none; }
.pkey:focus-visible { outline-offset:-4px; z-index:3; }
.piano-help { margin-top:8px; text-align:center; font-size:11.5px; color:var(--muted); }
.piano-choice { flex-direction:row; justify-content:center; margin:10px 0; }
.preset-save { display:flex; gap:8px; margin:12px 0; }
.preset-save input { width:100%; min-width:0; flex:1; height:48px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); font:inherit; user-select:text; }
.preset-save .btn { flex:none; padding:0 12px; }
.preset-row { display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line); padding:10px 0; }
.preset-row>div { flex:1; min-width:0; }
.preset-row b { display:block; font-size:15px; overflow-wrap:anywhere; }
.preset-row small { display:block; font-size:12px; color:var(--muted); }
.preset-row .btn { min-width:56px; padding:0 12px; }
.preset-delete { min-width:44px; min-height:44px; font-size:12px; color:var(--bad); }
@media (max-height:600px) { .piano-tools { margin-bottom:6px; } }
.help a { color:var(--gold); text-underline-offset:3px; }

/* 第 9 章 · 错音复习 */
.mchap { margin: 14px 0 6px; padding: 12px; border-radius: 16px; background: #1a2030; border: 1.5px solid #4a3d2a; }
.mchap .world { margin: 0 0 8px; }
.mlist { display: grid; gap: 2px; margin: 4px 0 6px; }
.mrow { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid #1f2a3d; font-size: 13.5px; }
.mrow:last-child { border-bottom: 0; }
.mrow b { font-size: 17px; text-align: center; }
.mrow span { color: var(--muted); }
.mrow i { font-style: normal; color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* MIDI controls and the personal practice desk reuse the ear trainer palette. */
.icon.connected { color: #82d5ad; background: rgba(130,213,173,.12); }
#sheetBody select { max-width: 100%; min-height: 44px; padding: 8px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font: inherit; }
#sheetBody .row:has(select) { flex-wrap: wrap; }
#sheetBody .row select { width: 100%; }
.melody-lab { color: var(--text); }
.ml-intro { border-bottom: 1px solid var(--line); padding: 8px 0 16px; }
.ml-intro h2 { font-size: 25px; margin: 0 0 6px; letter-spacing: -.5px; }
.ml-intro p { font-size: 17px; margin: 0 0 7px; }
.ml-intro small, .ml-task small { color: var(--muted); line-height: 1.5; }
.melody-lab h3 { margin: 28px 0 10px; font-size: 18px; }
.ml-task { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 13px 0; }
.ml-task label { flex: 1; display: flex; align-items: center; gap: 10px; }
.ml-task small { display: block; margin-top: 5px; }
.ml-task input, .ml-check input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #82d5ad; }
.ml-task button { min-width: 64px; }
.ml-clock { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-variant-numeric: tabular-nums; }
.ml-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.ml-field { flex: 1 1 135px; min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 13px; }
.ml-phrase { font-size: clamp(22px, 6vw, 32px); padding: 25px 8px; margin: 15px 0; text-align: center; background: var(--panel); border-block: 1px solid var(--line); line-height: 1.6; overflow-wrap: anywhere; }
.ml-check { display: flex; gap: 9px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.ml-status { color: #82d5ad; font-size: 14px; line-height: 1.6; }
.ml-played { min-height: 28px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; color: var(--muted); }
.ml-keyboard { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin: 12px 0; }
.ml-keyboard .btn { min-width: 0; min-height: 82px; padding: 10px 1px; white-space: pre-line; background: #e8edf2; color: #192634; border-radius: 4px 4px 8px 8px; font-size: 12px; touch-action: none; }
.ml-keyboard .btn:active { background: #82d5ad; }
.ml-results { border-left: 3px solid #82d5ad; padding-left: 12px; line-height: 1.5; font-size: 14px; }
.melody-lab textarea { width: 100%; box-sizing: border-box; min-height: 90px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; resize: vertical; }
.melody-lab audio { width: 100%; margin: 12px 0; }
.melody-lab details { margin-top: 15px; line-height: 1.6; }
#sheetBody summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
.ml-history { width: 100%; font-size: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ml-history th, .ml-history td { text-align: left; padding: 10px 3px; border-bottom: 1px solid var(--line); }
.ml-trend { display: flex; align-items: end; gap: 6px; height: 80px; padding: 15px 0; }
.ml-trend div { flex: 1; max-width: 40px; background: #82d5ad; border-radius: 3px 3px 0 0; }
.melody-lab :focus-visible, #sheetBody select:focus-visible { outline: 2px solid #82d5ad; outline-offset: 3px; }
@media (max-width: 380px) { .bar { gap: 4px; padding-inline: 8px; } .bar .chip { padding-inline: 8px; font-size: 13px; } .bar .icon { flex-shrink: 0; } .ml-keyboard .btn { font-size: 11px; } }

/* Whole-phrase dictation keeps the answer hidden until submission. */
.dt-chapter { border-left: 3px solid var(--gold, #e8c468); padding-left: 14px; }
.dt-chapter .btn { margin-top: 12px; }
.dictation .ml-fields { margin-top: 18px; }
.dictation .ml-keyboard { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dictation .btn:disabled { opacity: .4; cursor: default; }
.dt-given { min-height: 56px; padding: 14px; margin: 12px 0; border: 1px dashed var(--line); border-radius: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.dt-comparison .dt-correct { color: #82d5ad; }
.dt-comparison .dt-wrong { color: #f2a4a4; }
.dictation .ml-results h3 { margin-top: 20px; }

/* 功能听音章节：只展开当前主线，琴键图明确每关实际音集。 */
.course-routes { display: flex; gap: 8px; margin: 6px 0 12px; }
.course-routes button { flex: 1; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 13px; }
.course-routes button.on { border-color: var(--gold); color: var(--gold); background: var(--panel2); }
.course-method { margin: 12px 0; padding: 12px; border-left: 3px solid var(--gold); background: var(--panel2); border-radius: 0 12px 12px 0; }
.course-method b { font-size: 15px; }
.course-method p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 7px 0; }
.course-method .btn { font-size: 12px; min-height: 44px; }
.lv-note-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-note-map { position: relative; display: inline-block; width: 111px; height: 25px; flex: 0 0 111px; }
.lv-note-map i { position: absolute; display: block; border-radius: 2px; background: var(--line); }
.lv-note-map .white { bottom: 0; height: 12px; width: 12px; }
.lv-note-map .black { top: 0; height: 10px; width: 8px; }
.lv-note-map .active { background: var(--good); }
.lv-note-label { color: var(--muted); font-size: 11px; line-height: 1.5; }

.course-method summary { min-height: 28px; cursor: pointer; font-size: 13px; line-height: 1.6; color: var(--text); }
.course-method[open] summary { margin-bottom: 10px; }
.lv-score.passed { background: var(--good); color: #123420; }
.lv.done .lv-track > span { background: var(--good); }
/* Account status sits beside the training route without changing the quiz controls. */
.ear-account{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 16px;border-bottom:1px solid #243149;margin-bottom:14px}
.ear-account b,.ear-account small{display:block;overflow-wrap:anywhere}.ear-account small{color:var(--muted,#a4b1c5);font-size:12px;margin-top:4px;line-height:1.5}
.ear-account-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex-shrink:0}.ear-account-actions .btn{font-size:12px;padding:8px 10px;min-height:36px;text-decoration:none;color:var(--text)}
@media(max-width:380px){.ear-account{align-items:flex-start}.ear-account-actions{max-width:100px}.ear-account-actions .btn{width:100%;text-align:center}}

/* 我的：账号留在练习界面，统计与分享各有一个明确入口。 */
.ear-my { min-width: 0; }
.ear-my h3 { font-size: 17px; margin: 0 0 12px; }
.ear-my .help { margin: 6px 0 12px; overflow-wrap: anywhere; }
.my-summary { padding: 2px 0 22px; border-bottom: 1px solid var(--line); }
#myName { display: block; font-size: 24px; overflow-wrap: anywhere; }
.my-sync { color: var(--gold); font-size: 13px; margin: 8px 0; }
.my-progress { display: flex; flex-wrap: wrap; gap: 24px; color: var(--muted); font-size: 13px; }
.my-progress b { color: var(--text); font-size: 20px; font-variant-numeric: tabular-nums; }
.my-auth, .my-share { padding-top: 22px; }
.my-share { margin-top: 22px; border-top: 1px solid var(--line); }
.my-form { display: grid; gap: 12px; min-width: 0; }
.my-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; color: var(--muted); }
.ear-my input:not([type=checkbox]) { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; user-select: text; -webkit-user-select: text; }
.ear-my input:focus-visible, .ear-my a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ear-my input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.my-consent { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); min-height: 36px; }
.ear-my a { color: var(--gold); margin-left: 4px; }
.my-tabs { margin-bottom: 10px; }
.my-message { font-size: 14px; color: var(--gold); line-height: 1.6; overflow-wrap: anywhere; padding: 10px 0; margin: 0; }
.my-message.error { color: var(--bad); }
.my-alternatives { margin-top: 16px; }
.my-alternatives summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 8px 0; }
.my-code-form { padding: 14px 0; border-bottom: 1px solid var(--line); }
.my-google { margin-top: 10px; min-width: 0; }
#myLogout { margin-top: 18px; color: var(--muted); width: 100%; }
.ear-my button:disabled { opacity: .5; cursor: wait; }
#myShareUrl { font-size: 12px; }
/* 状态提示不拦截正在点击的账号表单。 */
#toast { pointer-events: none; }

/* 同一份总目录使用连续章号；复习不占课程章号。 */
.chapter-directory { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chapter-directory > summary { padding: 12px; font-size: 14px; cursor: pointer; color: var(--gold); }
.chapter-group { margin: 12px 14px 4px; font-size: 12px; color: var(--muted); }
.chapter-directory nav { display: grid; padding: 0 8px 8px; }
.chapter-link { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; text-align: left; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); }
.chapter-link > span { width: 24px; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter-link b { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.chapter-link[aria-current] { background: var(--panel2); color: var(--gold); }
.chapter-link[aria-current] > span { color: var(--gold); }
.chapter-link:focus-visible, .chapter-directory > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (min-width: 600px) { .chapter-directory nav { grid-template-columns: 1fr 1fr; } }


/* 固定主页：主导航只负责首页、课程、复习与账号。 */
#home { height: 100vh; height: 100dvh; max-width: 900px; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); }
.home-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 76px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.home-brand { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-size: 18px; font-weight: 750; letter-spacing: .03em; }
.home-brand svg { color: var(--gold); }
.home-tools { display: flex; gap: 8px; }
#homeContent { overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.home-page { padding: 26px 22px 32px; max-width: 720px; margin: 0 auto; }
.home-heading { margin-bottom: 24px; }
.home-heading h1 { margin: 0 0 9px; font-size: 28px; line-height: 1.3; font-weight: 750; letter-spacing: -.035em; }
.home-heading p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.home-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px 12px calc(5px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--bg2); }
.home-nav button { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; border-radius: 10px; }
.home-nav button.on { color: var(--gold); background: #e8c4680c; }
.home-nav button svg { width: 22px; height: 22px; }
.daily-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 18px; font-size: 15px; }
.daily-strip small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }
.daily-strip button { min-height: 44px; padding: 0 8px; color: var(--muted); font-size: 13px; }
.home-course { border: 1px solid #6e6038; background: linear-gradient(125deg, #24251e, var(--bg2) 80%); padding: 24px; border-radius: 20px; }
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .08em; margin: 0 0 9px; }
.home-course h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.4; }
.home-course .help { margin: 0 0 22px; font-size: 14px; line-height: 1.7; }
.chapter-marks { display: flex; gap: 5px; margin: 16px 0 10px; }
.chapter-marks i { flex: 1; height: 5px; background: var(--line); border-radius: 2px; }
.chapter-marks i.done { background: var(--good); }
.chapter-count { color: var(--muted); font-size: 12px; margin: 0 0 18px; line-height: 1.6; }
.home-course-actions { display: flex; gap: 10px; }
.home-course-actions .btn { min-height: 48px; }
.home-course-actions .gold { flex: 1; }
.home-resume { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.home-resume > div { flex: 1; min-width: 0; }
.home-resume b { display: block; font-size: 14px; line-height: 1.6; }
.home-resume small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.home-resume .eyebrow { color: var(--muted); margin-bottom: 4px; }
.home-resume .btn { flex: none; font-size: 13px; padding: 10px 12px; }
.home-extra { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-extra button { position: relative; min-height: 102px; padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.home-extra b { display: block; font-size: 15px; margin-right: 12px; }
.home-extra small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 6px; }
.home-extra span { position: absolute; top: 16px; right: 14px; color: var(--gold); }
.home-footnote { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 22px 0 0; }
.course-group { margin: 28px 0; }
.course-group h2 { font-size: 13px; color: var(--gold); font-weight: 600; letter-spacing: .08em; margin: 0 0 10px; }
.course-row { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; min-height: 84px; border-bottom: 1px solid var(--line); }
.course-number { color: var(--muted); font-size: 23px; font-weight: 300; font-variant-numeric: tabular-nums; width: 32px; flex: none; }
.course-copy { flex: 1; min-width: 0; }
.course-copy b { display: block; font-size: 17px; font-weight: 650; }
.course-copy small { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.6; }
.course-arrow { color: var(--muted); font-size: 24px; }
.chapter-continue { width: 100%; margin: 0 0 14px; text-align: left; line-height: 1.6; }
.lesson-phase { font-size: 13px; color: var(--gold); margin: 12px 0 0; font-weight: 600; }
#app #btnMe { display: none; }
#app .bar { gap: 6px; }
#app .chip { padding: 0 10px; }
#app #btnMode { flex-shrink: 1; }
#app #btnKey { flex-shrink: 1; }
@media (max-width: 400px) {
  .home-bar { padding: 10px 16px; min-height: 66px; }
  .home-page { padding: 22px 16px 28px; }
  .home-heading h1 { font-size: 25px; }
  .home-course { padding: 20px 16px; border-radius: 16px; }
  .home-course h2 { font-size: 21px; }
  .home-course-actions { flex-wrap: wrap; }
  .home-course-actions .gold { min-width: 160px; }
  .home-extra button { padding: 16px 12px; }
  .home-extra span { right: 8px; }
  #app .bar { padding-left: 8px; padding-right: 8px; gap: 4px; }
  #app .chip { font-size: 13px; padding: 0 7px; }
  #app .bar .icon { width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .home-nav *, .course-row { transition: none; } }