:root{--ink:#18211d;--muted:#6d7973;--line:#dfe6e2;--surface:#fff;--bg:#f4f7f5;--mint:#1bc982;--mint-dark:#0ca769;--yellow:#ffd84c;--red:#f05d5e;--blue:#3186d8;--shadow:0 12px 36px rgba(28,48,39,.09)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;letter-spacing:0}.app-shell{width:min(1080px,100%);min-height:100vh;margin:auto;background:#fafcfb}.topbar{height:72px;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:8px;font-size:21px}.brand strong,.brand span{display:block}.brand span{font-size:11px;color:var(--muted);margin-top:2px}.view-tabs{display:flex;gap:8px;margin:auto}.tab{border:0;background:transparent;padding:10px 22px;color:var(--muted);font-size:15px;cursor:pointer}.tab.active{color:var(--ink);font-weight:700;border-bottom:2px solid var(--mint)}button{font:inherit;letter-spacing:0}.icon-button{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:19px}.view{display:none;padding:34px clamp(16px,4vw,48px) 24px}.view.active{display:block}.practice-head{display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{margin:0 0 7px;color:var(--mint-dark);font-weight:700;font-size:12px}.practice-head h1,.records-header h1{margin:0;font-size:clamp(22px,4vw,30px);line-height:1.2}.progress-copy strong{font-size:30px}.progress-copy span{color:var(--muted)}.controls-row{display:flex;gap:10px;align-items:center;margin:22px 0 16px;flex-wrap:wrap}.chip{border:1px solid #b9ddd0;background:#fff;color:#25785a;border-radius:999px;padding:8px 13px;cursor:pointer}.voice-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:5px}.switch-control,.switch-line{display:flex;align-items:center;gap:9px;margin-left:auto;color:var(--muted);font-size:13px}.switch-control input,.switch-line input{position:absolute;opacity:0}.switch{width:42px;height:24px;background:#c9d1cd;border-radius:20px;position:relative;transition:.2s}.switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px #777;transition:.2s}input:checked+.switch{background:var(--yellow)}input:checked+.switch:after{left:21px}.score-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}.score-toolbar{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.score-scroll{overflow-x:auto;padding:16px}#scoreSvg{display:block;width:100%;min-width:690px;height:260px}.staff-line{stroke:#68726d;stroke-width:1}.bar-line{stroke:#8a948f}.note-head{fill:var(--ink);transition:.15s}.note-stem{stroke:var(--ink);stroke-width:2}.note-group.active .note-head{fill:var(--mint);filter:drop-shadow(0 0 5px rgba(27,201,130,.55))}.note-group.correct .note-head{fill:var(--mint-dark)}.note-group.wrong .note-head{fill:var(--red)}.note-label{font-size:11px;fill:var(--muted);text-anchor:middle}.feedback-strip{padding:10px 16px;background:#f7faf8;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}.pitch-panel{margin-top:16px;background:#edf3f0;border-radius:8px;padding:12px 15px}.pitch-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.pitch-head strong{color:var(--ink)}#pitchCanvas{width:100%;height:94px;display:block}.pitch-axis{display:flex;justify-content:space-between;color:#9aa59f;font-size:10px}.status-line{text-align:center;height:42px;padding-top:15px;color:var(--muted);font-size:13px}.actions{display:flex;justify-content:center;gap:26px;min-height:92px;align-items:center}.actions button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;color:var(--muted);min-width:86px}.action-icon,.mic-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}.action-icon{background:#e2f2ec;color:var(--mint-dark)}.mic-icon{background:var(--mint);color:#fff;box-shadow:0 6px 16px rgba(27,201,130,.3)}.record-action.recording .mic-icon{background:var(--red);animation:pulse 1.3s infinite}.hidden{display:none!important}.exercise-nav{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding-top:16px}.exercise-nav button,.text-button{border:0;background:transparent;color:var(--ink);cursor:pointer}.mini-progress{height:4px;background:#e2e8e5;border-radius:5px}.mini-progress span{display:block;height:100%;background:var(--mint);border-radius:5px;transition:.3s}.records-header{display:flex;justify-content:space-between;align-items:end}.text-button{color:var(--red)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.stats-grid div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}.stats-grid span{display:block;color:var(--muted);font-size:12px}.stats-grid strong{display:block;font-size:28px;margin-top:7px}.record-list{display:grid;gap:9px}.record-item{display:grid;grid-template-columns:1fr auto;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:16px}.record-item p{margin:0 0 5px;font-weight:700}.record-item small{color:var(--muted)}.record-score{font-size:26px;font-weight:800;color:var(--mint-dark)}.empty{padding:70px 10px;text-align:center;color:var(--muted)}dialog{border:0;background:transparent;padding:0;width:min(440px,calc(100% - 28px))}dialog::backdrop{background:rgba(16,25,21,.45)}.dialog-card{background:#fff;border-radius:8px;padding:24px;box-shadow:var(--shadow)}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{margin:0}.field{display:block;border:0;padding:0;margin:26px 0}.field output{float:right;color:var(--mint-dark);font-weight:700}.field input[type=range]{width:100%;accent-color:var(--mint);margin-top:15px}.field legend{margin-bottom:10px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#edf1ef;border-radius:8px;padding:3px}.segmented button{border:0;background:transparent;padding:10px;border-radius:6px;cursor:pointer}.segmented button.active{background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.09)}.switch-line{margin:0;justify-content:space-between}.switch-line span:first-child{margin-right:auto}.switch-line strong,.switch-line small{display:block}.switch-line small{margin-top:3px}.save-button{width:100%;margin-top:28px;padding:12px;border:0;border-radius:8px;color:#fff;background:var(--ink);cursor:pointer}.countdown{position:fixed;inset:0;background:rgba(16,25,21,.48);z-index:50;display:grid;place-content:center;text-align:center;color:#fff}.countdown strong{font-size:88px;line-height:1}.countdown span{margin-top:10px}.countdown[hidden]{display:none}@keyframes pulse{50%{transform:scale(1.09)}}
@media(max-width:650px){.topbar{height:60px}.brand{min-width:0}.brand span{display:none}.brand-mark{width:34px;height:34px}.view-tabs{gap:0}.tab{padding:9px 14px}.view{padding:22px 10px 20px}.controls-row{gap:7px}.switch-control{order:3;width:100%;justify-content:flex-end}.score-scroll{padding:8px 4px;overflow-x:hidden}#scoreSvg{width:100%;min-width:0;height:auto}.score-toolbar{padding-inline:10px}.pitch-panel{margin-inline:0}.exercise-nav{grid-template-columns:90px 1fr 90px}.stats-grid{gap:7px}.stats-grid div{padding:13px 10px}.stats-grid strong{font-size:22px}.actions{gap:8px}}
.login-screen{position:fixed;inset:0;z-index:100;background:#eef3f0;display:grid;place-items:center;padding:18px}.login-screen[hidden]{display:none}.login-panel{width:min(380px,100%);background:#fff;border:1px solid var(--line);padding:30px;border-radius:8px;box-shadow:var(--shadow)}.login-panel .brand-mark{margin-bottom:18px}.login-panel h1{margin:0;font-size:25px}.login-panel p{color:var(--muted);margin:7px 0 24px}.login-panel label{display:grid;gap:7px;margin:14px 0;font-size:13px}.login-panel input{height:43px;border:1px solid var(--line);border-radius:6px;padding:0 11px;font-size:16px}.login-panel button{width:100%;height:44px;border:0;border-radius:7px;background:var(--ink);color:#fff;margin-top:10px}.login-error{min-height:20px;color:var(--red);font-size:13px}.user-menu{display:flex;align-items:center;gap:8px;font-size:12px}.user-menu button{border:0;background:transparent;color:var(--muted);cursor:pointer}.library-header,.book-detail-head,.student-tool-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-header h1{margin:0}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:24px}.book-item{border:1px solid var(--line);background:#fff;border-radius:8px;padding:20px;text-align:left;cursor:pointer}.book-item strong,.book-item small{display:block}.book-item small{color:var(--muted);margin-top:6px}.book-cover{display:grid;place-items:center;width:46px;height:58px;background:#20352c;color:#fff;border-radius:3px;margin-bottom:20px;font-size:22px}.book-detail{margin-top:12px}.book-detail h2{margin-right:auto}.import-status{min-height:24px;color:var(--mint-dark)}.score-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.score-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);background:#fff;padding:13px;border-radius:6px;cursor:pointer}.score-item span{font-size:11px;color:var(--mint-dark)}.student-tools{border-block:1px solid var(--line);padding:12px 0;margin-bottom:16px}.student-tool-head span{font-size:12px;color:var(--muted)}.mini-piano{height:128px;position:relative;overflow-x:auto;overflow-y:hidden;margin-top:10px;background:#171a18;border:1px solid #171a18;touch-action:pan-x;min-width:560px}.piano-whites{position:absolute;inset:0;display:flex;gap:1px}.piano-blacks{position:absolute;inset:0;pointer-events:none}.piano-key{border:0;cursor:pointer;padding:0;touch-action:manipulation}.piano-key.white{height:126px;flex:1 1 0;background:linear-gradient(#fff 0%,#fff 82%,#edf0ee 100%);color:#4c5550;border-radius:0 0 3px 3px;box-shadow:inset 0 -2px 2px rgba(0,0,0,.08)}.piano-key.black{position:absolute;top:0;width:4.4%;height:78px;transform:translateX(-50%);z-index:2;background:linear-gradient(90deg,#171a18,#303633 55%,#111);color:#fff;border-radius:0 0 3px 3px;box-shadow:0 4px 5px rgba(0,0,0,.42);pointer-events:auto}.piano-key span{position:absolute;bottom:7px;left:0;right:0;font-size:9px}.piano-key.black span{bottom:5px;font-size:8px;color:#d8ddda}.piano-key.pressed{background:#42b987}.batchImportLabel{cursor:pointer}@media(max-width:760px){.topbar{overflow-x:auto}.brand{display:none}.user-menu strong{display:none}.view-tabs{margin:0}.tab{white-space:nowrap}.book-detail-head{flex-wrap:wrap}.score-library{grid-template-columns:repeat(2,1fr)}.student-tools{overflow-x:auto}.mini-piano{width:620px}}
.piano-hint{margin:10px 0;padding:10px 12px;border:1px solid #c9d9eb;border-radius:6px;background:#f2f7fd;color:#245386;font-size:12px;line-height:1.55}.piano-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;border-radius:7px}.mini-piano{width:100%;min-width:700px;margin-top:0;background:#fff;border-color:#c5d5e5}.piano-key.white{border-right:1px solid #b9cadc;background:#fff}.piano-key.white:first-child{border-left:1px solid #b9cadc}.piano-key.black{width:4.2%;height:80px;background:#2c3540;box-shadow:none}.piano-key.white span{color:#58718c}.piano-current{padding-top:9px;font-size:13px;color:#58665f}.piano-current strong{margin-left:16px;color:#185a92;font-size:16px}.piano-key:focus-visible{outline:3px solid #35a87b;outline-offset:-3px}.piano-key.pressed{background:#51c79a}.student-tools{overflow:hidden}@media(max-width:760px){.piano-hint{font-size:11px}.mini-piano{width:620px;min-width:620px;height:118px}.piano-key.white{height:116px}.piano-key.black{height:72px}.piano-scroll{touch-action:pan-x}.piano-current{position:sticky;left:0}}
.play-rhythm-coach{margin:10px 12px 12px;padding:12px 14px;border:1px solid #bfd6cc;border-radius:7px;background:#f4faf7}.play-rhythm-coach[hidden]{display:none}.rhythm-readout{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}.rhythm-readout strong{font-size:16px;color:#182e25}.rhythm-readout span{font-size:14px;color:#4d6259}.rhythm-readout b{justify-self:end;min-width:74px;text-align:center;padding:5px 10px;border-radius:5px;background:#173d30;color:#fff;font-size:17px}.rhythm-dots{display:flex;justify-content:center;gap:10px;margin:10px 0 8px}.rhythm-dots i{width:30px;height:30px;display:grid;place-items:center;border:1px solid #a8bbb2;border-radius:50%;background:#fff;color:#65766e;font-style:normal;font-size:12px;transition:background .08s,color .08s,transform .08s}.rhythm-dots i.active{background:#f1b82d;border-color:#d99c08;color:#172119;transform:scale(1.18);font-weight:800}.rhythm-pulse-track{height:5px;background:#dce7e2;border-radius:4px;overflow:hidden}.rhythm-pulse-track span{display:block;width:0;height:100%;background:#159563}.note-group.active .scan-note-zone{fill:rgba(241,184,45,.28)!important;stroke:#e09e00!important;stroke-width:3!important}.note-group.active .note-head{fill:#e4a900!important;filter:drop-shadow(0 0 4px rgba(228,169,0,.65))}#playbackCursor{display:none!important}@media(max-width:650px){.play-rhythm-coach{position:sticky;bottom:6px;z-index:12;margin:8px 0;padding:10px;background:rgba(244,250,247,.97);box-shadow:0 3px 14px rgba(15,45,33,.16)}.rhythm-readout{gap:8px}.rhythm-readout strong{font-size:14px}.rhythm-readout span{font-size:13px}.rhythm-readout b{font-size:15px;min-width:62px}.rhythm-dots{gap:7px}.rhythm-dots i{width:27px;height:27px}}
.measure-guide-barline,.measure-beat-dot{display:none}.measure-beat-frame{display:none;fill:rgba(15,157,106,.14);stroke:#07915f;stroke-width:2.5;pointer-events:none;vector-effect:non-scaling-stroke}.measure-beat-frame.active{display:block}.note-group.active .scan-note-zone{fill:transparent!important;stroke:none!important}.note-group.active .note-head{fill:var(--ink)!important;filter:none!important}#playbackCursor{display:none!important}
.scan-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.scan-heading h1{margin:0;font-size:clamp(22px,4vw,30px)}.format-badge{padding:7px 10px;border:1px solid #b9ddd0;color:var(--mint-dark);border-radius:999px;font-size:12px;font-weight:700}.scan-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px}.capture-panel,.recognition-panel{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:500px;overflow:hidden}.capture-panel{padding:16px;display:flex;flex-direction:column}.capture-area{min-height:430px;border:1.5px dashed #a8b8b0;background:#f7faf8;display:grid;place-content:center;text-align:center;border-radius:8px}.capture-area strong,.capture-area small{display:block}.capture-area small{color:var(--muted);margin-top:7px}.capture-choice{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}.camera-symbol{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#e1f4ec;color:var(--mint-dark);font-size:26px;margin:0 auto 15px}.photo-stage{position:relative;min-height:410px;background:#1d2521;border-radius:6px;overflow:auto;display:grid;place-items:center}.photo-stage[hidden],.capture-actions[hidden]{display:none}.photo-stage canvas{display:block;max-width:100%;max-height:520px}.scan-beam{position:absolute;left:5%;right:5%;height:2px;top:10%;background:var(--mint);box-shadow:0 0 12px var(--mint);opacity:0}.scan-beam.running{opacity:1;animation:scan 1.5s ease-in-out infinite}.capture-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}.outline-button,.primary-button{padding:10px 16px;border-radius:7px;cursor:pointer}.outline-button{border:1px solid var(--line);background:#fff}.primary-button{border:1px solid var(--ink);background:var(--ink);color:#fff}.recognition-panel{padding:20px}.recognition-empty{height:100%;min-height:450px;display:grid;place-content:center;text-align:center;color:var(--muted)}.recognition-empty span{font-size:45px;color:#c5d2cc}.recognition-empty strong,.recognition-empty small{display:block}.recognition-empty small{margin-top:7px}.result-head{display:flex;justify-content:space-between;align-items:start}.result-head h2{margin:4px 0;font-size:20px}.confidence{color:var(--mint-dark);font-size:12px}.detected-notes{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0;padding:16px 0;border-block:1px solid var(--line)}.detected-note{display:grid;grid-template-columns:repeat(3,24px);gap:2px;text-align:center;background:#f4f7f5;border-radius:6px;padding:5px}.detected-note strong{grid-column:1/-1;font-size:14px}.detected-note button{border:0;background:#fff;border-radius:4px;cursor:pointer;color:var(--muted)}.xml-preview{height:160px;overflow:auto;margin:0;background:#15211b;color:#bdebd8;padding:12px;border-radius:6px;font:11px/1.45 Consolas,monospace;white-space:pre-wrap}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.result-actions button{padding:11px;border-radius:7px;cursor:pointer}.download-button{border:1px solid var(--line);background:#fff}.practice-button{border:0;background:var(--mint);color:#fff;font-weight:700}.result-warning{padding:10px;background:#fff8dd;color:#7a6221;border-radius:6px;font-size:12px;margin-top:12px}@keyframes scan{50%{top:88%}}@media(max-width:760px){.scan-layout{grid-template-columns:1fr}.capture-panel,.recognition-panel{min-height:0}.capture-area{min-height:340px}.recognition-empty{min-height:240px}}@media(max-width:650px){.topbar{padding-inline:12px}.tab{padding-inline:9px}.capture-choice{display:grid}.result-actions{grid-template-columns:1fr}}
/* 乐谱校正：笔 / 橡皮工具 */
.score-edit-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#f3faf7,#eef6f2);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.score-edit-toolbar[hidden]{display:none}
#editToolGroup{display:flex;gap:6px;padding:3px;background:#fff;border:1px solid var(--line);border-radius:10px}
#editToolGroup{display:flex;gap:6px}
.score-edit-toolbar button[type=button]{padding:8px 13px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink);transition:background .12s,border-color .12s,transform .05s}
.score-edit-toolbar button[type=button]:hover{border-color:var(--mint)}
.score-edit-toolbar button[type=button]:active{transform:translateY(1px)}
.score-edit-toolbar button[type=button].active{background:var(--mint);border-color:var(--mint-dark);color:#06351f;font-weight:700}
.score-edit-toolbar button[type=button]:disabled{opacity:.45;cursor:not-allowed}
#scoreUndoBtn{margin-left:auto;border-color:#e0b4b4!important;color:#a23b3b}
#scoreUndoBtn:not(:disabled){background:#fff5f5}
#scoreUndoBtn:not(:disabled):hover{border-color:#c96262!important}
#saveScoreBtn{margin-left:auto;border-color:#f0b429;color:#7a4e00;background:#fff7e6}
#saveScoreBtn:hover{background:#ffeec2}
#saveScoreBtn:disabled{opacity:.6;cursor:default}
#scoreEditHint{flex-basis:100%;margin:2px 0 0;font-size:12.5px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:8px;padding:6px 10px}
.score-edit-layer,.score-edit-handle{pointer-events:none}
.score-note-hitbox{fill:rgba(27,185,130,.07);stroke:rgba(27,185,130,.5);stroke-width:1.5;pointer-events:all;cursor:grab}
.score-note-hitbox:hover{fill:rgba(27,185,130,.2)}
.score-note-selection{fill:none;stroke:var(--mint-dark);stroke-width:2}
.score-edit-handle.selected .score-note-selection{stroke:var(--red);fill:rgba(240,93,94,.1)}
.score-edit-handle.selected .score-note-hitbox{stroke:var(--red);fill:rgba(240,93,94,.14);cursor:grabbing}
#scoreSvg.pen-mode{cursor:crosshair}
#scoreSvg.eraser-mode .score-note-hitbox{cursor:pointer;fill:rgba(240,93,94,.12);stroke:#f05d5e}
#scoreSvg{width:100%;height:auto;display:block}

/* ==== 收费账号体系：注册、试用/续费、设备绑定、管理后台 ==== */
.login-foot{margin-top:14px;display:grid;gap:8px;justify-items:center;text-align:center}
.link-button{width:auto!important;height:auto!important;background:transparent!important;border:0!important;color:var(--mint-dark)!important;text-decoration:underline;cursor:pointer;font-size:13px;padding:0!important;margin:0!important}
.login-foot small{color:var(--muted);font-size:11px;line-height:1.6}
.login-ok{min-height:20px;color:var(--mint-dark);font-size:13px;line-height:1.6}
.register-panel{width:min(620px,100%)}
.register-panel p{margin-bottom:16px}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.register-grid label{margin:9px 0}
@media(max-width:560px){.register-grid{grid-template-columns:1fr}.login-panel{padding:22px 18px}}
.account-badge{border:1px solid var(--line)!important;border-radius:999px;padding:4px 11px!important;font-size:11px;cursor:pointer;background:#fff!important}
.account-badge.trial{border-color:#f0b429!important;background:#fff7e6!important;color:#7a4e00!important}
.account-badge.paid{border-color:#b9ddd0!important;background:#eefaf4!important;color:#0a6c48!important}
.account-badge.expired{border-color:var(--red)!important;background:#fdeeee!important;color:#a32021!important;font-weight:700}
.account-badge.free{border-color:#c9d9eb!important;background:#f2f7fd!important;color:#245386!important}
.account-head,.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.account-head h1,.admin-head h1{margin:0;font-size:clamp(22px,4vw,30px)}
.account-state{padding:7px 12px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#fff}
.account-state.trial{border-color:#f0b429;background:#fff7e6;color:#7a4e00}
.account-state.paid{border-color:#b9ddd0;background:#eefaf4;color:#0a6c48}
.account-state.expired{border-color:var(--red);background:#fdeeee;color:#a32021;font-weight:700}
.account-state.free{border-color:#c9d9eb;background:#f2f7fd;color:#245386}
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin-top:22px;align-items:start}
.account-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}
.account-card h2{margin:0 0 12px;font-size:16px}
.account-note{margin:0 0 12px;padding:9px 11px;border:1px solid #c9d9eb;background:#f2f7fd;border-radius:6px;color:#245386;font-size:12px;line-height:1.6}
.account-info{margin:0;display:grid;gap:8px}
.account-info div{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:baseline}
.account-info dt{margin:0;color:var(--muted);font-size:12px}
.account-info dd{margin:0;font-size:14px;word-break:break-all}
.device-list{display:grid;gap:9px}
.device-slot{border:1px solid var(--line);border-radius:7px;padding:11px 12px;background:#fafcfb}
.device-slot strong{display:block;font-size:14px}
.device-slot small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.device-slot.current{border-color:var(--mint-dark);background:#eefaf4}
.device-slot.empty{border-style:dashed;color:var(--muted)}
.renew-card{grid-column:1/-1}
.renew-price{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.renew-price strong{font-size:32px;color:#a32021}
.renew-price span{color:var(--muted);font-size:13px}
.renew-steps{margin:0 0 14px;padding-left:20px;color:#3c4a44;font-size:13px;line-height:1.9}
.qr-box{display:grid;place-items:center;gap:8px;min-height:170px;padding:14px;border:1.5px dashed #a8b8b0;border-radius:8px;background:#f7faf8;color:var(--muted);font-size:12px;text-align:center}
.qr-box img{max-width:210px;max-height:210px;border-radius:6px}
.pay-form{display:grid;gap:12px;margin-top:14px}
.pay-form label{display:grid;gap:6px;font-size:13px}
.pay-form input[type=text],.pay-form input:not([type]){height:42px;border:1px solid var(--line);border-radius:6px;padding:0 11px;font-size:15px}
.pay-upload input{font-size:13px}
.pay-preview img{max-width:220px;border:1px solid var(--line);border-radius:6px}
.pay-history{margin-top:16px}
.pay-history h3{margin:0 0 8px;font-size:13px;color:var(--muted)}
.pay-row{display:grid;grid-template-columns:100px 80px 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:12px;color:#3c4a44}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap}
.admin-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;cursor:pointer;font-size:13px;color:var(--muted)}
.admin-tabs button.active{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:700}
.admin-tabs b{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--red);color:#fff;font-size:11px}
.admin-tabs button.active b{background:var(--yellow);color:#3a2b00}
.admin-status{min-height:22px;margin:16px 0 0;font-size:13px}
.admin-status.ok{color:var(--mint-dark)}
.admin-status.bad{color:var(--red)}
.admin-hint{margin:14px 0;padding:10px 12px;border:1px solid #c9d9eb;background:#f2f7fd;border-radius:6px;color:#245386;font-size:12px}
#adminPanel{margin-top:10px;display:grid;gap:12px}
.review-card,.pay-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px}
.review-card header,.pay-card header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.review-card header strong,.pay-card header strong{font-size:17px}
.review-card header span,.pay-card header span{color:var(--muted);font-size:12px}
.review-card dl,.pay-card dl{margin:0 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
.review-card dt,.pay-card dt{color:var(--muted);font-size:11px}
.review-card dd,.pay-card dd{margin:2px 0 0;font-size:14px;word-break:break-all}
.review-actions{display:flex;gap:9px;flex-wrap:wrap}
.review-actions button{padding:9px 15px;border-radius:7px;cursor:pointer;font-size:13px}
.pay-card.approved{border-left:4px solid var(--mint)}
.pay-card.rejected{border-left:4px solid var(--red);opacity:.85}
.pay-card.pending{border-left:4px solid var(--yellow)}
.proof-box{margin-bottom:12px;color:var(--muted);font-size:12px}
.proof-box img{max-width:min(320px,100%);max-height:280px;border:1px solid var(--line);border-radius:6px}
.admin-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}
.admin-table th,.admin-table td{padding:10px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table th{background:#f4f7f5;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.admin-table .state{padding:3px 9px;border-radius:999px;font-size:11px;white-space:nowrap;border:1px solid var(--line)}
.admin-table .state.on{border-color:#b9ddd0;background:#eefaf4;color:#0a6c48}
.admin-table .state.trial{border-color:#f0b429;background:#fff7e6;color:#7a4e00}
.admin-table .state.expired{border-color:var(--red);background:#fdeeee;color:#a32021;font-weight:700}
.admin-table .state.off{color:var(--muted);background:#f1f4f2}
.dev-cell{white-space:nowrap}
.dev{display:inline-flex;align-items:center;gap:5px;margin:2px 5px 2px 0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:11px;color:var(--muted)}
.dev.bound{border-color:#b9ddd0;background:#eefaf4;color:#0a6c48}
.dev.empty{border-style:dashed}
.dev button{border:0;background:transparent;color:var(--red);cursor:pointer;font-size:11px;text-decoration:underline;padding:0}
.ops{white-space:nowrap}
.ops button{margin:2px 4px 2px 0;padding:5px 10px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:11px}
.ops button:hover{border-color:var(--ink)}
.qr-settings{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;gap:12px;justify-items:start;max-width:460px}
.qr-settings h2{margin:0;font-size:16px}
.qr-settings p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.qr-settings .qr-box{width:100%}
.qr-upload{display:inline-block}
@media(max-width:650px){.account-grid{grid-template-columns:1fr}.account-info div{grid-template-columns:74px 1fr}.renew-price strong{font-size:27px}}
/* 麦克风开关 + 声音测试（练习区常驻音频控件） */
.audio-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 2px;flex-wrap:wrap}
.audio-tools .switch-line{margin-left:0}
.audio-tools strong{display:block;color:var(--ink);font-size:14px}
.audio-tools small{display:block;color:var(--muted);font-size:11px}
.audio-tools .secondary-action{display:inline-flex;align-items:center;gap:6px}
#soundTestBtn.testing{animation:pulseTest .35s ease 2}
@keyframes pulseTest{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media(max-width:650px){.audio-tools{margin:10px 0 2px}.audio-tools .secondary-action{padding:9px 12px}}

/* ============================================================
   教材目录：调性标签 + 两行条目；练习区“退出此教材”按钮
   ============================================================ */
.score-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
.score-item:disabled{opacity:.55;cursor:not-allowed}
.score-item-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score-item-main strong{font-size:15px;color:var(--ink)}
.score-item-sub{font-size:11px;color:var(--mint-dark)}
.key-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;line-height:1.5;background:#eefaf4;border:1px solid #b9ddd0;color:#0a6c48}
.key-badge[data-key*="小调"]{background:#eef3fb;border-color:#c9d9eb;color:#245386}
.score-library{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* 练习区右上常驻“退出此教材” */
.practice-head-right{display:flex;align-items:center;gap:12px}
.exit-book-btn{padding:7px 13px;font-size:13px;white-space:nowrap}

/* ============================================================
   自适应：PAD / 竖屏手机
   ============================================================ */
/* PAD：舒展留白，乐谱保持清晰大图 */
@media(min-width:768px) and (max-width:1024px){
  .view{padding:30px clamp(22px,3vw,44px) 26px}
  .score-panel{padding:18px}
}
/* 竖屏手机：乐谱不压缩到看不清，改为可横向平移查看清晰大图；导航与退出按钮易点 */
@media(max-width:650px){
  #scoreSvg{min-width:600px}
  .score-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 4px}
  .practice-head{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .practice-head-right{width:100%;justify-content:space-between}
  .exercise-nav{display:flex;gap:8px;align-items:center}
  .exercise-nav #prevBtn,.exercise-nav #nextBtn{flex:1 1 0;padding:12px 8px;font-size:15px}
  .exercise-nav .mini-progress{flex:1 1 100%;height:6px;margin:2px 0 0;background:#e2ebe6;border-radius:999px;overflow:hidden}
  .exercise-nav .mini-progress span{display:block;height:100%;background:var(--mint);border-radius:999px;transition:width .2s}
  .exit-book-btn{font-size:14px;padding:9px 14px}
}
@media(max-width:480px){
  .score-library{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .practice-head h1{font-size:21px}
  .controls-row{gap:8px}
}