.app-mode-tabs {
  position: sticky;
  z-index: 18;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px clamp(12px, 3vw, 36px);
  border-bottom: 1px solid #dedee7;
  background: #fffffff2;
  backdrop-filter: blur(12px);
}
.app-mode-tab {
  min-height: 40px;
  padding: 7px 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}
.app-mode-tab.active {
  background: var(--indigo);
  color: #fff;
}
.composition-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: #f8f7f2;
  overflow-x: hidden;
  overflow-y: auto;
}
.composition-layer[hidden] {
  display: none;
}
.composition-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}
.composition-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(12px, 3vw, 36px);
  border-bottom: 3px solid var(--saffron);
  background: linear-gradient(120deg, #121238, #24245c);
  color: #fff;
}
.composition-brand,
.composition-app-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.composition-brand > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--saffron);
  color: #17172e;
  font-weight: 900;
}
.composition-app-tabs button {
  min-height: 40px;
  padding: 7px 14px;
}
.composition-app-tabs button.active {
  border-color: var(--saffron);
  background: var(--saffron);
  color: #17172e;
}
.composition-keyboard-bridge {
  position: fixed;
  z-index: -1;
  left: 50%;
  bottom: 1px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.composition-topbar button {
  min-width: 44px;
  border: 1px solid #ffffff45;
  border-radius: 10px;
  background: #ffffff10;
  color: #fff;
  font-weight: 800;
}
.composition-topbar h2 {
  font:
    700 clamp(1.1rem, 2.5vw, 1.55rem) Georgia,
    serif;
}
.composition-topbar p {
  color: #cfcfe7;
  font-size: 0.78rem;
}
.composition-content {
  width: min(1500px, 100%);
  margin: auto;
  padding: 22px clamp(12px, 3vw, 38px) 54px;
}
.composition-content.composition-content--inline {
  width: 100%;
  margin: 0;
  padding: 8px;
}
.composition-content--inline .composition-editor-head {
  padding: 0 2px;
}
.composition-content--inline .composition-workspace {
  width: 100%;
}
.composition-content--inline .composition-main {
  border-radius: 11px;
  box-shadow: none;
}
.composition-inline-settings {
  margin: 10px 8px;
  border: 1px solid #d9d9e2;
  border-radius: 9px;
  overflow: hidden;
}
.composition-inline-settings > summary {
  padding: 10px;
  cursor: pointer;
  color: var(--indigo);
  font-size: .875rem;
  font-weight: 750;
  background: #f5f5f8;
}
.composition-content--inline .composition-editor-head {
  padding: 8px;
  margin: 0;
}
.composition-content--inline .composition-editor-body {
  padding: 0;
}
.composition-content--raga {
  padding: 0 !important;
}
.composition-content--raga .composition-workspace,
.composition-content--raga .composition-main {
  display: block;
  width: 100%;
}
.composition-content--raga .composition-main {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.composition-content--raga .composition-panel {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.composition-content--raga .composition-toolbox {
  margin-top: 10px;
  border-top: 1px solid #dedeea;
}
.composition-content--raga .composition-editor-head,
.composition-content--raga .composition-inline-settings,
.composition-content--raga #compositionSectionTabs {
  display: none !important;
}
.composition-content--raga .composition-view-tabs,
.composition-content--raga .composition-unified > .viewer-legend {
  display: none !important;
}
.notation-card:not(.editor-mode) .composition-content--raga .composition-toolbox {
  display: none !important;
}
.notation-card.editor-mode .composition-content--raga .composition-toolbox {
  display: block !important;
}
.notation-card:not(.editor-mode) .composition-content--raga .composition-commandbar,
.notation-card:not(.editor-mode) .composition-content--raga .composition-projectbar,
.notation-card:not(.editor-mode) .composition-content--raga .composition-clipboardbar,
.notation-card:not(.editor-mode) .composition-content--raga .composition-inspector {
  display: none !important;
}
.composition-content--raga .composition-keyboard-head {
  grid-template-columns: auto minmax(0, 1fr);
}
.composition-content--raga .composition-staff-wrap {
  min-height: var(--staff-viewport-height, 220px);
}
.composition-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.composition-list-head h3,
.composition-editor-title {
  font:
    700 clamp(1.6rem, 3.5vw, 2.3rem) Georgia,
    serif;
  color: var(--indigo);
}
.composition-list-actions,
.composition-card-actions,
.composition-save-actions,
.composition-view-tabs,
.composition-toolbar,
.composition-duration,
.composition-palette {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.composition-action {
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid #d5d5df;
  border-radius: 9px;
  background: #fff;
  color: var(--indigo);
  font-weight: 780;
}
.composition-action.primary {
  border-color: var(--saffron);
  background: var(--saffron);
  color: #1d1830;
}
.composition-action.danger {
  color: #a22a2a;
}
.composition-empty {
  padding: 48px 22px;
  border: 1px dashed #cfcfda;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  color: var(--muted);
}
.composition-empty strong {
  display: block;
  margin-bottom: 6px;
  color: var(--indigo);
  font:
    700 1.3rem Georgia,
    serif;
}
.composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}
.composition-card {
  padding: 17px;
  border: 1px solid #dedee7;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 26px #1717430c;
}
.composition-card h4 {
  margin: 0 0 5px;
  font:
    700 1.15rem Georgia,
    serif;
  color: var(--indigo);
}
.composition-card p {
  min-height: 38px;
  color: var(--muted);
  font-size: 0.78rem;
}
.composition-card-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 11px 0;
}
.composition-chip {
  padding: 3px 7px;
  border-radius: 20px;
  background: #f1f1f6;
  color: #505066;
  font-size: 0.68rem;
  font-weight: 750;
}
.composition-card-actions {
  margin-top: 13px;
}
.composition-card-actions button {
  flex: 1;
  min-height: 36px;
  font-size: 0.74rem;
}
.composition-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.composition-editor-title input {
  width: min(620px, 100%);
  border: 0;
  border-bottom: 2px solid #d9d9e3;
  background: transparent;
  color: inherit;
  font: inherit;
}
.composition-editor-title input:focus {
  outline: 0;
  border-bottom-color: var(--saffron);
}
.composition-breadcrumb {
  display: block;
  margin-bottom: 5px;
  color: #9b5b0b;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.composition-save-state {
  color: var(--muted);
  font-size: 0.73rem;
}
.composition-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.composition-main,
.composition-inspector {
  min-width: 0;
  border: 1px solid #dedee7;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.composition-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 9px;
  padding: 14px;
  border-bottom: 1px solid #ececf2;
  background: #fafafd;
}
.composition-meta label,
.composition-inspector label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}
.composition-meta input,
.composition-meta select,
.composition-inspector input,
.composition-inspector select,
.composition-text-input {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid #cfcfdb;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}
.composition-meta .wide {
  grid-column: span 2;
}
.composition-tonic-field {
  align-items: stretch;
}
.composition-tonality-context {
  color: var(--indigo);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.composition-raga-field {
  position: relative;
}
.composition-raga-field > label {
  display: grid;
  gap: 4px;
}
.composition-raga-field .raga-picker select {
  min-width: 0;
}
.composition-raga-search-panel {
  top: calc(100% + 2px);
}
.composition-tanpura {
  min-width: 0;
  margin: 0;
  padding: 7px 9px 9px;
  border: 1px solid #d7d7e1;
  border-radius: 9px;
  background: #fff;
}
.composition-tanpura summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: .68rem;
  font-weight: 800;
}
.composition-tanpura summary::-webkit-details-marker {
  display: none;
}
.composition-tanpura summary::before {
  content: "▸";
  color: var(--saffron);
  font-size: .9rem;
}
.composition-tanpura[open] summary::before {
  content: "▾";
}
.composition-tanpura summary small {
  overflow: hidden;
  color: var(--indigo);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composition-tanpura[open] summary {
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ececf2;
}
.composition-tanpura > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 7px;
}
.composition-audio-card {
  display: grid;
  grid-template-columns: auto minmax(130px, 1.3fr) repeat(2, minmax(135px, 1fr)) auto minmax(135px, 1fr);
  align-items: end;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #ececf2;
  background: #f7f7fa;
}
.composition-audio-card > strong {
  align-self: center;
  color: var(--indigo);
}
.composition-audio-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}
.composition-audio-card select {
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid #cfcfdb;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}
.composition-audio-card input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}
.composition-audio-card .composition-metronome-toggle {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  color: var(--indigo);
  white-space: nowrap;
}
.composition-audio-card .composition-metronome-toggle input {
  width: auto;
}
.composition-tanpura-choice {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 5px !important;
  color: var(--indigo) !important;
  font-size: .67rem !important;
}
.composition-tanpura-choice input { width: auto; min-height: 0; }
.composition-tanpura-toggle {
  grid-column: 1 / -1;
  min-height: 38px;
  margin-top: 4px;
  border: 0;
  border-radius: 9px;
  background: var(--saffron);
  color: var(--indigo);
  font-weight: 900;
  cursor: pointer;
}
.composition-tanpura-toggle.on {
  background: var(--teal);
  color: #fff;
}
.composition-view-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid #ececf2;
  overflow: visible;
}
.composition-edit-toggle {
  min-height: 42px;
  padding: 7px 14px;
  border: 1px solid var(--teal);
  border-radius: 9px;
  background: #fff;
  color: var(--teal);
  font-weight: 900;
  white-space: nowrap;
}
.composition-edit-toggle.active {
  background: var(--teal);
  color: #fff;
}
.composition-edit-tools {
  display: block;
  padding: 10px 14px 14px;
  overflow: visible;
  background: #f8f8fb;
}
.composition-edit-tools.disabled {
  opacity: 0.48;
}
.composition-tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 9px;
  border-right: 1px solid #dedee7;
  white-space: nowrap;
}
.composition-tool-group:last-child {
  border-right: 0;
}
.composition-tool-group > strong {
  color: var(--muted);
  font-size: 0.7rem;
}
.composition-direct-hint {
  margin: 0;
  padding: 7px 13px 9px;
  border-top: 1px solid #ececf2;
  color: var(--muted);
  font-size: 0.7rem;
}
.composition-view-tab {
  min-height: 38px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  min-width: 0;
}
.composition-view-tab.active {
  background: var(--indigo);
  color: #fff;
}
.composition-view-tab[aria-pressed="false"] {
  border: 1px solid #ddddE7;
}
.composition-toolbar {
  padding: 9px 14px;
  border-bottom: 1px solid #ececf2;
  background: #f8f8fb;
}
.composition-toolbar-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}
.composition-duration button,
.composition-palette button {
  min-width: 38px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid #d7d7e1;
  border-radius: 8px;
  background: #fff;
  color: var(--indigo);
  font-weight: 800;
}
.composition-toolbox {
  border-top: 1px solid #e2e2e9;
  background: #f3f3f7;
  box-shadow: inset 0 1px #fff;
}
.composition-keyboard-head {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px 7px;
}
.composition-pencil {
  width: 44px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--teal);
  border-radius: 9px;
  background: #fff;
  color: var(--teal);
  font-size: 1.35rem;
  font-weight: 900;
}
.composition-pencil.active {
  background: var(--teal);
  color: #fff;
}
.composition-keyboard-head > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.composition-commandbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 9px;
}
.composition-commandbar > button {
  min-width: 0;
  padding-inline: 7px;
}
.composition-commandbar > .composition-pencil {
  width: 100%;
}
.composition-commandbar .active {
  border-color: var(--teal);
  background: #e7f4f2;
  color: var(--teal);
}
.composition-commandbar--viewer {
  padding-top: 6px;
  border-top: 1px solid #e2e2e9;
  border-bottom: 1px solid #e2e2e9;
  background: #f3f3f7;
}
.composition-clipboardbar {
  display: flex;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid #e2e2e9;
  background: #fff8eb;
}
.composition-clipboardbar button {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid #d4c7ad;
  border-radius: 7px;
  background: #fff;
  color: var(--indigo);
  font-weight: 800;
}
.composition-projectbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 14px 8px;
  background: #f3f3f7;
}
.composition-projectbar button {
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  font-size: .76rem;
}
.composition-content--raga .composition-clipboardbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 5px 14px;
}
.composition-content--raga .composition-clipboardbar button {
  min-width: 0;
  padding: 3px 6px;
  font-size: .76rem;
}
.composition-input-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
}
.composition-input-tabs button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #d5d5df;
  border-radius: 9px;
  background: #e4e4eb;
  color: var(--indigo);
  font-weight: 850;
}
.composition-input-tabs button.active {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 4px 10px #17174320;
}
.mode-tool-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tool-block {
  min-width: 0;
  padding: 9px;
  border: 1px solid #d8d8e2;
  border-radius: 10px;
  background: #fff;
}
.tool-block > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.75rem;
}
.tool-block--meend,
.mode-tool-help {
  grid-column: 1 / -1;
}
.mode-tool-content--sargam {
  grid-template-columns: 1fr;
  align-items: start;
}
.mode-tool-content--sargam .tool-block--keyboard {
  grid-column: 1 / -1;
}
.mode-tool-content--sargam .sargam-keyboard {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.mode-tool-content--sargam .tool-block--division {
  grid-column: 1 / -1;
  align-self: start;
}
.mode-tool-content--sargam .tool-block--register,
.mode-tool-content--notes .tool-block--keyboard,
.mode-tool-content--notes .tool-block--register,
.mode-tool-content--notes .tool-block--duration,
.mode-tool-content--notes .tool-block--meend {
  grid-column: 1 / -1;
}
.sargam-register-inline {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e5ec;
}
.sargam-register-inline > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .75rem;
}
.meend-tool-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  border: 1px solid #d7d7e1;
  border-radius: 8px;
  background: #fff;
  color: var(--indigo);
  font-weight: 850;
}
.tool-button-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  overflow: visible;
}
.tool-button-row button,
.inline-tool {
  min-width: 44px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid #d7d7e1;
  border-radius: 8px;
  background: linear-gradient(#fff, #f4f4f7);
  color: var(--indigo);
  font-size: 0.88rem;
  font-weight: 850;
}
.tool-button-row button.active,
.inline-tool.active {
  border-color: var(--teal);
  background: #e4f4f2;
  color: #095e5a;
}
.tool-button-row button.raga-unused {
  color: #a5a5b0;
  background: #eeeeF2;
  opacity: .62;
}
.tool-button-row button.raga-used {
  border-color: var(--teal);
  background: #e4f4f2;
  color: #095e5a;
  box-shadow: inset 0 0 0 1px #168c86;
}
.composition-duration {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.composition-duration--legacy {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.composition-duration button {
  display: grid;
  min-width: 0;
  place-items: center;
}
.composition-duration small {
  font-size: 0.65rem;
}
.tuplet-keyboard button {
  display: grid;
  min-width: 0;
  place-items: center;
}
.tuplet-keyboard small {
  font-size: .58rem;
}
.tuplet-symbol {
  position: relative;
  display: grid;
  width: 28px;
  height: 17px;
  place-items: center;
  font-weight: 900;
}
.tuplet-symbol::before {
  position: absolute;
  inset: 2px 0 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  content: "";
}
.tuplet-symbol i {
  position: relative;
  padding: 0 3px;
  background: inherit;
  font-style: normal;
  line-height: 1;
}
.degree-keyboard,
.sargam-keyboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.degree-keyboard button,
.sargam-keyboard button {
  min-width: 0;
}
.direct-entry-keyboard {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.direct-entry-keyboard button,
.note-rhythm-keyboard button {
  min-width: 0;
  height: 54px;
  padding: 5px 4px;
  border: 1px solid #d7d7e1;
  border-radius: 8px;
  background: linear-gradient(#fff, #f4f4f7);
  color: var(--indigo);
  font-weight: 850;
}
.direct-entry-keyboard button.active,
.direct-entry-keyboard button.raga-used,
.note-rhythm-keyboard button.active {
  border-color: var(--teal);
  background: #e4f4f2;
  color: #095e5a;
}
.direct-entry-keyboard button.raga-unused {
  color: #a5a5b0;
  background: #eeeef2;
  opacity: .62;
}
.note-rhythm-keyboard {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.note-rhythm-keyboard button {
  display: grid;
  place-items: center;
  gap: 1px;
}
.note-rhythm-keyboard button>small {
  font-size: .58rem;
}
.rhythm-choice-symbol {
  position: relative;
  display: grid;
  min-height: 31px;
  place-items: center;
  line-height: 1;
}
.rhythm-note-icon,
.rhythm-rest-icon {
  display: block;
  width: 25px;
  height: 34px;
  overflow: visible;
  fill: currentColor;
}
.rhythm-icon-stem,
.rhythm-icon-flag {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
}
.rhythm-choice-symbol>small {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  padding: 0 2px;
  transform: translateX(-50%);
  background: inherit;
  font-size: .62rem;
  font-weight: 900;
}
.direct-rest-symbol {
  display: grid;
  place-items: center;
}
.compact-entry-label {
  display: grid;
  min-width: 0;
  place-items: center;
  overflow-wrap: anywhere;
  font-size: .68rem;
  line-height: 1.02;
}
.compact-entry-label small {
  font-size: .56rem;
  font-weight: 850;
}
.legacy-tuplet-keyboard {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.legacy-tuplet-keyboard button {
  width: 100%;
  height: 54px;
  min-width: 0;
  padding: 5px 4px;
}
.mode-tool-help {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.composition-duration button.active,
.composition-palette button.active {
  border-color: var(--saffron);
  background: var(--saffron-soft);
}
.composition-editor-body {
  padding: 14px;
}
.composition-view {
  display: none;
}
.composition-view.active {
  display: block;
}
.composition-parallel {
  display: grid;
  gap: 12px;
}
.composition-panel {
  padding: 13px;
  border: 1px solid #e2e2e9;
  border-radius: 12px;
  background: #fff;
}
.composition-panel h4 {
  margin: 0 0 8px;
  color: var(--indigo);
}
.composition-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.composition-text-input {
  font:
    750 1rem ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  min-height: 58px;
  resize: vertical;
  line-height: 1.55;
  caret-color: var(--teal);
}
.composition-text-input.invalid {
  border-color: #c84747;
  background: #fff8f8;
  box-shadow: 0 0 0 2px #c8474718;
}
.composition-entry-panel {
  display: grid;
  gap: 8px;
}
.composition-entry-panel .composition-hint {
  margin: 0;
}
.composition-unified {
  padding: 0;
  overflow: hidden;
}
.composition-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid #e5e5ec;
  background: #fafafd;
}
.composition-viewer-head h4 {
  margin: 0;
}
.composition-viewer-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}
.composition-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.composition-score-zoom {
  display: grid;
  grid-template-columns: 38px 48px 38px;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.composition-score-zoom button {
  min-width: 0;
  min-height: 36px;
  padding: 3px;
  font-size: 1.1rem;
}
.composition-score-zoom output {
  color: var(--muted);
  text-align: center;
  font-size: .72rem;
  font-weight: 850;
}
.composition-transport button {
  min-width: 42px;
  padding-inline: 9px;
  font-size: 1rem;
}
.composition-transport button.active {
  border-color: var(--teal);
  background: #e7f4f2;
  color: var(--teal);
}
.composition-staff-tools {
  padding: 8px 13px;
  border-bottom: 1px solid #ececf2;
}
.composition-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.7rem;
}
.composition-token-strip {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.composition-token {
  min-width: 32px;
  min-height: 31px;
  padding: 3px 7px;
  border: 1px solid #e1e1e8;
  border-radius: 7px;
  background: #fafafd;
  color: var(--ink);
  font-weight: 800;
}
.composition-token.selected {
  border-color: var(--teal);
  background: #e9f7f5;
  color: #0b625e;
}
.composition-token.rest {
  color: var(--muted);
}
.composition-staff-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: #fff;
  scrollbar-width: none;
}
.composition-staff-wrap::-webkit-scrollbar {
  display: none;
}
.composition-score-scroll {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px 8px;
  border-top: 1px solid #ececf2;
  background: #fff;
}
.composition-score-scroll input {
  width: 100%;
  margin: 0;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  accent-color: var(--saffron);
}
.composition-score-scroll input::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--saffron), #f3c47f);
}
.composition-score-scroll input::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 1px 5px #17174355;
  -webkit-appearance: none;
}
.composition-score-scroll input:disabled {
  opacity: 0.35;
}
.composition-staff {
  display: block;
  height: auto;
  min-height: 118px;
  min-width: 100%;
  touch-action: pan-x pan-y;
}
.composition-staff,
.composition-staff * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.composition-staff.meend-editing {
  cursor: crosshair;
  touch-action: none;
}
.composition-staff.editing {
  touch-action: none;
}
.composition-staff .composition-entry-preview {
  pointer-events: none;
}
.composition-staff .composition-entry-preview line {
  stroke: #d99524;
  stroke-width: 1.5;
}
.composition-staff .composition-entry-preview ellipse {
  fill: #f3b33f;
  fill-opacity: .28;
  stroke: #d99524;
  stroke-width: 1.25;
}
.composition-staff .composition-meend {
  fill: none;
  stroke: #16847f;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #ffffffcc);
}
.composition-staff .composition-meend--sargam { stroke: #16847f; }
.composition-staff .composition-meend.draft {
  stroke-dasharray: 5 3;
  opacity: .78;
}
.composition-staff .line {
  stroke: #4d4d62;
  stroke-width: 1.4;
}
.composition-staff .grid {
  stroke: #d8d8e1;
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.composition-staff .head {
  fill: var(--indigo);
}
.composition-staff .head.open {
  fill: #fff;
  stroke: var(--indigo);
  stroke-width: 2;
}
.composition-staff .stem,
.composition-staff .ledger,
.composition-staff .note-flag {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.7;
}
.composition-staff .acc {
  fill: var(--indigo);
  font-size: 19px;
}
.composition-staff .label {
  fill: #67677b;
  font-size: 11px;
}
.composition-staff .lane-title {
  fill: #7a7a8e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.composition-staff .measure-label {
  fill: #8a8a9b;
  font-size: 9px;
  font-weight: 700;
}
.composition-staff .lane-value {
  fill: var(--indigo);
  font-size: 14px;
  font-weight: 800;
}
.composition-staff .note-name {
  fill: #666679;
  font-size: 11px;
  font-weight: 650;
}
.composition-staff .degree-value {
  fill: #302f54;
}
.composition-staff .sargam-value {
  fill: var(--indigo);
}
.composition-staff .event.has-note-role .head { stroke: var(--note-role-head-paint); }
.composition-staff .event.has-note-role .head:not(.open) { fill: var(--note-role-head-paint); }
.composition-staff .event.has-note-role .stem,
.composition-staff .event.has-note-role .note-flag { stroke: var(--note-role-paint); }
.composition-staff .event.has-note-role .lane-value,
.composition-staff .event.has-note-role .acc { fill: var(--note-role-paint); }
.composition-staff .duration-value {
  fill: #77778b;
  font-size: 9px;
  font-weight: 650;
}
.composition-staff .rhythm-sargam {
  fill: var(--indigo);
  font-size: 14px;
  font-weight: 800;
}
.composition-staff .rhythm-stem,
.composition-staff .rhythm-flag {
  fill: none;
  stroke: var(--indigo);
  stroke-linecap: round;
  stroke-width: 1.6;
}
.composition-staff .rhythm-beam {
  stroke: var(--indigo);
  stroke-linecap: butt;
  stroke-width: 3.2;
  pointer-events: none;
}
.composition-staff .staff-beam {
  stroke: var(--indigo);
  stroke-linecap: butt;
  stroke-width: 5.2;
  pointer-events: none;
}
.composition-staff .staff-tuplet path {
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.25;
  pointer-events: none;
}
.composition-staff .staff-tuplet text {
  fill: var(--indigo);
  font-size: 10px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  pointer-events: none;
}
.composition-staff .rhythm-rest {
  fill: var(--indigo);
  font-size: 10px;
  font-weight: 700;
}
.composition-staff .rhythm-rest-symbol {
  fill: var(--indigo);
  pointer-events: none;
}
.composition-staff .rhythm-rest-stem,
.composition-staff .rhythm-rest-flag {
  fill: none;
  stroke: var(--indigo);
  stroke-linecap: round;
  stroke-width: 2.2;
}
.composition-staff .rhythm-tuplet {
  fill: #55546c;
  font-size: 9px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
}
.composition-staff .rhythm-event.selected .rhythm-sargam {
  fill: var(--teal);
  filter: drop-shadow(0 0 3px #167d7977);
}
.composition-staff .rhythm-event.selected .rhythm-stem,
.composition-staff .rhythm-event.selected .rhythm-flag {
  stroke: var(--teal);
}
.composition-staff .composition-caret line,
.composition-staff .composition-caret path {
  stroke: var(--teal);
  stroke-width: 2;
  animation: composition-caret-blink 1s step-end infinite;
}
.composition-staff .matra-bracket path {
  fill: none;
  stroke: var(--saffron);
  stroke-width: 1.7;
}
.composition-staff .matra-bracket text {
  fill: #985a0d;
  font-size: 10px;
  font-weight: 850;
}
@keyframes composition-caret-blink {
  50% { opacity: 0; }
}
.composition-staff .barline {
  stroke: #69697c;
  stroke-width: 2;
}
.composition-staff .composition-playhead {
  stroke: var(--saffron);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  opacity: 0;
  pointer-events: none;
}
.composition-staff .composition-playhead.active {
  opacity: 1;
}
.composition-staff .composition-edit-cursor-box {
  fill: #f3b33f;
  fill-opacity: .22;
  stroke: #d99524;
  stroke-opacity: .62;
  stroke-width: 1.2;
  opacity: 0;
  pointer-events: none;
}
.composition-staff .composition-edit-cursor-box.active {
  opacity: 1;
}
.composition-staff .composition-playhead.editing {
  stroke: #c98218;
  stroke-dasharray: none;
}
.composition-staff.editing .event {
  cursor: grab;
  touch-action: none;
}
.composition-staff.editing{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.composition-staff.pitch-dragging .event.selected{cursor:grabbing}
.composition-staff.pitch-dragging .event.selected .head{filter:drop-shadow(0 0 5px #167d79aa)}
.composition-staff.viewing .event {
  cursor: default;
  touch-action: pan-y;
}
.composition-staff.viewing { touch-action: pan-y; }
.composition-staff.viewing.meend-editing,
.composition-staff.viewing.meend-editing .event {
  touch-action: none;
}
.composition-staff.range-selecting { touch-action: none; }
.composition-staff .event.selected .head {
  filter: drop-shadow(0 0 3px #167d7977);
}
.composition-staff .rest-symbol {
  fill: var(--indigo);
  font-size: 24px;
}
.composition-staff .staff-rest {
  fill: var(--indigo);
  pointer-events: none;
}
.composition-staff .staff-rest-stem,
.composition-staff .staff-rest-flag {
  fill: none;
  stroke: var(--indigo);
  stroke-linecap: round;
  stroke-width: 2.2;
}
.composition-staff .key-accidental {
  font-size: 21px;
}
.composition-staff .clef {
  font-size: 68px;
}
.composition-inspector {
  align-self: start;
  position: sticky;
  top: 76px;
  padding: 15px;
}
.composition-inspector h3 {
  margin: 0 0 12px;
  font:
    700 1.15rem Georgia,
    serif;
  color: var(--indigo);
}
.composition-inspector-grid {
  display: grid;
  gap: 10px;
}
.composition-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}
.composition-inspector-actions button {
  min-height: 38px;
}
.composition-section-tabs {
  display: flex;
  gap: 6px;
  overflow: visible;
  flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid #ececf2;
}
.composition-section-tabs button {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #d8d8e2;
  border-radius: 8px;
  background: #fff;
  color: var(--indigo);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.composition-section-tabs button.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.composition-section-tabs .add {
  border-style: dashed;
}
.composition-confirm {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #17172e88;
}
.composition-confirm[hidden] {
  display: none;
}
.composition-confirm-card {
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 80px #0004;
}
.composition-confirm-card h3 {
  font:
    700 1.35rem Georgia,
    serif;
  color: var(--indigo);
}
.composition-confirm-card p {
  margin: 8px 0 18px;
  color: var(--muted);
}
.composition-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.composition-dirty {
  color: #9b5b0b;
  font-weight: 750;
}
@media (max-width: 980px) {
  .composition-workspace {
    grid-template-columns: 1fr;
  }
  .composition-inspector {
    position: static;
  }
  .composition-meta {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}
@media (max-width: 620px) {
  .composition-content {
    padding: 8px 5px 28px;
  }
  .composition-content.composition-content--inline {
    padding: 5px;
  }
  .composition-topbar {
    padding: 6px 8px;
  }
  .composition-brand > span {
    width: 34px;
    height: 34px;
  }
  .composition-topbar h2 {
    font-size: 1rem;
  }
  .composition-topbar p {
    display: none;
  }
  .composition-list-head,
  .composition-editor-head {
    align-items: stretch;
    flex-direction: column;
  }
  .composition-meta {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
  }
  .composition-meta input,
  .composition-meta select {
    min-height: 34px;
    padding: 4px 7px;
  }
  .composition-editor-head {
    gap: 7px;
    margin-bottom: 7px;
  }
  .composition-editor-title {
    font-size: 1.25rem;
  }
  .composition-save-actions .composition-action {
    min-height: 34px;
  }
  .composition-meta .wide {
    grid-column: 1/-1;
  }
  .composition-tanpura > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .composition-raga-search-panel {
    position: fixed;
    z-index: 120;
    inset: 82px 7px auto;
    max-height: calc(100vh - 96px);
  }
  .composition-audio-card {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 8px;
  }
  .composition-audio-card > strong {
    grid-column: 1 / -1;
  }
  .composition-audio-card .composition-metronome-toggle {
    min-height: 38px;
  }
  .composition-view-tabs,
  .composition-toolbar,
  .composition-section-tabs {
    padding: 5px 7px;
  }
  .composition-section-tabs button {
    min-height: 30px;
    padding: 3px 8px;
  }
  .composition-editor-body {
    padding: 5px;
  }
  .composition-input-row {
    grid-template-columns: 1fr;
  }
  .composition-viewer-head {
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 7px;
  }
  .composition-viewer-head p {
    display: none;
  }
  .composition-viewer-head h4 {
    font-size: 0.88rem;
  }
  .composition-transport {
    display: flex;
    width: 100%;
    overflow: visible;
    gap: 4px;
  }
  .composition-score-zoom {
    flex: 0 0 auto;
    grid-template-columns: 30px 40px 30px;
    margin-left: auto;
    gap: 2px;
  }
  .composition-transport > button {
    flex: 1 1 34px;
  }
  .composition-transport button {
    min-width: 0;
    min-height: 34px;
    padding: 3px;
    font-size: 0.86rem;
  }
  .composition-view-tab {
    min-height: 32px;
    padding: 3px 5px;
    font-size: 0.76rem;
  }
  .composition-direct-hint {
    padding: 4px 7px 5px;
    font-size: 0.65rem;
  }
  .composition-commandbar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 0 6px 5px;
  }
  .composition-projectbar,
  .composition-content--raga .composition-clipboardbar {
    gap: 4px;
    padding: 0 6px 5px;
  }
  .composition-keyboard-head {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px;
    padding: 5px 6px 4px;
  }
  .composition-keyboard-head > span {
    display: none;
  }
  .composition-pencil {
    width: 40px;
    min-height: 34px;
    font-size: 1.15rem;
  }
  .composition-commandbar > button,
  .composition-edit-toggle {
    min-height: 34px;
    padding: 3px 5px;
    font-size: 0.72rem;
  }
  .composition-commandbar > button span {
    display: none;
  }
  .composition-commandbar > button {
    font-size: 1rem;
  }
  .composition-input-tabs {
    gap: 4px;
  }
  .composition-input-tabs button {
    min-height: 34px;
    padding: 3px 5px;
    font-size: 0.78rem;
  }
  .composition-edit-tools {
    padding: 4px 6px 7px;
  }
  .mode-tool-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .tool-block {
    padding: 5px;
    border-radius: 7px;
  }
  .tool-block--keyboard,
  .mode-tool-help {
    grid-column: 1 / -1;
  }
  .tool-block > strong {
    margin-bottom: 4px;
    font-size: 0.66rem;
  }
  .tool-button-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .composition-duration {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .composition-duration--legacy {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .degree-keyboard,
  .sargam-keyboard {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .mode-tool-content--sargam .sargam-keyboard {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .mode-tool-content--sargam .tool-block--keyboard {
    grid-column: 1 / -1;
  }
  .direct-entry-keyboard {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  .mode-tool-content--sargam .direct-entry-keyboard {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .note-rhythm-keyboard {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  .legacy-tuplet-keyboard {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  .direct-entry-keyboard button,
  .note-rhythm-keyboard button,
  .legacy-tuplet-keyboard button {
    height: 48px;
    min-height: 48px;
    padding: 3px 2px;
    font-size: .7rem;
  }
  .note-rhythm-keyboard button>small {
    display: none;
  }
  .tuplet-keyboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tool-button-row button,
  .inline-tool {
    min-width: 0;
    min-height: 34px;
    padding: 3px 4px;
    border-radius: 6px;
    font-size: 0.76rem;
  }
  .composition-duration small {
    font-size: 0.58rem;
  }
  .mode-tool-help {
    display: none;
  }
  .composition-grid {
    grid-template-columns: 1fr;
  }
  .composition-staff {
    min-height: 96px;
  }
  .composition-inspector {
    padding: 12px;
  }
}
@media (orientation: landscape) and (max-height: 600px) {
  .composition-topbar {
    padding-block: 5px;
  }
  .composition-content {
    padding: 8px;
  }
  .composition-meta {
    padding: 7px;
  }
  .composition-view-tabs,
  .composition-toolbar {
    padding-block: 5px;
  }
  .composition-editor-body {
    padding: 7px;
  }
  .composition-staff {
    min-height: 108px;
  }
  .composition-inspector {
    top: 54px;
  }
}

/* Keep the two link actions inside their existing half-width tool card. */
.tool-block--links { min-width: 0; }
.tool-block--links .tool-button-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.tool-block--links .tool-button-row button { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.mode-tool-content--sargam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-tool-content--sargam .tool-block--meend { grid-column: 1 / -1; }

/* Role outlines preserve the separate raga-membership fill. */
.direct-entry-keyboard button.has-role-outline{position:relative;opacity:1}
.direct-entry-keyboard button.has-role-outline::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:3px;background:var(--note-role-border);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.composition-staff.readonly .event{cursor:default}
.composition-staff.readonly .event.playing .head{filter:drop-shadow(0 0 4px #df921c)}

.rhythm-note-icon .rhythm-open-head,.rhythm-notation .rhythm-open-head{fill:#fff;stroke:currentColor;stroke-width:2}

/* Guitar Pro reference glyphs retain their proportions inside each input button. */
.rhythm-note-icon{width:30px;height:48px;overflow:visible}
.rhythm-rest-icon{width:26px;height:44px}
.rhythm-choice-symbol{min-height:48px}
.carnatic-direction-palette{display:grid;gap:.35rem;margin:.45rem 0}.carnatic-direction-palette>small{font-weight:700;opacity:.78}.carnatic-direction-palette .direct-entry-keyboard{display:flex;flex-wrap:wrap;gap:.35rem}.carnatic-direction-palette button small{display:block;font-size:.72rem;opacity:.72}

/* The common player is outside the score; its horizontal zoom stays local. */
.composition-horizontal-label { display:none; }
.composition-content--raga .composition-viewer-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.composition-content--raga .composition-horizontal-label { display:block; color:var(--muted); font-size:14px; }
.composition-content--raga .composition-transport { width:auto; margin-left:auto; }
.composition-content--raga .composition-transport > button { display:none; }
.composition-content--raga .composition-score-zoom { margin:0; }

.composition-part-select { min-width:0; max-width:100%; width:auto; flex:1 1 130px; min-height:44px; font-size:16px; padding:8px; border:1px solid var(--border,#d8d8e5); border-radius:10px; background:var(--panel,#fff); color:inherit; }

.composition-part-picker { position:relative; flex:1 1 130px; min-width:0; }
.composition-part-picker>summary { min-height:44px; padding:10px; box-sizing:border-box; cursor:pointer; border:1px solid var(--border,#d8d8e5); border-radius:10px; background:var(--panel,#fff); font-size:16px; }
.composition-part-list { position:relative; width:100%; min-width:0; box-sizing:border-box; margin-top:6px; max-height:320px; overflow:auto; padding:8px; border:1px solid #d8d8e5; border-radius:10px; background:#fff; color:#19173f; box-shadow:0 8px 24px #19173f22; }
.composition-part-list label { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px; white-space:nowrap; }
.composition-part-list input[type=checkbox] { width:20px; height:20px; margin:0; flex:none; }
.composition-part-list button { min-height:44px; }
.composition-part-pages { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.composition-part-hint { display:block; padding:8px; font-size:14px; }

.composition-viewer-head:has(.composition-part-picker[open]) { align-items:flex-start; }

/* The part picker owns a full-width row when open; zoom cannot squeeze it. */
.composition-content--raga .composition-viewer-head.viewer-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; }
.composition-part-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; }
.composition-part-controls .composition-part-heading { grid-column:1/-1; display:flex; align-items:center; gap:8px; min-height:32px; font-size:14px; color:var(--muted); }
.composition-part-heading input[type=checkbox] { width:20px; height:20px; margin:0; flex:none; }
.composition-part-controls .composition-part-select { width:100%; min-width:0; box-sizing:border-box; padding-right:24px; font-size:16px; }
.composition-part-controls .composition-part-picker { width:100%; min-width:0; }
.composition-part-controls .composition-part-picker[hidden] { display:none; }
.composition-part-controls .composition-part-picker[open] { grid-column:1/-1; }
.composition-part-controls .composition-part-picker>summary { width:100%; white-space:normal; overflow-wrap:break-word; }
.composition-part-controls .composition-part-list { width:100%; overflow-x:hidden; box-shadow:none; }
.composition-part-controls .composition-part-list label { width:100%; box-sizing:border-box; font-size:16px; }
@media(max-width:600px) {
 .composition-content--raga .composition-viewer-head.viewer-toolbar { grid-template-columns:minmax(0,1fr); }
 .composition-content--raga .composition-viewer-head .composition-transport { justify-self:end; }
}

.composition-content--raga .composition-viewer-head.viewer-toolbar .composition-transport { width:auto; min-width:0; margin-left:auto; }

@media(max-width:600px) { .composition-part-controls { grid-template-columns:minmax(0,1fr); } }

.composition-part-controls .composition-reference-control { display:grid; grid-column:1/-1; min-width:0; gap:6px; font-size:14px; color:var(--muted); }
.composition-part-controls .composition-reference-control[hidden] { display:none; }
.composition-part-controls .composition-reference-control select { width:100%; min-width:0; box-sizing:border-box; min-height:44px; font-size:16px; padding:8px 24px 8px 8px; color:var(--indigo); }

.score-continuation-tie { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; pointer-events:none; }

.composition-staff .event.is-scale-tonic .head{fill:var(--scale-tonic-ink,#4d73b8);stroke:var(--scale-tonic-ink,#4d73b8);stroke-width:2}
.composition-staff .event.is-scale-tonic .head.open{fill:var(--scale-tonic-soft,#e3ebf8)}

/* v138: note outlines and stems share one role colour; fills stay unchanged. */
.composition-staff .event { --staff-note-outline: #000; }
.composition-staff .event.role-samvadi { --staff-note-outline: #299a58; }
.composition-staff .event.role-vadi { --staff-note-outline: #d83232; }
.composition-staff .event .head,
.composition-staff .event.has-note-role .head,
.composition-staff .event.is-scale-tonic .head {
  stroke: var(--staff-note-outline) !important; stroke-width: 2 !important;
}
.composition-staff .event .stem,
.composition-staff .event.has-note-role .stem,
.composition-staff .event .note-flag,
.composition-staff .event.has-note-role .note-flag {
  stroke: var(--staff-note-outline) !important; stroke-linecap: butt;
}
.composition-staff .event.role-samvadi .lane-value,
.composition-staff .event.role-vadi .lane-value,
.composition-staff .event.role-samvadi .acc,
.composition-staff .event.role-vadi .acc { fill: var(--staff-note-outline) !important; }