/* staff-editor.css — 在线五线谱编辑器。沿用 ui.css 的纸色 / 森林绿 / 黄铜金变量，所有类名以 se- 开头，避免被全局 button / section 样式带偏。 */
.se{max-width:1040px;margin:0 auto;padding:0 0 28px}
.se section{margin:0}
.se-intro{padding:22px 0 14px}
.se-intro h1{font-size:clamp(28px,4vw,40px);margin:6px 0 6px}
.se-lede{margin:0;color:var(--ink-2);font-size:16px;line-height:1.7;max-width:640px}
.se-lede b{color:var(--green)}

/* ---------- 主舞台：五线谱 + 钢琴 ---------- */
.se-stage{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-up);padding:16px;margin:4px 0 22px}
.se-toolbar{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr .8fr;gap:8px;margin-bottom:12px}
.se-settings{margin:0 0 12px}
.se-settings>summary{display:none;list-style:none;cursor:pointer}
.se-settings>summary::-webkit-details-marker{display:none}
.se-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.se-hintrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.se-field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);font-weight:600;margin:0}
.se-field select{font-size:14px;padding:7px 30px 7px 12px;max-width:160px;text-overflow:ellipsis}
.se-tempo input{width:110px;accent-color:var(--green)}
.se-tempo output{font-variant-numeric:tabular-nums;color:var(--ink);min-width:62px;font-weight:600}

.se-staff{background:#fffdf8;border:1px solid var(--line-2);border-radius:16px;min-height:168px;max-height:min(330px,40vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:inset 0 1px 0 #fff}
.se-staff svg{display:block;width:100%;height:auto}
.se-hint{margin:0 2px;font-size:13px;color:var(--muted);line-height:1.5;min-height:20px;flex:1}
.has-selection .se-hint{color:var(--gold);font-weight:600}

/* ---------- 按钮（覆盖全局绿色胶囊按钮） ---------- */
.se .se-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:8px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;box-shadow:none;transform:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.se .se-btn:hover:not(:disabled){background:var(--green-3);border-color:#b9c9bd;color:var(--green);box-shadow:none;transform:none}
.se .se-btn:active:not(:disabled){transform:translateY(1px)}
.se .se-btn:disabled{opacity:.42;cursor:not-allowed}
.se .se-btn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.se .se-btn.se-primary{background:var(--green);border-color:var(--green);color:#fff}
.se .se-btn.se-primary:hover:not(:disabled){background:var(--green-2);border-color:var(--green-2);color:#fff}
.se .se-btn.se-quiet{background:transparent;color:var(--muted);border-style:dashed}
.se .se-btn.se-link{min-height:38px;border:0;background:transparent;color:var(--green);text-decoration:underline;text-underline-offset:3px;padding:6px 8px;font-size:14px}
.se .se-btn.se-link:hover:not(:disabled){background:var(--green-3)}
.se .se-btn.se-mini{min-height:36px;padding:4px 12px;font-size:13px;border-radius:999px}

/* 时值 */
.se-dur{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:14px}
.se .se-btn.se-d{flex-direction:column;gap:1px;min-height:58px;padding:5px 2px;font-size:12px;border-radius:12px}
.se-d svg{width:26px;height:26px;display:block}
.se-d b{font:700 30px/22px Georgia,serif;height:26px;display:block}
.se-d span{font-size:12px;font-weight:600;white-space:nowrap}
.se .se-btn.se-d-mod{background:var(--soft)}

/* ---------- 钢琴 ---------- */
.se-keys{margin-bottom:14px}
.se-keys-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.se-keys-title{font:700 13px/1 var(--serif);letter-spacing:.1em;color:var(--green)}
.se-oct{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.se-oct output{min-width:64px;text-align:center;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.se-piano-wrap{border-radius:14px;padding:10px 10px 12px;background:linear-gradient(#2f4f43,#1f3a30);box-shadow:inset 0 2px 6px #0006}
.se-piano{position:relative;display:flex;height:clamp(172px,30vw,236px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;border-radius:8px;overflow:hidden;background:#0d1b15}
.se .wkey{flex:1 1 0;position:relative;background:linear-gradient(#fffefb 0%,#f6f1e4 70%,#e9e2cf 100%);border-right:1px solid #b9b19c;border-radius:0 0 9px 9px;cursor:pointer;transition:background .08s}
.se .wkey:last-child{border-right:0}
.se .wkey.pressed,.se .wkey.playing{background:linear-gradient(#f9e6b8,#e7c36d 80%,#d8ab4a)}
.se .wkey .klab{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:12.5px;color:#7b8379;pointer-events:none;line-height:1.3}
.se .wkey .klab b{color:var(--green);font-size:13.5px}
.se .bkey{position:absolute;top:0;height:60%;transform:translateX(-50%);background:linear-gradient(#3a423d,#101512 90%);border:1px solid #070a08;border-top:0;border-radius:0 0 7px 7px;z-index:2;cursor:pointer;box-shadow:0 4px 6px #0006,inset 0 -3px 3px #ffffff14}
.se .bkey.pressed,.se .bkey.playing{background:linear-gradient(#b98a2f,#8a6420)}
.se-kb{display:none;font-size:11px;color:#9aa398;margin-top:2px}
.se .bkey .se-kb{position:absolute;left:0;right:0;bottom:7px;text-align:center;color:#c9d1c6;margin:0}
@media (hover:hover) and (pointer:fine){.se-kb{display:block}}

/* 主操作 */
.se .se-btn.se-play{background:var(--green);border-color:var(--green);color:#fff;font-size:17px;min-height:50px}
.se .se-btn.se-play:hover:not(:disabled){background:var(--green-2);border-color:var(--green-2);color:#fff}
.se .se-btn.se-play[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.se-toolbar .se-btn{min-height:50px}
.se-kbd{display:none;margin:14px 2px 0;font-size:12.5px;color:var(--muted);line-height:2}
.se-kbd kbd{font-family:inherit;font-weight:600;font-size:12px;line-height:1;display:inline-block;margin:0 2px;padding:3px 7px;background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.se-kbd{display:block}}

/* ---------- 导出、说明、FAQ ---------- */
.se-export{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:0 0 34px}
.se-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow)}
.se-card h2{font-size:19px;margin:0 0 6px}
.se-card p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px;line-height:1.75}
.se-card .se-fine{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.se-row{display:flex;flex-wrap:wrap;gap:8px}
.se-how h2,.se-faq h2{font-size:clamp(21px,2.4vw,26px);margin:0 0 14px}
.se-steps{list-style:none;margin:0 0 38px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.se-steps li{border-top:1px solid var(--line);padding:18px 4px 0}
.se-steps b{font:600 22px Georgia,serif;color:var(--gold)}
.se-steps h3{font-size:17px;margin:4px 0 6px}
.se-steps p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.75}
.se-faq{margin-bottom:12px}
.se-faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:0 0 10px;padding:0 18px}
.se-faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.se-faq summary::-webkit-details-marker{display:none}
.se-faq summary::after{content:"+";font:400 22px/1 Georgia,serif;color:var(--gold);transition:transform .2s}
.se-faq details[open] summary::after{transform:rotate(45deg)}
.se-faq details p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px;line-height:1.85}
.se-faq details a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

.se-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:92vw;text-align:center;box-shadow:0 8px 24px #0004}
.se-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 手机 ---------- */
@media (max-width:760px){
  .se-export{grid-template-columns:1fr}
  .se-steps{grid-template-columns:1fr;gap:6px}
}
@media (max-width:600px){
  .se-intro{padding:8px 0 6px}
  .se-intro .eyebrow{display:none}
  .se-intro h1{font-size:25px;margin:0 0 2px}
  .se-lede{display:none}
  .se-stage{padding:10px;border-radius:18px;margin-bottom:18px}
  .se-toolbar{grid-template-columns:1.3fr 1.1fr .55fr .55fr .75fr;gap:6px;margin-bottom:8px}
  .se-toolbar .se-btn{white-space:nowrap}
  .se-toolbar .se-btn{min-height:44px;padding:4px 6px;font-size:14px}
  .se .se-btn.se-play{min-height:44px;font-size:15px}
  .se-t{display:none}
  .se-toolbar #btnBack .se-t{display:inline}
  .se-settings{margin-bottom:8px}
  .se-settings>summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:13px;font-weight:600;color:var(--ink)}
  .se-settings>summary i{font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
  .se-settings>summary i::after{content:" ▾"}
  .se-settings[open]>summary i::after{content:" ▴"}
  .se-settings[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .se-settings .se-bar{padding:10px 12px;border:1.5px solid var(--line);border-top:0;border-radius:0 0 12px 12px;gap:8px 12px}
  .se-field{font-size:12px;gap:5px}
  .se-field select{font-size:13px;padding:6px 26px 6px 10px;max-width:130px}
  .se-tempo{flex:1 1 100%}
  .se-tempo input{flex:1;width:auto;min-width:70px}
  .se-staff{min-height:118px;max-height:clamp(118px,21vh,200px)}
  .se-hintrow{margin-bottom:8px}
  .se-hint{font-size:12px;min-height:18px}
  .se .se-btn.se-link{font-size:13px;white-space:nowrap;padding:4px 4px}
  .se-dur{gap:4px;margin-bottom:8px}
  .se .se-btn.se-d{min-height:50px}
  .se-d svg{width:22px;height:22px}
  .se-d span{font-size:11px}
  .se-keys{margin-bottom:0}
  .se-keys-bar{margin-bottom:6px}
  .se-keys-title{display:none}
  .se-oct{width:100%;justify-content:space-between}
  .se-piano-wrap{padding:6px 6px 8px;border-radius:12px}
  .se-piano{height:clamp(140px,22vh,190px)}
  .se .wkey .klab{bottom:6px;font-size:12px}
  .se-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){.se *{transition:none!important}}