/* 音乐创作工作室 /tools/music_studio —— 样式（纯前端，复用站点主题变量） */
body.page-music-studio-full .app { max-width: 100%; }
body.page-music-studio-full .main-content { max-width: 100%; width: 100%; border-right: 0; }

.ms-page {
  --ms-bg: var(--bg-primary, #fff);
  --ms-panel: var(--bg-secondary, #f4f6fa);
  --ms-line: var(--border-color, #e6e9f0);
  --ms-text: var(--text-primary, #1c2330);
  --ms-sub: var(--text-secondary, #6b7385);
  --ms-accent: #136ce9;
  --ms-accent-soft: rgba(19,108,233,.12);
  --ms-cell: #fbfcfe;
  --ms-cell2: #f1f4f9;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-h, 56px));
  min-height: 520px;
  color: var(--ms-text);
  font-size: 14px;
  background: var(--ms-bg);
}
.ms-page *, .ms-page *::before, .ms-page *::after { box-sizing: border-box; }

/* ---------- 传输条 ---------- */
.ms-transport {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--ms-panel);
  border-bottom: 1px solid var(--ms-line);
  flex-wrap: wrap;
}
.ms-tr-l, .ms-tr-m, .ms-tr-r { display: flex; align-items: center; gap: 12px; }
.ms-tr-r { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ms-pos {
  font-variant-numeric: tabular-nums; min-width: 96px;
  color: var(--ms-sub); font-size: 13px;
}
.ms-ctl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ms-sub); }
.ms-ctl-inline { cursor: pointer; }
.ms-input {
  border: 1px solid var(--ms-line); background: var(--ms-bg);
  color: var(--ms-text); border-radius: 8px; padding: 6px 8px; font-size: 13px;
}
.ms-input-sm { width: 64px; }
.ms-name { width: 150px; }
.ms-range { width: 96px; accent-color: var(--ms-accent); }
.ms-sep { width: 1px; height: 22px; background: var(--ms-line); margin: 0 2px; }

/* ---------- 按钮 ---------- */
.ms-btn {
  border: 1px solid var(--ms-line); background: var(--ms-bg); color: var(--ms-text);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s; white-space: nowrap;
}
.ms-btn:hover { border-color: var(--ms-accent); }
.ms-btn:active { transform: translateY(1px); }
.ms-btn:disabled { opacity: .45; cursor: not-allowed; }
.ms-btn-ghost { background: transparent; }
.ms-btn-primary { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }
.ms-btn-primary:hover { filter: brightness(1.05); }
.ms-btn-mini { padding: 2px 9px; border-radius: 7px; font-size: 15px; line-height: 1; }
.ms-btn-sm { padding: 5px 9px; font-size: 12px; }
.ms-play { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; font-size: 14px; width: 40px; }

/* ---------- 主体布局 ---------- */
.ms-body { flex: 1; display: flex; min-height: 0; }
.ms-side {
  width: 232px; flex: 0 0 232px;
  border-right: 1px solid var(--ms-line);
  display: flex; flex-direction: column; background: var(--ms-panel);
}
.ms-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; font-weight: 600; font-size: 13px;
}
.ms-tracks { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.ms-side-foot { padding: 10px 14px; border-top: 1px solid var(--ms-line); }
.ms-hint { font-size: 11px; color: var(--ms-sub); line-height: 1.5; }

/* 轨道卡片 */
.ms-track {
  border: 1px solid var(--ms-line); border-radius: 11px;
  background: var(--ms-bg); padding: 9px 10px; margin-bottom: 9px; cursor: pointer;
  position: relative;
}
.ms-track.is-sel { border-color: var(--ms-accent); box-shadow: 0 0 0 2px var(--ms-accent-soft); }
.ms-track-top { display: flex; align-items: center; gap: 8px; }
.ms-track-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ms-track-name { flex: 1; border: 0; background: transparent; color: var(--ms-text);
  font-size: 13px; font-weight: 600; min-width: 0; padding: 2px 0; }
.ms-track-name:focus { outline: none; border-bottom: 1px solid var(--ms-accent); }
.ms-track-x { color: var(--ms-sub); border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 0 2px; }
.ms-track-x:hover { color: #e23; }
.ms-track-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.ms-track-kind { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--ms-line); color: var(--ms-sub); }
.ms-track-kind.is-drum { background: #fff3e6; border-color: #ffd8a8; color: #c65b00; }
.ms-track-kind.is-melody { background: #e9f2ff; border-color: #b9d6ff; color: #136ce9; }
.ms-track-ctrl { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ms-icbtn { width: 26px; height: 24px; border: 1px solid var(--ms-line); background: var(--ms-bg);
  border-radius: 7px; cursor: pointer; font-size: 11px; color: var(--ms-sub); padding: 0; }
.ms-icbtn.on { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }
.ms-track-vol { width: 70px; accent-color: var(--ms-accent); }
.ms-track-timbre { width: 100%; margin-top: 7px; border: 1px solid var(--ms-line); border-radius: 7px;
  padding: 4px 6px; font-size: 12px; background: var(--ms-bg); color: var(--ms-text); }

/* ---------- 主区域 ---------- */
.ms-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ms-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-bottom: 1px solid var(--ms-line); background: var(--ms-panel); }
.ms-tab { border: 0; background: transparent; color: var(--ms-sub); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; }
.ms-tab.is-active { background: var(--ms-bg); color: var(--ms-text); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ms-tab-spacer { flex: 1; }
.ms-pat { display: flex; align-items: center; gap: 6px; }
.ms-pat-label { font-size: 12px; color: var(--ms-sub); }
.ms-pat-chips { display: inline-flex; gap: 4px; }
.ms-pat-chip { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--ms-line); background: var(--ms-bg);
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ms-sub); padding: 0; }
.ms-pat-chip.is-sel { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }

.ms-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.ms-pane.is-active { display: flex; }

/* 编辑面板 */
.ms-editor-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.ms-editor-title { font-weight: 600; font-size: 14px; }
.ms-editor-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ms-zoom { font-size: 12px; color: var(--ms-sub); display: flex; align-items: center; gap: 6px; }

.ms-grid-wrap { flex: 1; overflow: auto; position: relative; padding: 0 16px 16px; }
.ms-grid { position: relative; display: grid; --ms-rows: 37; --ms-cols: 64; user-select: none; }
.ms-keys { position: sticky; left: 0; }
.ms-cell {
  border-right: 1px solid var(--ms-cell2);
  border-bottom: 1px solid var(--ms-cell2);
  background: var(--ms-cell);
  position: relative;
}
.ms-cell.beat { background: var(--ms-cell2); }
.ms-cell.bar { border-right: 1px solid #c5ccda; }
.ms-cell.is-key { background: #fdfdfd; }
.ms-cell.is-key.beat { background: #f3f4f8; }
/* 鼓机网格 */
.ms-cell.drum { }
.ms-cell.drum.on { background: var(--ms-accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.ms-cell.drum.on.vel-hi { background: #0a4fb0; }
/* 旋律音符 */
.ms-note {
  position: absolute; top: 2px; bottom: 2px; left: 1px; right: 1px;
  background: var(--ms-accent); border-radius: 4px; cursor: pointer;
  min-width: 4px;
}
.ms-note.vel-hi { background: #0a4fb0; }
.ms-rowlabel {
  position: sticky; left: 0; z-index: 3;
  background: var(--ms-panel); border-right: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-cell2);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 6px; font-size: 10px; color: var(--ms-sub);
}
.ms-rowlabel.sharp { color: #b9c0cf; }
.ms-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #e2333b;
  pointer-events: none; z-index: 4; left: 0;
  /* 播放头用 transform 位移（JS 侧）：只走合成层，不触发逐帧回流 */
  transform: translateX(0); will-change: transform;
}
.ms-playhead[hidden] { display: none; }
/* 拖动中的音符临时关闭命中测试：否则 elementFromPoint 永远命中音符自身，拖长音符会失效 */
.ms-note.ms-dragging { pointer-events: none; }

/* 编排面板 */
.ms-arr-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.ms-arr-title { font-weight: 600; font-size: 15px; }
.ms-sections { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.ms-section {
  border: 1px solid var(--ms-line); border-radius: 12px; background: var(--ms-bg); padding: 12px;
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
}
.ms-sec-handle { cursor: grab; color: var(--ms-sub); text-align: center; user-select: none; font-size: 16px; }
.ms-sec-body { min-width: 0; }
.ms-sec-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-sec-name { border: 1px solid var(--ms-line); border-radius: 8px; padding: 5px 8px; font-size: 13px; font-weight: 600; width: 150px; background: var(--ms-bg); color: var(--ms-text); }
.ms-sec-bars { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ms-sub); }
.ms-sec-bars input { width: 52px; border: 1px solid var(--ms-line); border-radius: 7px; padding: 4px 6px; font-size: 12px; background: var(--ms-bg); color: var(--ms-text); }
.ms-sec-ops { margin-left: auto; display: flex; gap: 5px; }
.ms-sec-tracks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ms-sec-track { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ms-sec-track .nm { width: 120px; color: var(--ms-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sec-track select { border: 1px solid var(--ms-line); border-radius: 7px; padding: 4px 6px; font-size: 12px; background: var(--ms-bg); color: var(--ms-text); }
.ms-arr-note { padding: 6px 16px 16px; font-size: 12px; color: var(--ms-sub); line-height: 1.6; }

/* 拖拽排序占位 */
.ms-section.dragging { opacity: .4; }
.ms-section.drop-before { box-shadow: 0 -3px 0 var(--ms-accent); }

/* Toast */
.ms-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: #1c2330; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; z-index: 9999; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.ms-toast[hidden] { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .ms-side { width: 168px; flex-basis: 168px; }
  .ms-tr-m .ms-ctl:nth-child(2) { display: none; } /* 窄屏只收起「摇摆」，保留主音量与循环 */
}
@media (max-width: 680px) {
  .ms-page { height: auto; min-height: 100vh; }
  .ms-body { flex-direction: column; }
  .ms-side { width: 100%; flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--ms-line); }
  .ms-tracks { max-height: 200px; }
  .ms-transport { gap: 8px; padding: 8px 10px; }
  .ms-tr-r { width: 100%; }
  .ms-name { width: 110px; }
  .ms-zoom { display: none; }
}