/* Piano editor: compact controls, a shared pitch scroll, and a measured grid. */
#piano-roll-modal { z-index: 9100; padding: 20px; background: #090911b8; backdrop-filter: blur(5px); }
#piano-roll-modal .piano-roll-content { width: min(1120px, 96vw); height: min(760px, 90dvh); max-width: 100%; max-height: 94dvh; min-height: 280px; border-radius: 14px; box-shadow: 0 24px 90px #0008; }
#piano-roll-modal .piano-roll-header { flex: 0 0 auto; padding: 13px 18px; background: var(--primary-surface); gap: 12px; }
.pr-heading, .pr-header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pr-heading-icon { color: var(--accent-color); font-size: 20px; }
#piano-roll-modal #piano-roll-title { margin: 0; color: var(--text-color); font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
#piano-roll-modal button { min-height: 36px; padding: 0 11px; border-radius: 7px; box-shadow: none; font-size: 12px; gap: 7px; white-space: nowrap; }
#piano-roll-modal button:hover { transform: none; box-shadow: none; }
#piano-roll-modal button:disabled { opacity: .4; }
#piano-roll-modal :is(button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
#piano-roll-modal #close-piano-roll-btn { width: 34px; padding: 0; min-height: 34px; font-size: 26px; }
#piano-roll-modal #pr-add-to-library-btn { margin: 0; font-weight: 600; }
#piano-roll-modal .piano-roll-controls { display: block; flex: 0 0 auto; padding: 12px 18px 14px; max-height: 45dvh; overflow-y: auto; }
.pr-transport { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
#piano-roll-modal #pr-play-btn { background: var(--accent-color); color: #fff; min-width: 78px; }
#piano-roll-modal :is(#pr-stop-btn, #pr-undo-btn, #pr-redo-btn, #pr-clear-btn) { background: transparent; border-color: transparent; }
.pr-history { display: flex; padding-left: 8px; margin-left: 6px; border-left: 1px solid var(--border-color); }
.pr-loop-label { margin-left: auto; color: var(--text-muted-color); font-size: 11px; }
.pr-fields { display: grid; grid-template-columns: minmax(140px, 1fr) 82px 72px 110px minmax(170px, 1.3fr); gap: 12px; align-items: end; }
#piano-roll-modal .pr-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; color: var(--text-muted-color); font-size: 11px; }
.pr-field small { font-size: 9px; opacity: .75; }
#piano-roll-modal .pr-field :is(input, select) { width: 100%; min-width: 0; height: 36px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--secondary-surface); color: var(--text-color); font: inherit; font-size: 12px; }
#piano-roll-modal select option { background: var(--secondary-surface); color: var(--text-color); }
.pr-ruler-row { display: flex; height: 28px; flex: 0 0 28px; background: var(--track-header-bg); border-bottom: 1px solid var(--border-color); }
.pr-ruler-label { width: 64px; flex-shrink: 0; padding: 7px 10px; color: var(--text-muted-color); font-size: 10px; border-right: 1px solid var(--border-color); }
#pr-ruler-viewport { overflow: hidden; min-width: 0; flex: 1; }
#pr-ruler { display: flex; height: 28px; }
.pr-ruler-beat { flex: 0 0 96px; padding: 7px 8px; border-left: 1px solid var(--border-color); font-size: 10px; color: var(--text-muted-color); }
.pr-ruler-beat.is-bar { color: var(--text-color); font-weight: 600; }
#piano-roll-modal .piano-roll-main { min-height: 80px; flex: 1 1 0; }
#piano-roll-modal #pr-keyboard { width: 64px; overflow: hidden; padding-bottom: 12px; }
#piano-roll-modal .pr-key { width: 100%; height: 24px; min-height: 24px; border: 0; border-bottom: 1px solid #b9bbc2; border-radius: 0; justify-content: flex-end; padding: 0 10px 0 0; font-size: 10px; background: #e3e4eb; color: #505360; }
#piano-roll-modal .pr-key.black { width: 80%; background: #292b38; color: #b3b7cb; border-color: #161722; border-radius: 0 3px 3px 0; }
#piano-roll-modal .pr-key.is-c { color: #4338a3; font-weight: 700; }
#piano-roll-modal .pr-key:hover { background: #a8a1f0; color: #17132e; }
#piano-roll-modal #pr-grid-container { min-width: 0; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-x pan-y; }
#piano-roll-modal #pr-grid-container::-webkit-scrollbar { width: 10px; height: 10px; }
#piano-roll-modal #pr-grid { min-width: 0; cursor: crosshair; background: var(--track-bg); }
.pr-pitch-row { position: absolute; left: 0; right: 0; height: 24px; border-bottom: 1px solid var(--timeline-grid-color); pointer-events: none; }
.pr-pitch-row.black { background: #00000012; }
.pr-pitch-row.is-c { border-bottom-color: var(--border-color); }
#pr-grid::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--text-muted-color) 0 1px, transparent 1px 384px), repeating-linear-gradient(to right, var(--border-color) 0 1px, transparent 1px 96px), repeating-linear-gradient(to right, var(--timeline-grid-color) 0 1px, transparent 1px 24px); opacity: .6; }
#piano-roll-modal .pr-note { min-height: 22px; height: 22px; border: 1px solid #bcb5ff; border-radius: 4px; background: #7163cb; color: white; opacity: 1; justify-content: flex-start; padding: 0 5px; font-size: 10px; z-index: 2; touch-action: pan-x pan-y; }
#piano-roll-modal .pr-note:hover { background: #8c7ce4; border-color: white; }
#piano-roll-modal #pr-grid-playhead { background: #f3c86c; width: 2px; }
.pr-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border-color); padding: 9px 18px; min-height: 36px; font-size: 11px; color: var(--text-muted-color); }
#piano-roll-modal #pr-status { flex: 1; min-width: 0; min-height: 0; border: 0; padding: 0; text-align: left; font-size: inherit; }
#pr-pattern-summary { flex-shrink: 0; font-variant-numeric: tabular-nums; }
#piano-roll-modal .pr-resize-handle { width: 12px; height: 12px; opacity: .3; }
@media (max-width: 760px) {
  #piano-roll-modal { padding: 6px; }
  #piano-roll-modal .piano-roll-content { width: 100% !important; height: 94dvh !important; max-height: 94dvh !important; border-radius: 10px; }
  #piano-roll-modal .piano-roll-header { padding: 8px 10px; gap: 6px; }
  #piano-roll-modal #piano-roll-title { font-size: 16px; }
  .pr-heading-icon { display: none; }
  .pr-header-actions { gap: 4px; }
  #piano-roll-modal button { min-height: 44px; }
  #piano-roll-modal #close-piano-roll-btn { min-height: 44px; }
  #piano-roll-modal #pr-add-to-library-btn { padding: 0 8px; font-size: 11px; }
  #piano-roll-modal .piano-roll-controls { padding: 6px 10px 10px; max-height: 42dvh; }
  .pr-transport { gap: 2px; margin-bottom: 8px; }
  .pr-history { padding-left: 3px; margin-left: 2px; }
  .pr-loop-label { display: none; }
  .pr-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pr-instrument { grid-column: span 2; }
  .pr-example { grid-column: 1 / -1; }
  #piano-roll-modal .pr-field :is(input, select) { min-height: 44px; height: 44px; font-size: 16px; }
  #piano-roll-modal .pr-field:has(#pr-note-duration) { grid-column: span 2; }
  .pr-footer { padding: 7px 10px; font-size: 10px; }
  #piano-roll-modal .pr-key { min-height: 24px; }
  #piano-roll-modal .pr-note { min-height: 22px; }
  #piano-roll-modal .pr-resize-handle { display: none; }
}
@media (max-height: 500px) { #piano-roll-modal .pr-fields { grid-template-columns: minmax(100px, 1fr) 66px 60px 90px minmax(125px, 1fr); } #piano-roll-modal .pr-field { grid-column: auto; } #piano-roll-modal .piano-roll-header { padding: 3px 10px; } #piano-roll-modal .piano-roll-controls { padding: 4px 10px 8px; max-height: 40dvh; } .pr-transport { margin-bottom: 4px; } }