/* ===== 全局 ===== */
* { box-sizing: border-box; }
/* 桌面端隐藏 mobile-only，移动端显示 */
.mobile-only { display: none; }
/* 桌面端隐藏移动端曲名 */
.mobile-song-title { display: none; }
/* 桌面端隐藏移动端 Solo 大标题 banner */
.mobile-solo-banner { display: none; }
/* 管理员专属控件：默认隐藏，body.user-is-admin 时显示 */
.admin-only { display: none !important; }
body.user-is-admin .admin-only { display: inline-block !important; }
/* ========== 开场信号Call样式 ========== */
.call-section {
  border: 1px dashed #90a4ae;
  background: #fafafa;
}
.call-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.call-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.call-hint {
  opacity: 0.7;
}
/* 开场信号展开按钮样式和曲目标签保持一?*/
#toggleCallSection {
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
}
.call-content.collapsed { display: none; }
.call-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
  align-items: center;
}
.call-track-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #eceff1;
  border-radius: 4px;
  font-size: 12px;
}
.call-add-track {
  margin: 4px 0 8px;
}
.pickup-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.pickup-hint {
  margin-left: 8px;
}
/* 信号格子谱比伴奏窄一点，因为只有1小节 */
.call-score-panel {
  padding: 8px;
  background: #fff;
}
.score.call-score {
  grid-auto-columns: minmax(28px, 36px);
}
/* 非编辑模式不强制隐藏，允许展开查看，只是控件只读变?*/
body:not(.is-editing) .call-content input,
body:not(.is-editing) .call-content button {
  opacity: 0.5;
  pointer-events: none;
}

/* ========== 标签折叠样式 ========== */
.tags-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
}
.tags-collapse-header strong {
  font-size: 18px;
}
.tags-collapse-header .toggle-hint {
  color: #666;
  font-size: 14px;
}
.tags-panel-wrapper {
  margin-top: 8px;
  overflow: hidden;
  max-height: 800px;
  transition: max-height 0.3s ease;
}
.tags-panel-wrapper.collapsed {
  max-height: 0;
  margin-top: 0;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f5f7;
  color: #222;
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* 由内部子容器负责滚动 */
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
}

.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; }
.topbar h1 .brand-en { font-size: 12px; font-weight: 500; opacity: 0.65; margin-left: 6px; letter-spacing: 0.3px; }

.ver { font-size: 12px; color: #999; }

.topbar-spacer { flex: 1; }

.topbar .icon-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #444;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  /* also used on <a> (关于我们): make links render identically to buttons */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font: inherit;
  line-height: 1.4;
}

.topbar .icon-btn:hover { background: #333; }

.topbar button:not(.icon-btn) {
  background: #333;
  color: #fff;
  border: 1px solid #555;
}

.topbar button:not(.icon-btn):hover { background: #444; }


/* ===== 双栏布局 ===== */
.layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;            /* 关键：让子元素能收缩?flex 高度 */
  max-width: 100%;
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.sidebar-close-btn { display: none; }

.sidebar-header .badge {
  background: #d9531e;
  color: #fff;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
}

.sidebar-actions {
  padding: 8px 14px;
  display: flex;
  gap: 6px;
}

.sidebar-actions button {
  flex: 1;
  padding: 6px 8px;
  font-size: 13px;
}

.sidebar-search {
  padding: 4px 14px 8px;
}

.sidebar-search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
}


body.sidebar-collapsed .sidebar {
  width: 0;
  border-right: none;
}

body.sidebar-collapsed .sidebar > * { display: none; }


.main {
  flex: 1;
  padding: 16px;
  min-width: 0;         /* 让格子区能横向滚?*/
  overflow-y: auto;     /* 主区独立纵向滚动，不影响侧栏 */
  overflow-x: auto;
  height: 100%;
}

main { max-width: none; margin: 0; padding: 16px; }


/* ===== 面板 ===== */
.panel {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.row + .row { margin-top: 10px; }

label { display: flex; align-items: center; gap: 6px; font-size: 14px; }

input[type="text"], input[type="number"], select {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
textarea {
  font-size: 14px;
  font-family: inherit;
  color: inherit;
}
#customNoteTextarea {
  font-size: 18px;
}

input[type="number"] { width: 70px; }

input[type="text"] { width: 200px; }

button {
  padding: 6px 14px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

button:hover { background: #f0f0f0; }

button.primary { background: #d9531e; color: #fff; border-color: #d9531e; }

button.primary:hover { background: #c04617; }

button.danger { background: #fff; color: #c00; border-color: #f0b0b0; }

button.danger:hover { background: #fff0f0; }

.hint { font-size: 12px; color: #888; }


/* ===== 格子?===== */
.score-panel { padding: 24px 16px 16px; overflow-x: auto; }

.solo-header-panel {
  background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
  border-left: 4px solid #f59e0b;
}

.solo-score-panel {
  background: #fffaf0;
  border-left: 4px solid #f59e0b;
}

.solo-score-panel .track-label {
  background: #fef3c7;
  color: #222;
}
.solo-score-panel .track-label input,
.solo-score-panel .track-label select {
  color: #222 !important;
  background: #fff !important;
}
/* Solo只读模式禁用也保持黑色文字，因为背景?*/
main.readonly-mode .solo-score-panel .track-label input:disabled,
main.readonly-mode .solo-score-panel .track-label select:disabled {
  background-color: #e8e0cc !important;
  color: #222 !important;
  border-color: #999 !important;
  opacity: 0.8 !important;
}

.score {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: fit-content;
}

.track {
  display: flex;
  align-items: stretch;
  gap: 0;
}
/* 过渡小节：浅绿底?+ 可点选编辑（与循环小节一样） */
.transition-cell {
  background-color: #e8f5e8 !important;
}

.track-label {
  min-width: 300px;
  padding: 6px 10px;
  background: #2a2a2a;
  color: #fff;
  border-radius: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
/* v0.19 修复：spacer 隐形等宽占位条（之前误用 .track-label 类导致黑横条 + cells 被推窄）
   关键：透明背景 + 无文字色 + 不继?.track-label ?padding/background
   grid 布局下，第一列宽?= max(所有行?label/spacer 实际宽度)?
   spacer 的实际宽度由它的 min-width 决定，所以这里给一个保守兜底?
   （真渲染时一般会由同?label 的自然宽度带起来?*/
.track-label-spacer {
  flex-shrink: 0;
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 100px; /* 兜底：避免空内容宽度?0 ?grid 压扁 */
}

.track-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.track-label-top { }

.track-label-bottom { }

.track-label input[type="text"] {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  font-size: 13px;
  width: 100px;
  padding: 2px 4px;
}

.track-label input[type="text"]:hover,
.track-label input[type="text"]:focus {
  border-color: #555; outline: none;
}

.track-label input[type="text"]:focus {
  background: #444;
  outline: none;
}

.track-label select {
  background: #444;
  color: #fff;
  border: 1px solid #555;
  font-size: 12px;
  padding: 2px 4px;
}

.track-label .del {
  background: transparent;
  border: none;
  color: #f88;
  font-size: 16px;
  padding: 2px 6px;
  cursor: pointer;
}


/* 轨道右侧的图标按钮组 */
.track-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.track-label .ticon {
  background: transparent;
  border: 1px solid #555;
  color: #ddd;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}

.track-label .ticon:hover { background: #555; color: #fff; }

.track-label .ticon.del { color: #f88; border-color: #7a3a3a; }

.track-label .ticon.del:hover { background: #7a3a3a; color: #fff; }


/* M / S 迷你按钮 */
.mini-btn {
  background: transparent;
  color: #ccc;
  border: 1px solid #555;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  min-width: 22px;
}
.mini-btn.start-at {
  min-width: 30px;
}
.mini-btn.start-at:has(~):not(:empty) { /* 起点? */
  background: #e6f7ff;
  border-color: #1890ff;
  color: #1890ff;
}

.mini-btn:hover { background: #444; color: #fff; }

.mini-btn.on {
  background: #d9531e;
  color: #fff;
  border-color: #d9531e;
}

.mini-btn.solo.on {
  background: #f0a020;
  color: #fff;
  border-color: #f0a020;
}


/* 音量滑条 */
.vol-slider {
  flex: 1;
  min-width: 60px;
  max-width: 90px;
  height: 4px;
  cursor: pointer;
  accent-color: #d9531e;
}

/* 每个声部独立的过?循环小节数控?*/
.track-trans-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.track-trans-label input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
  accent-color: #7cb342;
}
.track-bar-count {
  width: 36px;
  background: #444;
  color: #fff;
  border: 1px solid #555;
  font-size: 11px;
  padding: 1px 3px;
  text-align: center;
  border-radius: 3px;
  -moz-appearance: textfield;
}
.track-bar-count::-webkit-inner-spin-button,
.track-bar-count::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 只读模式隐藏过渡/barCount控件 */
main.readonly-mode .track-trans-label,
main.readonly-mode .track-bar-count {
  display: none !important;
}


/* A-B 状态信?*/
.loop-info {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.loop-info-both {
  background: #e3f2fd;
  color: #1565c0;
}

.loop-info-partial {
  background: #fff3e0;
  color: #e65100;
}


/* A-B 循环范围高亮 */
.cell.in-loop {
  box-shadow: inset 0 3px 0 #2196f3, inset 0 -3px 0 #2196f3;
}
/* 段落循环高亮 */
.cell.in-para-loop {
  background-color: #f3e5f5; /* 浅紫色背景区?*/
}
.cell.para-start {
  border-left: 3px solid #7b1fa2;
}
.cell.para-end {
  border-right: 3px solid #7b1fa2;
}

/* A：起始格的左上角，蓝?*/
.cell.loop-a::before {
  content: 'A';
  position: absolute;
  top: -14px;
  left: 2px;
  font-size: 11px;
  color: #2196f3;
  font-weight: bold;
  line-height: 1;
}

/* B：结束格的右上角，粉?*/
.cell.loop-b::after {
  content: 'B';
  position: absolute;
  top: -14px;
  right: 2px;
  font-size: 11px;
  color: #e91e63;
  font-weight: bold;
  line-height: 1;
}
/* 每个声部自己的弱起起点：在格子顶部居中画一面小三角?*/
/* 旗杆 */
.cell.pickup-start::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 6px;
  background: #ff9800;
  transform: translateX(-50%);
}
/* 旗子（用 ::after 因为 ::before 被旗杆占用了?*/
.cell.pickup-start::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #ff9800;
  transform: translateX(0);
}


/* ===== 曲库列表（侧边栏?===== */
.song-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.song-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: #fafafa;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}

.song-item:hover { background: #f0f0f0; }

.song-item.active {
  background: #fff3ec;
  border-color: #d9531e;
}

.song-item .song-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.song-item .song-title {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.song-item.active .song-title { color: #d9531e; }

.song-item .song-meta {
  font-size: 11px;
  color: #999;
}

.song-item .song-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.1s;
}

.song-item:hover .song-actions,
.song-item.active .song-actions {
  opacity: 1;
}

.song-item .ticon {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}

.song-item .ticon:hover { background: #eee; }

.song-item .ticon.del { color: #c00; border-color: #f0b0b0; }

.song-item .ticon.del:hover { background: #fff0f0; }

.empty-hint {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 13px;
}


/* ===== 侧边栏筛选面?===== */
.sidebar-filters {
  padding: 0 10px 6px;
  border-bottom: 1px solid #f0f0f0;
  max-height: 30vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.filter-group {
  margin-bottom: 4px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 4px 8px;
  background: #fafafa;
}

.filter-group summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  padding: 2px 0;
  user-select: none;
}

.filter-group summary:hover { color: #d9531e; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 4px;
}

.badge-sm {
  background: #d9531e;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
}

.clear-filter {
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  background: #fff3ec;
  border: 1px solid #d9531e;
  color: #d9531e;
  border-radius: 4px;
  cursor: pointer;
}

.clear-filter:hover { background: #ffe0cc; }


/* ===== 通用 chip（标签片?==== */
.chip {
  display: inline-block;
  padding: 3px 10px;
  background: #eee;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s;
}

.chip:hover { background: #ffe0cc; border-color: #d9531e; color: #d9531e; }

.chip.chip-on {
  background: #d9531e;
  color: #fff;
  border-color: #d9531e;
}

.chip.chip-on:hover { background: #b0431a; }

.chip.mini { padding: 2px 8px; font-size: 11px; }

.chip.chip-add {
  background: transparent;
  border: 1px dashed #aaa;
  color: #666;
  font-weight: normal;
}

.chip.chip-add:hover { background: #f5f5f5; color: #d9531e; border-color: #d9531e; }


/* ===== 主区当前曲子的标签面?===== */
.tags-panel { padding: 4px 0; }

.tag-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.tag-row:last-child { border-bottom: none; }

.tag-dim-label {
  flex-shrink: 0;
  width: 70px;
  padding-top: 4px;
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.tag-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}


/* ===== 曲子列表里的迷你标签 ===== */
.song-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.mini-tag {
  font-size: 10px;
  padding: 1px 6px;
  background: #eaeaea;
  color: #666;
  border-radius: 8px;
}

.song-item.active .mini-tag {
  background: #ffddc4;
  color: #a3401a;
}

.cells {
  display: flex;
  flex: 1;
  gap: 0;
}

.cell {
  width: 28px;
  height: 40px;
  border: 1px solid #ddd;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  background: #fafafa;
  transition: background 0.05s;
  position: relative;
}

.cell:first-child { border-left: 1px solid #ddd; }

/* 音色符号包裹层：格子谱下作为普通 inline 元素由 cell 的 flex 居中 */
.cell-glyph { display: inline-block; }

/* 偶数拍空白格 = 浅蓝半透明，方便细分多时快速识别拍位置（hit 格被后续 .cell.hit-* 规则盖住） */
.cell[data-beat-in-bar="2"],
.cell[data-beat-in-bar="4"],
.cell[data-beat-in-bar="6"],
.cell[data-beat-in-bar="8"],
.cell[data-beat-in-bar="10"],
.cell[data-beat-in-bar="12"],
.cell[data-beat-in-bar="14"],
.cell[data-beat-in-bar="16"] {
  background: rgba(187, 222, 251, 0.45);
}

.cell:hover { background: #ffeadb; }


/* 每一拍的第一个格子加粗左边线 */
.cell.beat-start { border-left: 2px solid #666; }

/* 每一小节的第一个格子加更粗的左边线 */
.cell.bar-start { border-left: 3px solid #222; }


/* 格子里的音色显示 */
.cell.hit-B { background: #d9531e; color: #fff; }
         /* Bass ?- 深橙 */
.cell.hit-T { background: #f0a020; color: #fff; }
         /* Tone ?- ?*/
.cell.hit-S { background: #ffd54f; color: #333; }
         /* Slap ?- ?*/
.cell.hit-MS { background: #8a5a3f; color: #fff; }
        /* Muffled Slap 高音制音 - 深褐 */
.cell.hit-MT { background: #a06a3a; color: #fff; }
        /* Muffled Tone 中音制音 - ?*/
.cell.hit-SS { background: #ffb040; color: #fff; }
        /* Slap 倚音 - 橙黄 */
.cell.hit-TT { background: #e08820; color: #fff; }
        /* Bass Tone 低音中音倚音 - 深棕?*/
.cell.hit-BT { background: #bf6010; color: #fff; }
        /* Bass Slap 低音高音倚音 - 浅橙?*/
.cell.hit-BS { background: #f8b860; color: #333; }
        /* Tone 倚音 - 深橙?*/
.cell.hit-O { background: #2a2a2a; color: #fff; }
         /* Open ?- ?*/
.cell.hit-M { background: #666; color: #fff; }
            /* Mute ?- ?*/
.cell.hit-X { background: #6a1b9a; color: #fff; }
         /* Bell ?- ?*/
/* 两字符音符要缩小字号，才装得?*/
.cell.hit-MS, .cell.hit-MT, .cell.hit-SS, .cell.hit-TT,
.cell.hit-BT, .cell.hit-BS {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.5px;
}


/* 播放光标：以「拍」为单位，柔和一点，不要满屏?*/
.cell.playing {
  outline: 2px solid rgba(33, 150, 243, 0.65);
  outline-offset: -2px;
  z-index: 2;
}

/* 满屏"当前小节整片?太吵了，去掉。in-playing-bar 保留 class 兼容旧逻辑，不给样式?*/
.cell.in-playing-bar { /* no-op */ }


/* ===== Solo ?折行布局 ===== */
.score.wrap-per-bar .track {
  /* v0.19 改造：?grid 布局代替 flex 布局，彻底解决多折行 label/spacer 对齐问题
     - grid-template-columns: auto 1fr
       - 第一列宽?= max(?track 所有行?label/spacer 实际宽度)
         ?grid 自动让每行的第一列宽度一致（按最宽那?cell 决定?
       - 第二列宽?= 剩余空间
     - grid-template-rows: auto
       - 每行高度按内容自适应
  */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

.score.wrap-per-bar .bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* v0.19: ?grid 容器里，flex: 1 不起作用，改?grid-column: 2 占第二列 */
  grid-column: 2;
  min-width: 0; /* 防止内容撑爆 grid 单元 */
}

.score.wrap-per-bar .bar-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 4px;
  padding: 2px;
  transition: background 0.15s, box-shadow 0.15s;
}
/* 过渡小节（信号后）单独背景色标注 */
.score.wrap-per-bar .bar-row.transition-bar {
  background: #e8f5e9; /* 浅绿背景，一眼看出是过渡 */
  border: 1px dashed #4caf50;
  /* v0.19 改造：整行宽度跟随 flex 容器自然铺满（和循环?100% 同宽），
     之前 align-self: flex-start 配合内联 width 已被取消
  */
}
.score.wrap-per-bar .bar-row.transition-bar .bar-num {
  color: #2e7d32;
  font-weight: 600;
}

.score.wrap-per-bar .bar-num {
  width: 50px;
  flex-shrink: 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
  font-weight: bold;
  font-size: 13px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 3px 0 0 3px;
}

/* Solo 折行下：track-label 只占顶部一小段视觉上更清爽 */
.score.wrap-per-bar .track-label {
  border-radius: 4px 0 0 4px;
  align-self: flex-start;
  position: sticky;
  top: 0;
}

/* Solo 区的 ruler：只显示 1 小节宽，加上小节号槽位对?*/
.score.wrap-per-bar .ruler {
  padding-left: calc(300px + 32px + 2px);
}


/* 🎯 当前正在播放的小节（折行 solo?*/
.bar-row.playing-bar {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.15) 100%);
  box-shadow: 0 0 0 2px #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.4);
}

.bar-row.playing-bar .bar-num {
  background: #f59e0b;
  color: #fff;
  transform: scale(1.1);
  transition: all 0.15s;
}


/* Solo 变拍细分：每一拍是一?beat-block，等?*/
.beats-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  flex: 1;
}

.beat-block {
  display: flex;
  flex-direction: column;
  border-left: 2px solid #666;
  min-width: 0;
}

.beat-block:first-child {
  border-left: 3px solid #222; /* 小节起始，更?*/
}

.beat-ctrl {
  padding: 2px 4px;
  background: #fff3d9;
  border-bottom: 1px solid #f3d78b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beat-ctrl select {
  background: #fff;
  border: 1px solid #f3c968;
  color: #b45309;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
}

.beat-cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  flex: 1;
}

/* 拍内?cell：宽度自适应，最小保证可?*/
.beat-block .cell {
  width: auto;
  min-width: 10px;
  border-left: 1px solid #ddd;
}

.beat-block .cell.beat-first {
  border-left: none; /* 拍首格的左边线已?beat-block 提供 */
}

/* 三连?6 连音的拍块视觉上稍作强调 */
.beat-block[data-sub="3"] { background: rgba(155, 89, 182, 0.06); }

.beat-block[data-sub="6"] { background: rgba(155, 89, 182, 0.08); }

.beat-block[data-sub="3"] .beat-ctrl,
.beat-block[data-sub="6"] .beat-ctrl {
  background: #e8daf5;
  border-color: #b085d6;
}

.beat-block[data-sub="3"] .beat-ctrl select,
.beat-block[data-sub="6"] .beat-ctrl select {
  border-color: #9b59b6;
  color: #6a1b9a;
}

/* 复合细分（一拍分多段，如 3+2）：暖橙色调 */
.beat-block.beat-compound {
  background: rgba(230, 126, 34, 0.08);
}

.beat-block.beat-compound .beat-ctrl {
  background: #fce5cd;
  border-color: #e67e22;
}

.beat-block.beat-compound .beat-ctrl select {
  border-color: #e67e22;
  color: #b8541a;
  font-weight: 600;
}

/* 段容器：段宽?flex-grow 决定（即时值权重），段内格子等分段?*/
.beat-block .beat-cells {
  display: flex;
  flex-wrap: nowrap;
  min-height: 32px;
  align-items: stretch;
}

.beat-block .seg-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  position: relative;
  min-width: 0;
}

.beat-block .seg-wrap > .cell {
  flex: 1 1 0;
  min-width: 0;
}

/* 段之间的边界线（除第一段外的段起点?*/
.beat-block .seg-wrap.seg-boundary {
  border-left: 2px dashed #e67e22;
}

/* 三连括号：⌐3?样式，飘在段上方 */
.beat-block .seg-wrap.has-tuplet-mark {
  margin-top: 13px;
}

.beat-block .seg-wrap.has-tuplet-mark .tuplet-mark {
  position: absolute;
  top: -12px;
  left: 1px;
  right: 1px;
  height: 11px;
  border-top: 1.5px solid #b8541a;
  border-left: 1.5px solid #b8541a;
  border-right: 1.5px solid #b8541a;
  border-radius: 3px 3px 0 0;
  color: #b8541a;
  font-size: 10px;
  font-weight: 700;
  line-height: 8px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}

/* 数字?span，浮在横线中间白?*/
.beat-block .seg-wrap.has-tuplet-mark .tuplet-mark {
  background: #fff;
}


/* 拍号刻度?*/
.ruler {
  display: flex;
  padding-left: 300px;
  margin-bottom: 4px;
  font-size: 11px;
  color: #888;
}

.ruler .tick {
  width: 28px;
  text-align: center;
  border-left: 1px solid transparent;
}

.ruler .tick.beat-start { color: #333; font-weight: bold; }

.ruler .tick.bar-start { color: #000; }


/* ===== 其它 ===== */
footer {
  text-align: center;
  color: #aaa;
  font-size: 12px;
  margin-top: 20px;
}

details { margin-top: 8px; font-size: 12px; }

pre {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
  font-size: 11px;
}


/* 移动端适配 */
@media (max-width: 800px) {
  .layout { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    max-height: 240px;
    position: static;
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }

  body.sidebar-collapsed .sidebar {
    max-height: 0;
  }

}

@media (max-width: 640px) {
  .cell { width: 22px; height: 36px; font-size: 13px; }

  .track-label { min-width: 220px; font-size: 12px; }

  .track-label input[type="text"] { width: 70px; }

  .ruler { padding-left: 220px; }

  .ruler .tick { width: 22px; }

  /* 与 768px 块保持一致的左右曲面屏安全留白（此处简写会覆盖上方，需重新声明） */
  .main {
    padding-top: 8px;
    padding-bottom: 70px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

}


/* ===== 添加声部对话?===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal h3 { margin: 0 0 12px 0; }

/* 登录表单 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.login-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  color: #555;
  font-weight: 500;
}
.login-form label input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-form label input:focus {
  border-color: #ffb74d;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,183,77,0.15);
}
.login-form .hint {
  font-size: 13px;
  color: #999;
  margin: 0 0 8px 0;
}
.login-form hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 16px 0 12px;
}
.login-form details summary {
  font-size: 13px;
  color: #999;
  cursor: pointer;
  padding: 4px 0;
}
.login-form details summary:hover {
  color: #666;
}
.login-form details label {
  margin-top: 10px;
  margin-bottom: 0;
}

/* 登录弹窗里的按钮 */
.user-modal .modal-actions {
  margin-top: 4px;
}
.user-modal .preset-btn {
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 6px;
  min-width: 80px;
}
.user-modal .preset-btn.primary {
  background: #ffb74d;
  color: #fff;
  border: none;
  font-weight: 600;
}
.user-modal .preset-btn.danger {
  background: #ef5350;
  color: #fff;
  border: none;
}

.preset-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  text-align: left;
}

.preset-btn:hover { background: #ffeadb; border-color: #d9531e; }

.preset-name { font-weight: 600; font-size: 13px; }

.preset-family {
  font-size: 11px;
  color: #888;
  background: #eee;
  padding: 1px 6px;
  border-radius: 3px;
}

/* 添加声部对话框：分组 */
.add-track-modal { max-width: 520px; }

.add-track-group {
  margin-bottom: 14px;
}

.add-track-group-label {
  font-size: 12px;
  color: #666;
  font-weight: 600;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
  letter-spacing: 0.3px;
}

.add-track-group .preset-list {
  margin-bottom: 0;
  grid-template-columns: repeat(3, 1fr);
}

.add-track-group .preset-btn {
  padding: 8px 10px;
  min-height: 34px;
}

.add-track-group .hint {
  grid-column: 1 / -1;
  padding: 8px 12px;
  color: #999;
  font-style: italic;
  font-size: 12px;
  border: 1px dashed #ddd;
  border-radius: 6px;
  background: #fafafa;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 640px) {
  .preset-list { grid-template-columns: 1fr; }

}


/* ============ 账号 / 权限视觉 ============ */
.user-btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.user-btn:hover { background: #ececec; }

.user-btn[data-level="admin"] { background: #fff3e0; border-color: #ffb74d; }

.user-btn[data-level="3"]     { background: #e8f5e9; border-color: #81c784; }

.user-btn[data-level="2"]     { background: #e3f2fd; border-color: #64b5f6; }

.user-btn[data-level="1"]     { background: #eeeeee; border-color: #bdbdbd; }


/* 曲库分组标题 */
.song-group { margin-bottom: 12px; }

.song-group-label {
  font-size: 12px;
  color: #666;
  padding: 6px 8px 4px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.song-group-count {
  background: #eee;
  color: #666;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 11px;
}


/* 锁定曲子的标?*/
.song-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}

.song-badge.locked { background: #ffe0b2; color: #e65100; }

.song-badge.lv     { background: #cfd8dc; color: #37474f; }

.song-badge.user   { background: #c8e6c9; color: #2e7d32; }

.song-item.is-locked .song-title,
.song-item.is-lv-locked .song-title { color: #aaa; }
.song-item.is-lv-locked { opacity: 0.55; cursor: default; pointer-events: none; }

.song-item.is-locked,
.song-item.is-lv-locked { opacity: 0.85; }

/* 锁曲壳（服务端按等级只下发曲名/标签）：整行弱化、不可点、标签也淡化 */
.song-item.is-shell {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.song-item.is-shell .song-title { color: #b5b5b5; font-weight: 400; }
.song-item.is-shell .mini-tag { opacity: 0.65; }


/* 只读模式：整?main 区加个视觉信号，编辑控件灰化 */
main.readonly-mode #addTrack,
main.readonly-mode #addSoloTrack,
main.readonly-mode #resetTracks,
main.readonly-mode #clearBtn,
main.readonly-mode #rebuild,
main.readonly-mode #soloAddBar,
main.readonly-mode #soloRemoveBar {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
}

main.readonly-mode .track-actions,
main.readonly-mode .cell {
  /* cell 不禁用（还是能点听声），但视觉上?点了改数?的意图弱?*/
  pointer-events: auto;
}

main.readonly-mode .track-actions {
  opacity: 0.35;
  pointer-events: none;
}

main.readonly-mode .track-label input[data-role="name"],
main.readonly-mode .track-label select[data-role="preset"] {
  pointer-events: none;
  opacity: 0.6;
}

/* 用户要求删除顶部只读模式提示条，已注释掉 */
/*
main.readonly-mode::before {
  content: '👁?只读模式（当前账号不能编辑这首曲子；可正常播放试听）';
  display: block;
  background: linear-gradient(90deg, #fff3e0, #ffe0b2);
  color: #e65100;
  padding: 6px 12px;
  font-size: 12px;
  border-bottom: 1px solid #ffcc80;
  position: sticky;
  top: 0;
  z-index: 5;
}
*/


/* 分享状?badge */
.song-badge.pending  { background: #fff9c4; color: #f57f17; }

.song-badge.approved { background: #c8e6c9; color: #2e7d32; }

.song-badge.rejected { background: #ffcdd2; color: #c62828; }

.song-badge.private  { background: #eceff1; color: #546e7a; }

.song-badge.community-author { background: #e3f2fd; color: #1565c0; font-style: italic; }


/* 制作?来源信息面板 */
.author-panel {
  background: linear-gradient(135deg, #f3e5f5, #e8f5e9);
  border: 1px solid #ce93d8;
  border-left: 4px solid #ab47bc;
  border-radius: 6px;
}

.author-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.author-name { font-size: 15px; }

.author-name b { font-weight: 700; color: #4a148c; }

.author-state {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eceff1;
  color: #546e7a;
}

.author-state-approved { background: #c8e6c9; color: #2e7d32; }

.author-state-pending  { background: #fff9c4; color: #f57f17; }

.author-state-rejected { background: #ffcdd2; color: #c62828; }

.author-state-private  { background: #eceff1; color: #546e7a; }

.author-bio, .author-note {
  margin-top: 6px;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

.author-note {
  background: rgba(255,255,255,0.6);
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid #81c784;
}

.author-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #777;
}


/* 分享申请弹窗 */
.share-request-modal { max-width: 480px; }

.share-request-modal label {
  display: block;
  margin: 8px 0 4px;
  font-size: 13px;
}

.share-request-modal input[type="text"],
.share-request-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  margin-top: 4px;
}

.share-request-modal .save-profile-line {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 12px 0 6px;
  font-size: 12px;
  color: #666;
}

.share-request-modal .hint {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}


/* 审核弹窗里的作者信息块 */
.review-modal .review-author {
  background: #fff8e1;
  border-left: 3px solid #ffb300;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.7;
}

.review-modal .review-author.warn {
  background: #ffebee;
  border-color: #ef5350;
  color: #c62828;
}

.review-author-line b { color: #555; }


/* 分享/审核按钮的视?*/
#shareSongBtn { background: #e3f2fd; border-color: #64b5f6; }

#shareSongBtn:hover { background: #bbdefb; }

#reviewSongBtn { background: #fff3e0; border-color: #ffb74d; color: #e65100; }

#reviewSongBtn:hover { background: #ffe0b2; }


/* 审核弹窗 */
.review-modal { max-width: 480px; }

.review-modal .review-meta {
  background: #f7f7f7;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.8;
}

.review-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
}

.review-modal .review-level-label,
.review-modal .review-note-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
}

.review-modal button.danger { background: #ffebee; color: #c62828; border-color: #ef9a9a; }

.review-modal button.danger:hover { background: #ffcdd2; }


/* 用户切换弹窗 */
.user-modal .user-level-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.user-modal .preset-btn.on {
  background: #fff3e0;
  border-color: #ffb74d;
  color: #e65100;
  font-weight: 600;
}


/* 权限：Lv1/Lv2 隐藏"新建/复制"按钮（body ?.user-can-create 就隐藏） */
body:not(.user-can-create) .need-create { display: none !important; }

/* 权限：Lv1/Lv2 非管理员用户，隐藏编辑相关控件
   保留：callEnabled 开关、toggleCallSection 折叠按钮、callScore 信号谱面（看格子划分）、callTracks 声部列表
   隐藏：内部编辑控件（callBars / ±小节 / callSubdivision / addCallTrack / 弱起说明）、伴奏"添加声部"+"重置"、伴奏段编辑说明 hint */
body.user-is-lv1or2 .call-hint,
body.user-is-lv1or2 .pickup-label,
body.user-is-lv1or2 .pickup-hint,
body.user-is-lv1or2 .call-section #callBars,
body.user-is-lv1or2 .call-section #callAddBar,
body.user-is-lv1or2 .call-section #callRemoveBar,
body.user-is-lv1or2 .call-section #callSubdivision,
body.user-is-lv1or2 #addCallTrack,
body.user-is-lv1or2 .call-add-track,
body.user-is-lv1or2 #addTrack,
body.user-is-lv1or2 #resetTracks,
body.user-is-lv1or2 .ensemble-hint { display: none !important; }

/* Lv1/Lv2 下，call-content 展开后只剩谱面，去掉多余 padding */
body.user-is-lv1or2 .call-content { padding: 0; }


/* 提示横幅完全不需要，整个删掉 */
/* 编辑按钮和保存按钮的视觉区分 */
#editSongBtn { background: #fff3e0; border-color: #ffb74d; }

#editSongBtn:hover { background: #ffe0b2; }

#saveSongBtn { background: #43a047; color: #fff; border-color: #388e3c; }

#saveSongBtn:hover { background: #388e3c; }


/* 只读模式：把所有原?:disabled 的输入变灰但不覆盖颜色，视觉一?*/
main.readonly-mode input:disabled,
main.readonly-mode select:disabled,
main.readonly-mode button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: #f5f5f5 !important;
  pointer-events: none !important;
}
/* 专门处理Solo顶栏控件，绝对保证禁?*/
main.readonly-mode #soloBars:disabled,
main.readonly-mode #soloSubdivision:disabled,
main.readonly-mode #soloAddBar:disabled,
main.readonly-mode #soloRemoveBar:disabled,
main.readonly-mode #addSoloTrack:disabled,
main.readonly-mode #clearSoloAB:disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
/* 专门处理Solo每拍小下拉框，确保生?*/
main.readonly-mode .beat-sub-sel:disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
/* 声部控制面板：只有在只读模式(main.readonly-mode)下的禁用控件才用黑底白字 */
main.readonly-mode .track-label input:disabled,
main.readonly-mode .track-label select:disabled {
  opacity: 1 !important;
  background-color: #222 !important;
  color: #fff !important;
  border-color: #fff !important;
  pointer-events: none !important;
}
main.readonly-mode .track-label button:disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* cell 光标提示：只读时鼠标是禁止图标（但点击仍能试听） */
main.readonly-mode .cell {
  cursor: not-allowed;
}

  
/* ͬһжСڷָ */  
score.wrap-per-bar .bar-row .cells.multi-bar {  
  display: flex;  
  gap: 4px;  
}  
score.wrap-per-bar .bar-row .cells.multi-bar .beat-block {  
  border-right: 1px solid #e8e8e8;  
  padding-right: 2px;  
}  
score.wrap-per-bar .bar-row .cells.multi-bar .beat-block:last-child {  
  border-right: none;  
  padding-right: 0;  
} 
  
score.wrap-per-bar .cells.beats-wrap.wrap-empty {  
  background: transparent;  
  border: none;  
} 

/* ========== 弱起起始位置标记 ========== */
/* 只有起始位置 > 0 才显示，=0（从头开始）不显?*/
.cell.pickup-start {
  position: relative !important;
}
.pickup-marker {
  display: block !important;
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ff0000 !important; /* 纯大红，醒目 */
  line-height: 1 !important;
  pointer-events: none !important; /* 不影响点击格?*/
  z-index: 999 !important; /* 最高层级，绝对不会被盖?*/
  background: #ffffff !important; /* 纯白背景，任何颜色格子上都看得见 */
  /* 放在格子右下角，不压中心文字，绝对不会被?*/
}

/* ========== 付费单曲解锁提示 ========== */
.purchase-hint {
  background: #fff3e0;
  border: 2px solid #ff9800;
  color: #e65100;
  font-size: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.purchase-hint .hint-text {
  flex: 1;
}
.purchase-hint .buy-btn {
  background: #ff9800;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
.purchase-hint .buy-btn:hover {
  background: #f57c00;
}
/* 付费未购买时禁用播放按钮 */
body.song-locked .play-controls button {
  opacity: 0.4;
  pointer-events: none;
}
/* ==============================================
   移动端适配 (max-width: 768px)
   ============================================== */
@media (max-width: 768px) {

  /* --- 全局 --- */
  html, body { overflow: auto; }
  body { min-height: 100vh; }
  .mobile-only { display: inline-block; }

  /* ===== 移动端：曲目标签上方显示当前曲名 + BPM/节拍器控件 ===== */
  .mobile-song-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 0 0 4px 0;
    margin-bottom: 2px;
    border-bottom: 1px solid #eee;
  }
  .mobile-song-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-song-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-weight: normal;
  }
  .mobile-song-controls label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #555;
  }
  .mobile-song-controls input[type="number"] {
    width: 52px;
    padding: 3px 5px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  .mobile-user-row {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
  }
  .mobile-user-row button {
    font-size: 13px;
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
  }

  /* 侧边栏里的用户按钮行 */
  .sidebar .mobile-user-row {
    padding: 0 12px 8px;
    border-bottom: 1px solid #eee;
    justify-content: flex-start;
  }
  .sidebar .mobile-user-row button {
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 8px 12px;
    background: #f5f5f5;
  }

  /* ===== TOPBAR 精简 ===== */
  /* 移动端隐藏谱子基本参数面板的第一行编辑控件（曲名/BPM/节拍器已移到标签上方，播放栏已固定底部） */
  #songParamsPanel > .row:first-child { display: none !important; }
  #songParamsPanel {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .topbar {
    padding: 8px 12px;
    /* safe-area：iPhone 灵动岛 / Android 刘海下不被遮挡；左右避开曲面屏弧边 */
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    gap: 8px;
    flex-wrap: wrap;          /* 管理员多出的按钮折到第二行，不挤占主行 */
  }
  /* 标题只显示短名 */
  .topbar h1 { font-size: 0; }
  .topbar h1 .brand-en { display: none; }
  .topbar h1::before { content: "坚贝谱"; font-size: 15px; font-weight: 600; }
  /* 隐藏：版本号、用户、清缓存、导出、导入 */
  .topbar .ver,
  .topbar #userBtn,
  .topbar #clearSampleCacheBtn,
  .topbar #exportLibBtn,
  .topbar #importLibBtn { display: none !important; }
  /* 移动端 admin 也显示用户、清缓存、导出、导入；放在第二行、保持自然小尺寸不被拉伸 */
  body.user-is-admin .topbar #userBtn,
  body.user-is-admin .topbar #clearSampleCacheBtn,
  body.user-is-admin .topbar #exportLibBtn,
  body.user-is-admin .topbar #importLibBtn {
    display: inline-flex !important;
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 8px;
  }
  /* 仅管理员：占位条占满整行，把 admin 按钮整体推到第二行；
     普通访客保持单行（占位条仍为正常 flex:1）。 */
  body.user-is-admin .topbar .topbar-spacer { flex: 1 0 100%; height: 0; }
  /* 使用说明 / 关于我们 / 展开标签：三个文字按钮统一紧凑宽度，
     都在中间折成两行，宽度一致，加了"关于我们"后整行也放得下。 */
  .topbar #helpBtn,
  .topbar a.icon-btn,
  .topbar #toggleTrackLabels,
  .topbar #notationToggleBtn {
    font-size: 13px;
    padding: 4px 4px;
    flex: 0 0 52px;          /* 固定等宽，不被压缩也不撑宽 */
    justify-content: center;
    text-align: center;
    white-space: normal;      /* 允许折行：谱面/格子、谱面/符杠 等 */
    line-height: 1.3;
  }

  /* ===== 布局：垂直堆叠 ===== */
  .layout {
    flex-direction: column;
  }

  /* ===== 侧栏：overlay 浮层（移动端反转 sidebar-collapsed 含义） ===== */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 280px !important;
    max-width: 85vw;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1000;
    box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: 1px solid #e5e5e5 !important;
    border-bottom: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* 移动端：sidebar-collapsed = 显示侧栏（反转） */
  body.sidebar-collapsed .sidebar {
    transform: translateX(0) !important;
    width: 280px !important;
    max-height: 100vh !important;
    border-right: 1px solid #e5e5e5 !important;
  }
  body.sidebar-collapsed .sidebar > * {
    display: revert !important;
  }

  /* 关闭按钮：桌面端隐藏，移动端在侧栏中显示 */
  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
  }
  .sidebar-close-btn:hover {
    background: #f0f0f0;
    color: #333;
  }

  /* ===== 主区 ===== */
  .main {
    padding: 8px;
    /* 曲面屏：左右至少 12px 留白，再叠加系统安全区（刘海/弧边） */
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    overflow-y: auto;
    flex: 1;
    padding-bottom: 70px; /* 给底部播放栏留空间 */
  }

  /* ===== 参数面板：简化 ===== */
  .panel .row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .panel .row label {
    font-size: 13px;
  }
  .panel .row input[type="number"],
  .panel .row select {
    font-size: 13px;
    padding: 4px 6px;
  }
  .panel .row button {
    font-size: 13px;
    padding: 5px 10px;
  }
  /* 隐藏大量 hint 文字 */
  .panel .row .hint { display: none; }

  /* ===== 底部浮动播放栏 ===== */
  .panel .row:has(> #play) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 8px 12px;
    /* safe-area：iPhone 底部 Home 条 / Android 全面屏手势条不遮挡按钮；左右避开曲面屏弧边 */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 900;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    margin: 0;
    border-radius: 0;
  }
  .panel .row:has(> #play) button {
    font-size: 14px;
    padding: 8px 14px;
  }
  /* 播放栏里的 label 隐藏 */
  .panel .row:has(> #play) > label { display: none; }

  /* ===== 格子谱：横向滚动 + 缩小格子 ===== */
  .score-panel {
    /* 左右至少 12px，叠加曲面屏/刘海安全区，最外侧格子不贴弧边 */
    padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: calc(12px + env(safe-area-inset-left));
    scroll-padding-right: calc(12px + env(safe-area-inset-right));
  }
  .score {
    grid-auto-columns: minmax(28px, 36px);
  }
  .cell {
    width: 28px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* ===== 小节数字：缩窄 ===== */
  .score.wrap-per-bar .bar-num {
    width: 28px !important;
    font-size: 11px !important;
    padding: 0 2px !important;
  }

  /* ===== 声部标签：统一宽度 + 窄化 ===== */
  .track-label {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 60px !important; /* 与展开时一致，保持行距 */
    padding: 4px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center; /* 垂直居中显示 */
    justify-content: center;
  }  .track-label input[type="text"] {
    width: 100% !important;
    font-size: 10px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .track-label .track-actions { display: none; }
  .track-label .vol-slider { display: none; }
  .track-label .track-trans-label { display: none; }
  .track-label .track-bar-count { display: none; }
  /* 展开标签：在原位向右延展，高度位置不变，只变宽度 */
  /* 收起时占位 56px + 36px 高（=格子行高），展开时容器高度变 60px 让两层有间隙 */
  .score.labels-expanded .track-label {
    position: relative;
    z-index: 10;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 60px !important; /* 上下各 28px + 中间 4px 间隙 */
    overflow: visible;
  }
  /* 展开内容：在原位向右延展 */
  .score.labels-expanded .track-label .track-label-top,
  .score.labels-expanded .track-label .track-label-bottom {
    position: absolute;
    left: 0;
    right: auto;
    min-width: 200px;
    background: #2a2a2a;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    padding: 4px 8px;
    z-index: 11;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .score.labels-expanded .track-label .track-label-top {
    top: 0;
    height: 28px;
  }
  .score.labels-expanded .track-label .track-label-bottom {
    top: 32px; /* 28 + 4px 间隙 */
    height: 28px;
  }
  .score.labels-expanded .track-label .track-actions { display: flex; }
  .score.labels-expanded .track-label .vol-slider { display: block; }
  .score.labels-expanded .track-label .track-trans-label { display: inline; }
  .score.labels-expanded .track-label .track-bar-count { display: inline; }
  .score.labels-expanded .track-label input[type="text"] {
    width: auto !important;
    font-size: 12px !important;
  }
  /* spacer 也统一宽度 */
  .track-label-spacer {
    width: 56px !important;
    min-width: 56px !important;
  }

  /* ===== Solo 区 ===== */
  .solo-local-play { display: none !important; }
  .solo-area .row {
    flex-wrap: wrap;
    gap: 4px;
  }
  /* 移动端隐藏 Solo 编辑控件区（已用 .mobile-solo-banner 替代标题显示） */
  .solo-header-panel { display: none !important; }
  /* 移动端专用：Solo 段谱面上方的大标题 banner（PC 端隐藏，移动端显示） */
  .mobile-solo-banner {
    display: block;
    margin: 0 0 4px 0;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #b45309;
    background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
  }
  .solo-score-panel {
    /* 左右安全留白，与伴奏格子谱一致 */
    padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
  }

  /* ===== 标签面板：移动端 ===== */
  .tags-panel-section { display: block; }
  .tags-panel-section .tags-collapse-header { font-size: 14px; padding: 6px 0; }
  .tags-panel-section .tags-collapse-header strong { font-size: 15px; }
  .tags-panel-section .row:first-of-type { display: none; }
  /* v0.41：非编辑模式，手机端也显示标签行（只读），让用户看到本曲已选标签。
     行内只保留已选中的胶囊，未选中的选项 + “+新增”按钮隐藏（省地方，见下方）。 */
  .tags-panel-section .tag-row { display: flex; }
  .tags-panel-section .tag-row .chip:not(.chip-on),
  .tags-panel-section .tag-row .chip-add { display: none; }
  /* 没有任何已选标签的维度：整行隐藏，避免出现光秃秃的维度名 */
  .tags-panel-section .tag-row:not(:has(.chip-on)):not(:has(.tag-custom-textarea)) { display: none; }
  /* 编辑模式：恢复完整可勾选面板（显示全部选项与 +新增） */
  body.is-editing .tags-panel-section .tag-row { display: flex; }
  body.is-editing .tags-panel-section .tag-row .chip:not(.chip-on),
  body.is-editing .tags-panel-section .tag-row .chip-add { display: inline-flex; }
  body.is-editing .tags-panel-section .tag-row:not(:has(.chip-on)):not(:has(.tag-custom-textarea)) { display: flex; }
  /* 只读胶囊略紧凑 */
  .tags-panel-section .tag-row .chip.chip-readonly { cursor: default; }
  /* 备注说明区域加滚动条 */
  .tags-panel-section .tag-custom-textarea {
    max-height: 150px;
    overflow-y: auto;
  }
  .tags-panel-section .tag-custom-textarea textarea {
    overflow-y: auto !important;
    min-height: 80px !important;
  }

  /* ===== 底部 footer ===== */
  footer { font-size: 11px; padding: 8px; }

  /* ===== 开场信号区 ===== */
  .call-section { padding: 6px; }
  .call-tracks { flex-wrap: wrap; gap: 4px; }
  .call-track-item { font-size: 11px; padding: 3px 6px; }

  /* ===== 弹窗适配 ===== */
  .modal-content {
    width: 95vw;
    max-width: 400px;
    padding: 12px;
  }
  .modal {
    padding: 16px;
    width: 92%;
    border-radius: 10px;
  }
  .modal h3 {
    font-size: 17px;
    margin-bottom: 14px;
  }
  .login-form label {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .login-form label input {
    padding: 12px 14px;
    font-size: 16px; /* 防止 iOS 缩放 */
    border-radius: 8px;
  }
  .login-form .hint {
    font-size: 12px;
  }
  .user-modal .preset-btn {
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 8px;
  }
}

/* ========== v0.35 小节级编辑：小节号可点 + 操作浮层 ========== */
.bar-num.bar-num-editable {
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}
.bar-num.bar-num-editable:hover {
  background: #d97706;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25);
}

.bar-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.18);
}
.bar-menu {
  position: fixed;
  width: 210px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  padding: 6px;
  z-index: 2001;
}
.bar-menu-title {
  font-size: 12px;
  color: #888;
  padding: 6px 10px 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
  font-weight: 600;
}
.bar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #222;
  cursor: pointer;
}
.bar-menu-item .bmi-icon { width: 18px; text-align: center; }
.bar-menu-item:hover { background: #fff3e8; color: #b45309; }
.bar-menu-item.disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
  color: #999;
}
.bar-menu-note {
  font-size: 11px;
  color: #aaa;
  text-align: center;
  padding: 6px 0 2px;
}

.bar-edit-toast {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30, 30, 30, 0.9);
  color: #fff;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 20px;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.bar-edit-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========== 云端曲库加载守卫（CF 版） ========== */
/* 加载徽标：默认隐藏，仅 .cloud-booting 时显示 */
.cloud-boot-badge {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-right: 6px;
  font-size: 12.5px;
  color: #8a6d3b;
  background: #fcf8e3;
  border: 1px solid #faebcc;
  border-radius: 999px;
  white-space: nowrap;
  animation: bootpulse 1.2s ease-in-out infinite;
}
@keyframes bootpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
body.cloud-booting .cloud-boot-badge { display: inline-flex; }

/* 加载期间隐藏所有会写库的入口（JS 处理函数另有兜底拦截） */
body.cloud-booting #newSong,
body.cloud-booting #dupSong,
body.cloud-booting #editSongBtn,
body.cloud-booting #saveSongBtn,
body.cloud-booting #cancelEditBtn,
body.cloud-booting #shareSongBtn,
body.cloud-booting #reviewSongBtn,
body.cloud-booting #exportLibBtn,
body.cloud-booting #importLibBtn,
body.cloud-booting #exportBtn,
body.cloud-booting #importBtn {
  display: none !important;
}

/* ========== 异地登录（被踢）锁死弹窗 ========== */
.kick-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646; /* 压过一切其他弹层 */
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: kickfade 0.18s ease-out;
}
@keyframes kickfade { from { opacity: 0; } to { opacity: 1; } }
.kick-lock-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface, #fff);
  color: var(--text, #1a1a1a);
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}
.kick-lock-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.kick-lock-title { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.kick-lock-msg {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 22px;
  opacity: 0.78;
}
.kick-lock-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--accent, #2f6fed);
  transition: filter 0.15s ease;
}
.kick-lock-btn:hover { filter: brightness(1.06); }
.kick-lock-btn:active { filter: brightness(0.96); }

/* ===== 样板曲：Solo 免费试看 badge（默认隐藏，仅样板曲 + 等级低于 Lv2 时由 JS 显示）===== */
.showcase-badge {
  display: none;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 999px;
  white-space: nowrap;
}
.showcase-badge-mobile {
  margin-left: 10px;
  padding: 1px 8px;
  font-size: 12px;
}
body.showcase-active .showcase-badge { display: inline-block; }

/* ===== 左边栏样板曲：曲名旁"免费试看 Solo"徽章 + Lv2 提示副行 ===== */
.song-badge.showcase {
  margin-left: 6px;
  margin-right: 0;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.song-showcase-hint {
  margin-top: 3px;
  font-size: 11px;
}

/* ============================================================
   符杠谱（Beam Notation）v0.49 SVG
   鼓/普通轨：一拍一 SVG（梁+竖线向下+音符/灰点），╭N╮ 在梁上方。
   成组墩墩 bell 轨：不画符杠，仅在有声位置显示 X（叠到鼓行横梁上）。
   未成对乐器走普通符杠。三段（伴奏/信号/Solo）谱面尺寸一致。
   ============================================================ */

/* --- 标签：紧凑单行黑底块，全部控件可见 --- */
body.beam-notation .track { gap: 0; }
body.beam-notation .track-label {
  width: 320px !important; min-width: 320px !important; max-width: 320px !important;
  flex: 0 0 320px !important;
  height: 30px !important;
  display: flex; flex-direction: row; align-items: center;
  padding: 0 5px; gap: 5px;
  background: #2a2a2a !important;
  border-radius: 5px;
  box-sizing: border-box;
  overflow: visible;
}
/* 名字保留可编辑（管理员），普通用户只读 */
body.beam-notation .track-label [data-role="name"] {
  width: 62px !important; flex: 0 0 62px; min-width: 0;
  background: transparent !important;
  color: #fff !important; font-size: 12px; font-weight: 600;
  padding: 2px 2px;
}
/* top 行：名字 + 音色，横排，固定不收缩 */
body.beam-notation .track-label .track-label-top {
  display: flex; flex-direction: row; align-items: center;
  gap: 3px; padding: 0; margin: 0;
  flex: 0 0 auto; width: auto !important; min-width: 0;
}
/* bottom 行：横排，占据剩余宽度并可收缩（width 回到 auto） */
body.beam-notation .track-label .track-label-bottom {
  display: flex; flex-direction: row; align-items: center;
  gap: 3px; padding: 0; margin: 0;
  flex: 1 1 auto; width: auto !important; min-width: 0;
}
body.beam-notation .track-label select[data-role="preset"] {
  width: 46px; flex: 0 0 46px; font-size: 10px; padding: 1px 2px;
}
/* 触控友好：按钮留足点击高度 */
body.beam-notation .track-label .mini-btn {
  min-height: 22px; min-width: 24px; padding: 2px 5px; font-size: 11px;
}
body.beam-notation .track-label .ticon {
  min-height: 22px; min-width: 24px; padding: 2px 4px; font-size: 11px;
}
body.beam-notation .track-label [data-role="start-at"] {
  min-height: 22px; font-size: 10px; padding: 2px 4px;
}
body.beam-notation .track-label .vol-slider {
  flex: 1 1 40px; width: auto; min-width: 30px; height: 18px; margin: 0;
}
body.beam-notation .track-label .track-trans-label,
body.beam-notation .track-label .track-bc-label { font-size: 10px; gap: 2px; white-space: nowrap; }
body.beam-notation .track-label .track-bar-count { width: 34px; font-size: 10px; padding: 1px 2px; }
body.beam-notation .track-label .track-actions { gap: 2px; margin-left: 0; }
/* 强制 label 内两行与所有子元素可收缩，避免 min-width:auto 撑爆 */
body.beam-notation .track-label,
body.beam-notation .track-label .track-label-top,
body.beam-notation .track-label .track-label-bottom,
body.beam-notation .track-label .track-actions { min-width: 0 !important; }
body.beam-notation .track-label .track-label-bottom { overflow: visible; }
/* 复制/删除按钮固定，不收缩 */
body.beam-notation .track-label .track-actions { flex: 0 0 auto; }

/* --- 行 --- */
body.beam-notation .bar-row {
  padding: 2px 0; background: transparent !important; gap: 6px; position: relative;
}
body.beam-notation .bar-row.transition-bar { background: transparent !important; border: none !important; }
body.beam-notation .bar-num {
  width: 24px; flex: 0 0 24px; background: transparent; color: #444;
  font-size: 11px; font-weight: 600; display: flex; align-items: center;
}
body.beam-notation .bar-row.transition-bar .bar-num { color: #2e7d32; }
/* 成对 bell 行：共用一根梁，小节编号只保留鼓行那一个。
   隐藏 bell 行的 .bar-num（仍占 24px 宽，梁/X 不错位；勿用 display:none）。 */
body.beam-notation .beam-bell-track .bar-num {
  visibility: hidden;
}

/* --- 拍块：统一 60px 高（三段一致），强制约束 --- */
body.beam-notation .beat-block {
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  padding-right: 0 !important;
  position: relative;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  overflow: visible;
}
body.beam-notation .beat-ctrl { display: none !important; }
/* beat-cells 保持 flex（cell 靠它分配宽度），只是去掉 min-height */
body.beam-notation .beat-cells {
  position: relative;
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
body.beam-notation .seg-wrap {
  margin-top: 0 !important;
  border-left: none !important;
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.beat-svg-wrap {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100%; pointer-events: none; z-index: 5;
}
.beat-svg-wrap svg { width: 100%; height: 100%; display: block; }

/* --- cell：透明热区，在 flex 流中正常获得宽度；默认不显示任何东西 --- */
body.beam-notation .cell {
  background: transparent !important; border: none !important;
  position: relative !important;
  flex: 1 1 0;
  min-width: 0;
  height: 100% !important; min-height: 0 !important;
  color: transparent;
}
body.beam-notation .cell:hover { background: rgba(33,150,243,0.08) !important; }
body.beam-notation .cell > .cell-glyph { display: none; }
/* 格子谱伪元素装饰在符杠模式默认全关；抢进三角形在下方单独开启 */
body.beam-notation .cell::before,
body.beam-notation .cell::after { display: none !important; }

body.beam-notation .cell.playing {
  background: rgba(25,118,210,0.12) !important; outline: none !important;
}
body.beam-notation .bar-row.playing-bar .bar-num { color: #1976d2; }
body.beam-notation .ruler { display: none; }

/* ============================================================
   抢进位置小三角形（符杠模式，同格子谱样式）
   用 ::after 在格子正上方画一个朝上的橙色实心三角
   ============================================================ */
body.beam-notation .cell.pickup-start::after {
  content: '';
  display: block !important;
  position: absolute;
  bottom: 100%;              /* 三角底边贴在格子上沿 */
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #ff7a00;  /* 朝上实心三角，橙色 */
  pointer-events: none;
  z-index: 30;
  margin-bottom: 1px;
}

/* ============================================================
   共梁（v0.49 对齐重构）：
   bell 轨拍块整体隐藏（X 已移入鼓轨同一 SVG，在梁高处，天然对齐）；
   bell 行只保留标签（高度恒定，与折行行数无关）。
   ============================================================ */
body.beam-notation .beat-block.beat-bell-notes-only {
  display:none !important;
}

/* ============================================================
   成对 bell：共用一根梁 → 小节数也只显示一个（在鼓标签上）。
   用 visibility:hidden 隐藏 bell 的「小节 N」，保留占位，
   位置/宽度不变，X 与梁不会错位（切勿用 display:none）。
   ============================================================ */
body.beam-notation .track-label.paired-bell-label .track-bc-label,
body.beam-notation .track-label.paired-bell-label .track-bc-label .track-bar-count {
  visibility: hidden !important;
}

/* ============================================================
   成对墩墩几何（v0.49 对齐重构）：
   bell 行只留标签（首行 30px 高）；鼓行正常画 60px 拍块，
   负 margin 上提使【横梁】与 bell 标签竖向居中。X 与梁在同一
   SVG，永远对齐；此 margin 只决定整体谱块相对 bell 标签的位置，
   且每行几何一致，不再随行数漂移。（数值待浏览器实测微调）
   ============================================================ */
body.beam-notation .track.beam-bell-track {
  margin-bottom: 0 !important;
  position: relative; z-index: 5;
}
/* 关键（折行对齐）：bell 行的标签/spacer 必须等高，否则后续折行 spacer 为 0 高，
   鼓轨 -40px 负 margin 在每行落到不同位置 → 随拍数/行数上下漂移。
   固定为 30px（桌面），与 .track-label 单行高一致。 */
body.beam-notation .track.beam-bell-track .track-label,
body.beam-notation .track.beam-bell-track .track-label-spacer {
  height: 30px !important; min-height: 30px !important; max-height: 30px !important;
}
body.beam-notation .track.beam-drum-track {
  margin-top: -40px !important;   /* 鼓符杠上提，使梁对齐 bell 标签高度 */
  position: relative; z-index: 4;
}
/* bell 标签：在原位（与梁同高）；鼓标签：上移紧邻同组 bell 标签（视觉成组）。
   top=36 → 鼓标签 y 在 bell 底 +2（一条细缝）；组间由 margin-bottom:32 拉开。 */
body.beam-notation .beam-drum-track .track-label {
  position: relative;
  top: 36px;
  z-index: 8;
}
/* 成对鼓 track 底部留更大间距，避免鼓音符/标签与下一声部过近（触控友好） */
body.beam-notation .track.beam-drum-track {
  margin-bottom: 32px !important;
}

/* ============================================================
   移动端符杠：标签默认收起（56px），横杠谱占满；点开关展开
   ============================================================ */
@media (max-width: 768px) {
  body.beam-notation .beat-block { height: 62px !important; min-height: 62px !important; max-height: 62px !important; }

  /* --- 符杠标签：单行高度（同 PC 端），收起为 56px 窄块 --- */
  body.beam-notation .track-label {
    width: 56px !important; min-width: 56px !important; max-width: 56px !important;
    flex: 0 0 56px !important;
    height: 34px !important;
    padding: 2px 4px !important;
    overflow: hidden;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  /* 收起态：只显示名字；音色/播放等控件隐藏（与格子谱移动端一致） */
  body.beam-notation .track-label .track-label-top,
  body.beam-notation .track-label .track-label-bottom {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    gap: 2px;
  }
  /* 收起时隐藏：音色下拉、M/S、音量、起始点、过渡、小节数、复制/删除 */
  body.beam-notation .track-label [data-role="preset"],
  body.beam-notation .track-label .track-label-bottom {
    display: none !important;
  }
  body.beam-notation .track-label [data-role="name"] {
    width: 100% !important; flex: none;
    font-size: 10px !important; text-align: center;
    padding: 0;
  }

  /* --- 成对墩墩几何（收起态）：bell 标签/spacer 等高34px，鼓梁上提对齐 --- */
  body.beam-notation .track.beam-bell-track .track-label,
  body.beam-notation .track.beam-bell-track .track-label-spacer {
    height: 34px !important; min-height: 34px !important; max-height: 34px !important;
  }
  body.beam-notation .track.beam-drum-track { margin-top: -34px !important; margin-bottom: 30px !important; }
  /* 鼓标签上移紧邻同组 bell 标签（视觉成组，留 ~2px 细缝）。
     收起态 label 默认静态定位，必须显式 relative 才能让 top 生效。 */
  body.beam-notation .beam-drum-track .track-label { position: relative; top: 30px; z-index: 8; }

  /* --- 展开态（labels-expanded）：标签向右浮层展开，单行，
          只保留 名称 / M / S / 音量 --- */
  body.beam-notation .score.labels-expanded .track-label {
    width: 56px !important; min-width: 56px !important; max-width: 56px !important;
    height: 34px !important; overflow: visible;
  }
  /* top 行（名称）：向左对齐、向右延展 */
  body.beam-notation .score.labels-expanded .track-label .track-label-top {
    position: absolute; left: 0; top: 0;
    display: flex !important; flex-direction: row !important;
    background: #2a2a2a; border-radius: 4px 0 0 4px;
    padding: 2px 6px; z-index: 20;
    height: 34px; align-items: center;
  }
  /* bottom 行：紧跟名称右侧延展，只显示 M/S/音量 */
  body.beam-notation .score.labels-expanded .track-label .track-label-bottom {
    position: absolute; left: 0; top: 0;
    display: flex !important; flex-direction: row !important;
    min-width: 150px;
    background: #2a2a2a; border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    padding: 2px 8px 2px 64px; z-index: 19;
    height: 34px; align-items: center; gap: 5px;
  }
  /* 展开态：隐藏除 M/S/音量 外的所有控件 */
  body.beam-notation .score.labels-expanded .track-label [data-role="preset"],
  body.beam-notation .score.labels-expanded .track-label [data-role="start-at"],
  body.beam-notation .score.labels-expanded .track-label .track-actions,
  body.beam-notation .score.labels-expanded .track-label .track-trans-label,
  body.beam-notation .score.labels-expanded .track-label .track-bc-label {
    display: none !important;
  }
  body.beam-notation .score.labels-expanded .track-label [data-role="name"] {
    font-size: 12px !important; text-align: left; width: 56px !important;
  }
  body.beam-notation .score.labels-expanded .track-label .vol-slider {
    flex: 1 1 70px; min-width: 60px; display: block !important;
  }
  /* M/S 在展开态保持可点 */
  body.beam-notation .score.labels-expanded .track-label [data-role="mute"],
  body.beam-notation .score.labels-expanded .track-label [data-role="solo"] {
    display: revert !important;
  }
}