:root{color-scheme:dark;--bg:#12151b;--panel:#1b2028;--panel2:#222934;--line:#303947;--fg:#edf1f5;--sub:#a7b3c3;--mint:#a8e7ce;--purple:#c5afff;--danger:#ffb0aa;--sans:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif}
.signin{min-height:100vh;display:grid;place-items:center;padding:20px}
.signin-card{width:min(100%,420px);padding:30px}
.signin-card h1{font-size:24px;margin:25px 0 16px}
.signin-form{display:grid;gap:14px;margin:0 0 18px}
.signin-form label{display:grid;gap:5px}
.signin-form button{margin-top:4px}
.signin-error{color:var(--danger);margin:0 0 12px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans)}[hidden]{display:none!important}button,input,select,textarea{color:inherit;font:inherit}button,select{cursor:pointer}button,input,select,textarea{border:1px solid var(--line);background:#171c23;border-radius:7px;padding:7px 9px}button:hover:not(:disabled){background:#303c48;border-color:#526075}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}button.primary{background:var(--mint);border-color:var(--mint);color:#10251b;font-weight:700}button.primary:hover{background:#c4f2e0;color:#10251b}a{color:var(--mint)}h2,p{margin:0}h2{font-size:17px;letter-spacing:.015em}.eyebrow{color:var(--mint);font-size:10px;font-weight:700;letter-spacing:.18em}.hint{color:var(--sub);font-size:12px;line-height:1.6}.status{color:var(--sub);font-size:12px}.danger{color:var(--danger)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,40px);background:#191e26;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.logo{background:var(--mint);color:#15291e;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;font-size:23px}.brand strong{font-size:20px;letter-spacing:.12em;display:block;line-height:1.1}.brand small{color:var(--sub);font-size:11px}.topActions,.actions,.segmentActions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.topActions{justify-content:flex-end}.topActions .status{margin-right:8px}
.shell{display:grid;grid-template-columns:237px minmax(0,1fr) 292px;max-width:1660px;margin:auto;min-height:calc(100vh - 74px)}.library{padding:27px 17px;border-right:1px solid var(--line);background:#181d24}.right{padding:19px 14px 32px 0;display:grid;align-content:start;gap:12px}.songTitle,.sectionTitle{width:100%;background:transparent;border:0;padding:6px 0}.songTitle{font-weight:700;font-size:20px;margin-bottom:9px}.sectionTitle{font-size:clamp(23px,3vw,32px);font-weight:700;min-width:0}.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:27px}.miniGrid label,.controls label,.editor label{display:grid;gap:4px;color:var(--sub);font-size:12px}.miniGrid input,.miniGrid select,.controls input,.controls select{width:100%;color:var(--fg);min-width:0}.sideTitle{display:flex;justify-content:space-between;align-items:center;gap:4px}.sideTitle h2{font-size:14px}.textBtn{border:0;background:none;color:var(--mint);font-size:12px;padding:4px}.segment{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;text-align:left;margin:5px 0;border-color:transparent;background:transparent}.segment span:first-child{overflow-wrap:anywhere}.segment small{color:var(--sub);white-space:nowrap}.segment[aria-current=true]{border-color:#3c6458;background:#243b35;color:var(--mint);font-weight:700}.addRow{display:flex;gap:6px;margin-top:12px}.addRow select{flex:1;min-width:0}.intro{margin-top:30px;border-top:1px solid var(--line);padding-top:17px;color:var(--sub);font-size:12px}.intro strong{color:var(--fg)}.intro p{margin:6px 0 9px}
main{min-width:0;padding:22px 18px 32px}.titleRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}.titleRow>div:first-child{min-width:0;flex:1}.segmentActions{justify-content:flex-end}.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px}.panelHead,.panelHead>div:first-child{display:flex;align-items:center;gap:8px}.panelHead{justify-content:space-between;margin-bottom:11px;flex-wrap:wrap}.step{display:inline-grid;place-items:center;color:var(--mint);background:#2a3d37;border-radius:5px;font-size:11px;font-weight:700;width:28px;height:24px}.lyricsPanel{margin-bottom:13px}.lyricsPanel textarea{width:100%;min-height:143px;resize:vertical;font-size:16px;line-height:1.85;padding:11px 13px}.draftRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--sub);font-size:12px;margin:8px 0 12px}.draftRow select{margin-left:5px}
.score{background:#fffdf7;color:#27261f;border:1px solid #e1d9c7;border-radius:8px;padding:12px 15px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;min-height:111px;max-height:560px;overflow:auto}
.score .empty{margin:27px auto;text-align:center;color:#605c52;font-size:13px}
.scoreLine{display:flex;align-items:flex-start;gap:0;min-width:max-content;padding:0 0 6px;border-bottom:1px solid #e9e2d6}
.scoreLine:last-child{padding-bottom:0;border-bottom:0}
#printScore{display:none}
@page{size:A4 portrait;margin:13mm 14mm}
@media print{
  body.printingScore{color-scheme:light;background:#fff;color:#171717}
  body.printingScore > :not(#printScore){display:none!important}
  body.printingScore #printScore{display:block;font:14px/1.4 SimSun,"Songti SC",serif}
  #printScore h1{margin:0 0 10px;text-align:center;font-size:26px;font-weight:700;overflow-wrap:anywhere}
  #printScore .printMeta{display:flex;justify-content:space-between;gap:12px;margin:0 0 11px;font-family:var(--sans)}
  #printScore .printBlock{break-inside:avoid;page-break-inside:avoid}
  #printScore h2{font-size:14px;margin:9px 0 0;font-weight:700}
  #printScore .printSystem{display:block;width:100%;height:auto;color:#171717}
  #printScore svg text{text-anchor:middle;fill:currentColor}
  #printScore .printDigit{font:700 20px Georgia,"Times New Roman",serif}
  #printScore .printSmall,#printScore .printTuplet{font:12px Georgia,"Times New Roman",serif}
  #printScore .printTuplet{font-weight:700}
  #printScore .printLyric{font:15px SimSun,"Songti SC",serif}
}
.scoreLine:has(.scoreTriplet){padding-top:9px}
.scoreTriplet{position:relative;display:flex;flex:none}
.tripletMark{position:absolute;top:-8px;left:18px;right:18px;height:16px;z-index:1;text-align:center;font:700 12px/12px Georgia,serif;pointer-events:none}
.tripletMark::after{content:"";position:absolute;left:0;right:0;top:9px;height:8px;border-top:1px solid currentColor;border-radius:50% 50% 0 0}
button.note{display:grid;flex:0 0 auto;justify-items:start;grid-template-rows:76px 24px;min-width:36px;padding:0 1px 2px;border-color:transparent;border-radius:5px;background:transparent;color:inherit}
button.note:hover:not(:disabled){background:#f1ecdf;border-color:#d6cbb7}
button.note[aria-pressed=true]{background:#e3eee4;border-color:#8cad91}
button.note:focus-visible{outline-color:#486c50;outline-offset:1px}
.note .word{min-width:34px;max-width:100px;min-height:24px;padding:0 2px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font:17px/24px "Songti SC",SimSun,serif}
.note .word[draggable=true]{cursor:grab;user-select:none}
button.note.lyricDrop{outline:2px dashed #486c50;outline-offset:-2px}
.noteGlyphs{position:relative;display:flex;align-items:flex-start;padding-top:7px}
.noteGlyphs.tied::before{content:"";position:absolute;top:0;left:14px;right:14px;height:8px;border-top:1px solid currentColor;border-radius:50% 50% 0 0}
.notationGlyph{display:grid;grid-template-rows:13px 25px 17px 13px;justify-items:center;width:34px;flex:none}
.octaveDots{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;width:100%;height:100%}
.octaveDots:last-child{justify-content:flex-start;padding-top:1px}
.octaveDot{width:3px;height:3px;flex:none;border-radius:50%;background:currentColor}
.notationDigit{display:grid;grid-template-columns:8px 16px 8px;align-items:baseline;justify-content:center;line-height:25px}
.notationNumber{text-align:center;font:700 24px/25px Georgia,"Times New Roman",serif;font-variant-numeric:lining-nums tabular-nums}
.notationAccidental{font:12px/1 Arial,sans-serif}
.rhythmDots{font:700 11px/1 monospace;letter-spacing:-1px}
.rhythmLines{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding-top:1px}
.rhythmLine{width:14px;height:1px;background:currentColor}
.rhythmValue{font:9px/12px monospace}
.notationHold{grid-row:2;font:700 20px/25px Georgia,"Times New Roman",serif}
.scoreLine .bar{width:1px;flex:none;height:56px;margin:24px 4px 0;background:#514d42}
.noteGlyphs .bar{margin-top:17px}
.notationKey{margin:8px 0 0}
.editor{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px;background:var(--panel2);border-radius:8px}.editor span{color:var(--purple);font-size:12px;align-self:center}.editor input[type=number]{width:60px}.editor #noteLyric{width:120px}.scoreFoot{display:flex;align-items:center;gap:7px;margin-top:12px;flex-wrap:wrap}
.controls{display:grid;gap:9px}.controls h2{font-size:18px}.controls button{font-size:12px}.controls audio,.ref audio{width:100%;height:34px}.ace{border-color:#4a3d62}.ace .eyebrow{color:var(--purple)}.aceButton{background:#332946;border-color:#655481;color:#e4d8ff}.ref{display:grid;gap:5px;padding:8px 0;border-bottom:1px solid var(--line)}.ref .name{overflow-wrap:anywhere;font-size:12px}.toast{position:fixed;z-index:3;bottom:15px;right:15px;background:#293742;color:var(--fg);border:1px solid #536e7b;max-width:min(540px,calc(100vw - 30px));border-radius:8px;padding:12px 15px;white-space:pre-wrap;box-shadow:0 8px 24px #0007}.toast.error{background:#452a32;border-color:#825161}
dialog{background:var(--panel);color:var(--fg);border:1px solid #586276;border-radius:13px;padding:18px;width:min(630px,calc(100vw - 25px))}dialog::backdrop{background:#0009}dialog form{display:grid;gap:10px}dialog textarea{width:100%;min-height:220px;resize:vertical}dialog .actions{justify-content:flex-end}
@media(max-width:1110px){.shell{grid-template-columns:190px minmax(0,1fr) 250px}.library{padding-left:13px;padding-right:13px}main{padding-left:13px;padding-right:13px}}
@media(max-width:850px){.shell{grid-template-columns:170px minmax(0,1fr)}.right{grid-column:2;padding:0 13px 20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.library{grid-row:span 2}}
@media(max-width:560px){.shell{display:block}.top{padding:12px}.topActions button{font-size:11px;padding:5px}.topActions .status{display:none}.library{border-right:0;border-bottom:1px solid var(--line);padding:12px}.songTitle{margin-bottom:3px}.miniGrid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}.intro{display:none}#segments{display:flex;gap:5px;overflow:auto}.segment{width:auto;white-space:nowrap}.addRow{margin-top:5px}.titleRow{align-items:flex-end}.segmentActions button{font-size:11px}.right{display:grid}}

.scoreMenu{position:fixed;z-index:4;display:grid;gap:4px;padding:6px;background:var(--panel2);border:1px solid #596577;border-radius:9px;box-shadow:0 10px 28px #0008}.scoreMenu button{text-align:left}
.score .editor{position:sticky;left:0;width:100%;min-width:0;justify-self:start;margin:0 0 5px;padding:9px 10px;background:#f3efe3;border:1px solid #dfd5c3;color:#27261f;color-scheme:light}
.score .editor label,.score .editor #noteIndex{color:#5b5548}
.score .editor button,.score .editor input,.score .editor select{background:#fffdf7;border-color:#cec4af;color:#27261f}
.score .editor button:hover:not(:disabled){background:#e9e1ce;border-color:#a99a7c}
.score .editor .danger{color:#983d39}
.noteQuick{width:100%}
.noteQuick #noteIndex{margin-right:5px;white-space:nowrap;font-weight:700}
.noteQuick button{white-space:nowrap}
.noteInsert{width:100%;align-items:flex-end}
.noteInsert button{white-space:nowrap}
.lyricPreview{padding:10px 12px;background:#151a21;border:1px solid var(--line);border-radius:8px}
.lyricPreview ol{display:grid;gap:5px;max-height:160px;overflow:auto;margin:7px 0 0;padding:0;list-style:none}
.lyricPreview ol:empty{display:none}
.lyricPreview li{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid var(--line)}
.lyricPreview li:last-child{border:0}
.lyricPreview li strong{overflow-wrap:anywhere}
.lyricPreview li span{font-size:12px;color:var(--sub)}
.wholeLyrics{margin-top:12px;padding:10px 12px;background:#151a21;border:1px solid var(--line);border-radius:8px}
.wholeLyrics summary{cursor:pointer;font-weight:700;color:var(--mint)}
.wholeLyricsFields{display:grid;gap:12px;margin-top:10px;max-height:460px;overflow:auto;padding:2px 3px}
.wholeLyricsFields label{display:grid;gap:4px;font-weight:700}
.lyricsPanel .wholeLyricsFields textarea{min-height:72px;margin:0;font-weight:400}
#lyricModes{justify-content:flex-start}
.scoreView{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--sub);font-size:13px}
.scoreToolbar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:8px}
.scoreToolbar .scoreView{margin:0}
.songStyle{display:grid;gap:4px;margin:0 0 12px;color:var(--sub);font-size:12px}
.songStyle input{width:100%;min-width:0;color:var(--fg)}
.score.wholeScore{max-height:none}
.scoreSectionTitle{margin:12px 0 0;padding-top:9px;border-top:1px solid #ddd6c7;font-size:15px}
.scoreSectionTitle:first-child{margin-top:0;padding-top:0;border-top:0}
#transferDialog{width:min(410px,calc(100vw - 25px))}
.transferChoices{display:grid;gap:7px}
.transferChoices button{text-align:left;padding:9px 11px}
.transferChoices label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.ensembleSystem{display:grid;grid-template-columns:100px repeat(var(--bars),minmax(154px,1fr));min-width:max-content;margin:0 0 10px}
.ensembleBarNumber{padding:0 0 2px 8px;color:#625c50;font-size:11px}
.ensemblePart{align-self:center;padding:0 10px 0 2px;font-size:12px;font-weight:700}
.ensembleMeasure{position:relative;min-height:45px;border-left:1px solid #b6ab98;background:#fffdf7}
.ensembleNote{position:absolute;top:0;display:block;padding:0;border:0;border-radius:4px;color:inherit;background:none}
button.ensembleNote:hover,button.ensembleNote[aria-pressed=true]{background:#deeae2;color:#154e35}
.ensembleNote .noteGlyphs{padding-top:0}
.ensembleNote .notationGlyph{width:12px;grid-template-rows:9px 17px 7px 9px}
.ensembleNote .notationDigit{grid-template-columns:5px 10px 5px;line-height:17px}
.ensembleNote .notationNumber,.ensembleNote .notationHold{font-size:15px;line-height:17px}
.ensembleNote .notationAccidental,.ensembleNote .rhythmDots{font-size:9px}
.ensembleNote .rhythmLine{width:8px}