.western-notation-launch {
  border-color: #315c91 !important;
  background: #e9f2ff !important;
  color: #173f70 !important;
  font-weight: 900 !important;
}

.western-notation-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  background: rgba(5, 12, 24, .82);
  padding: 16px;
  box-sizing: border-box;
}

.western-notation-modal.open { display: flex; }

.western-notation-dialog {
  width: min(1440px, 100%);
  height: min(920px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #eef2f7;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
  color: #132238;
}

.western-notation-head,
.western-notation-tools {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid #d6deea;
}

.western-notation-head {
  flex: 0 0 auto;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(120deg,#102b4e 0%,#174e68 58%,#08766f 100%);
  border-bottom: 0;
  box-shadow: 0 3px 12px rgba(11,34,58,.24);
}
.western-notation-title { display:flex;align-items:center;gap:10px;font-size:18px;font-weight:950;letter-spacing:.01em; }
.western-notation-title:before { content:'♫';display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);color:#ffd166;font-size:21px; }
.western-notation-actions { display: flex; gap: 8px; }
.western-notation-tools { flex:0 0 auto;background:#f8fafc;box-shadow:inset 0 -1px 0 #dbe3ed; }
.western-notation-tools label {display:grid;gap:3px;color:#64748b;font-size:10px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;}
.western-compact-toolbar{position:relative;flex-wrap:nowrap;overflow:visible;padding:8px 12px;gap:6px;z-index:30}
.western-compact-toolbar{flex-wrap:wrap;align-content:flex-start}
#westernKey{width:72px!important;min-width:72px!important}
#westernMode{width:88px!important;min-width:88px!important}
#westernTime{width:78px!important;min-width:78px!important}
#westernTempo{width:62px!important;min-width:62px!important}
.western-compact-toolbar>.western-tool-menu{flex:0 0 auto}
.western-compact-toolbar>.western-tool-menu>.western-tool-menu-panel{left:0;right:auto;max-width:calc(100vw - 40px);box-sizing:border-box}
.western-compact-toolbar>span{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.western-compact-toolbar>label{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:2px}
.western-compact-toolbar>label:nth-of-type(1) select{width:58px;min-width:58px}
.western-compact-toolbar>label:nth-of-type(2) select{width:64px;min-width:64px}
.western-compact-toolbar>label:nth-of-type(3) select{width:66px;min-width:66px}
.western-compact-toolbar>label select{padding-left:9px;padding-right:22px;color:#14243b;background-color:#fff;font-size:12px}
.western-tempo-fields{display:flex!important;align-items:center;gap:5px}
.western-tempo-fields input[type="number"]{box-sizing:border-box;width:58px;height:38px;border:1px solid #b9c5d5;border-radius:9px;padding:5px 7px;background:#fff;color:#14243b;font-size:12px;font-weight:900}
.western-tempo-fields input[type="range"]{width:92px;height:22px;margin:0;padding:0;accent-color:#08766f;cursor:pointer}
#westernDurations>button{width:72px;min-width:72px;padding-left:5px;padding-right:5px;text-align:center}
.western-tool-menu{position:relative;flex:0 0 auto}
.western-tool-menu>summary{display:flex;align-items:center;min-height:36px;padding:0 11px;border:1px solid #aebdd0;border-radius:9px;background:linear-gradient(#fff,#f4f7fb);color:#17324f;font-size:12px;font-weight:900;cursor:pointer;list-style:none;box-shadow:0 1px 2px rgba(15,35,60,.06)}
.western-tool-menu>summary::-webkit-details-marker{display:none}
.western-tool-menu>summary:after{content:'▾';margin-left:7px;color:#08766f;font-size:11px}
.western-tool-menu[open]>summary{border-color:#08766f;background:#dff5f1;color:#075c57}
.western-tool-menu-panel{position:absolute;z-index:13100;top:calc(100% + 7px);right:0;display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:7px;min-width:270px;padding:10px;border:1px solid #b9c8d9;border-radius:12px;background:#fff;box-shadow:0 14px 38px rgba(12,32,55,.24)}
#westernDurations>.western-tool-menu .western-tool-menu-panel{left:0;right:auto}
.western-tool-menu-panel button{width:100%;min-height:36px!important;text-align:left}
.western-tool-menu-panel label{min-width:145px}
.western-select-menu .western-tool-menu-panel{grid-template-columns:repeat(2,minmax(150px,1fr));min-width:340px}
.western-select-menu select{width:100%}
.western-danger-tool{border-color:#e7a7a7!important;color:#a32626!important}

.western-notation-modal button,
.western-notation-modal select {
  min-height: 38px;
  border: 1px solid #b9c5d5;
  border-radius: 9px;
  padding: 6px 10px;
  background: linear-gradient(#fff,#f6f8fb);
  color: #14243b;
  font-weight: 850;
  box-shadow: 0 1px 2px rgba(15,35,60,.06);
  transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.western-notation-modal button:hover {
  border-color:#16877f;
  background:#edf9f7;
  box-shadow:0 3px 9px rgba(8,118,111,.13);
  transform:translateY(-1px);
}

.western-notation-modal button.primary {
  border-color: #ffd166;
  background: #ffd166;
  color: #12253e;
  box-shadow:0 3px 10px rgba(255,209,102,.24);
}
.western-notation-modal button.primary:hover {
  border-color:#ffe099;
  background:#ffe099;
  color: #12253e;
}

.western-notation-modal button.active {
  border-color: #08766f;
  background: #d9f4ef;
  color: #075c57;
  box-shadow:inset 0 0 0 1px rgba(8,118,111,.14),0 2px 7px rgba(8,118,111,.12);
}
.western-transpose-control{display:inline-grid;grid-template-columns:38px 54px 38px;align-items:stretch;border:1px solid #b9c5d5;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,35,60,.06)}
.western-transpose-control button{min-width:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:20px!important;padding:2px!important}
.western-transpose-control input{width:54px;min-width:0;border:0;border-left:1px solid #d5dde8;border-right:1px solid #d5dde8;border-radius:0;background:#102b4e;color:#fff;text-align:center;font-size:14px;font-weight:950;outline:0}

.western-note-pitches { display:flex;gap:4px;flex-wrap:wrap;padding:6px 10px;background:linear-gradient(90deg,#102b4e,#153d5f)!important;border-bottom:0; }
.western-note-pitches button {
  flex:0 0 40px;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:2px;
  color: #eaf2fb;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  box-shadow:none;
}
.western-note-pitches .western-quick-symbol{display:grid;place-items:center;font-family:"Noto Music","Bravura Text","Segoe UI Symbol",serif;font-size:20px;line-height:1;color:#fff;background:rgba(255,255,255,.09)}
.western-note-pitches .western-symbol-divider{flex:0 0 1px;align-self:stretch;margin:2px 4px;background:rgba(255,255,255,.25)}

.western-note-pitches button:hover,
.western-note-pitches button:focus-visible {
  color:#fff;
  border-color: #5eead4;
  background: rgba(45,212,191,.18);
  outline: 2px solid rgba(94,234,212,.16);
}

.western-pitch-icon {
  display: block;
  width: 36px;
  height: 32px;
  pointer-events: none;
}

.western-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.western-notation-canvas-wrap {
  flex: 1;
  overflow: auto;
  padding: 18px;
  background:linear-gradient(145deg,#dfe6ef,#eef2f7 46%,#dbe4ee);
}

.western-notation-paper {
  min-width: 920px;
  min-height: 440px;
  padding: 26px;
  border:1px solid #dce3eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(20,38,62,.13),0 1px 2px rgba(20,38,62,.08);
}

.western-notation-score { width: 100%; min-height: 360px; }
.western-notation-score .measure-hit { cursor: pointer; }
.western-notation-score .western-note-hit { cursor: pointer; }
body.western-note-dragging,body.western-note-dragging *{cursor:grabbing!important;user-select:none!important}
.western-note-hit{touch-action:none}
.western-drag-preview{position:fixed;z-index:13050;pointer-events:none;min-width:138px;padding:8px 11px;border:1px solid #5eead4;border-radius:9px;background:#102b4e;color:#fff;font-size:13px;font-weight:950;letter-spacing:.02em;box-shadow:0 9px 24px rgba(5,20,38,.32)}
.western-drag-note{position:fixed;z-index:13060;pointer-events:none;width:46px;height:60px;transform:translate(-25px,-40px);color:#071625;filter:drop-shadow(0 2px 2px rgba(255,255,255,.95)) drop-shadow(0 3px 5px rgba(7,22,37,.28));will-change:left,top}
.western-drag-note svg{display:block;width:46px;height:60px;overflow:visible;fill:currentColor}
.western-drag-note-accidental{font-family:"Noto Music","Bravura Text","Segoe UI Symbol",serif;font-size:23px;font-weight:800;fill:currentColor}
.western-drop-line{position:fixed;z-index:13040;pointer-events:none;width:3px;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18),0 0 12px rgba(245,158,11,.8)}
.western-measure-group.western-drop-target .measure-hit{fill:rgba(45,212,191,.15)!important;stroke:#0d9488!important;stroke-width:3!important;filter:drop-shadow(0 0 5px rgba(13,148,136,.35))}
.western-notation-score .measure-hit:hover { fill: rgba(8,118,111,.07);stroke:#7bc8c1; }
.western-notation-status { flex:0 0 auto;padding:9px 15px;background:#102b4e;color:#dbeafe;border-top:1px solid #244764;font-size:12px;font-weight:750;letter-spacing:.02em; }
.western-main-notation-panel{display:none;min-width:0;width:100%;border:1px solid #c5d5e4;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(18,43,70,.10)}
.role-edit-grid.western>label,.role-edit-grid.western>#sinhalaBox{display:none!important}
.role-edit-grid.western{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:none!important;justify-self:stretch!important}
.role-edit-grid.western>.western-main-notation-panel{display:block;grid-column:1/-1;width:100%!important;max-width:none!important;justify-self:stretch!important}
.western-main-notation-head{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;padding:8px 10px;background:#edf5f8;border-bottom:1px solid #c8d9e5;color:#17324f}
.western-main-notation-head strong{font-size:14px;font-weight:950}
.western-main-notation-head button{min-height:34px;padding:5px 11px;border-color:#08766f;background:#08766f;color:#fff;font-weight:900}
.western-main-notation-head .notation-sync-indicator{margin-left:auto}
.western-main-notation-head .notation-playback-controls.main{display:flex;flex:1 1 auto;align-items:center;gap:5px;flex-wrap:wrap;padding:0;background:transparent;border:0}
.western-main-notation-head .notation-playback-controls.main .notation-playback-label{display:none}
.western-main-notation-head .notation-playback-controls.main button{min-height:32px!important;padding:4px 8px!important;background:#fff;color:#17324f;border-color:#aac1d1;font-size:11px!important}
.western-main-notation-head .notation-playback-controls.main label{display:flex!important;grid-auto-flow:column;align-items:center;gap:4px;margin:0}
.western-main-notation-head .notation-playback-controls.main input{width:58px;min-height:32px;height:32px;padding:3px 6px}
.western-main-score{max-height:68vh;overflow:auto;background:#fff}
.western-main-score .western-live-score{height:auto!important;min-height:260px;overflow-x:hidden!important}
.western-main-score .western-live-score svg{width:100%!important;min-width:0!important;max-width:100%!important}
.full-view .full-text.full-chord-grid{display:block!important;white-space:normal!important;column-count:1!important;padding:22px 18px!important;overflow:auto!important;font-family:Arial,"Segoe UI",sans-serif!important}
.full-chord-grid .fc-section{font-size:clamp(20px,2.2vw,34px);font-weight:800;margin:18px 0 7px;color:#111}
.full-chord-grid .fc-spacer{height:16px}
.full-chord-grid .fc-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;align-items:center;margin:0;font-size:clamp(20px,2.5vw,38px);line-height:1.25}
.full-chord-grid .fc-cell{display:block;min-width:0;text-align:center;border-left:2px solid #111;padding:1px 8px;font-family:"Courier New",Consolas,monospace!important;white-space:nowrap}
.full-chord-grid .fc-cell:last-child{border-right:2px solid #111}
.full-view .full-text.western-full-view-text{display:block!important;white-space:normal!important;column-count:1!important;padding:10px!important;overflow:auto!important;background:#eef2f7!important;font-family:Arial,"Segoe UI",sans-serif!important}
.western-full-view-text .western-live-score{min-height:100%!important;height:auto!important;border-radius:10px;box-sizing:border-box}
.western-full-view-text .western-live-score svg{display:block;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important}

.notation-playback-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;background:#e8f1f5;border-bottom:1px solid #c9d8e3;color:#17324f}
.notation-playback-controls .notation-playback-label{margin-right:3px;color:#08766f;font-size:11px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.notation-playback-controls button{min-height:34px!important;padding:5px 9px!important;font-size:12px!important}
.notation-playback-controls label{display:flex!important;align-items:center;gap:5px;color:#526579!important;font-size:10px!important;font-weight:900!important}
.notation-playback-controls input{width:64px;min-height:34px;border:1px solid #b9c5d5;border-radius:8px;padding:4px 6px;background:#fff;color:#14243b;font-weight:900}
.notation-sinhala-transpose{display:inline-grid;grid-template-columns:34px 48px 34px;border:1px solid #80bdb7;border-radius:8px;overflow:hidden;background:#fff}
.notation-sinhala-transpose button{min-width:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:18px!important;padding:2px!important}
.notation-sinhala-transpose input{width:48px!important;min-width:0!important;border:0!important;border-left:1px solid #b7d8d4!important;border-right:1px solid #b7d8d4!important;border-radius:0!important;background:#08766f!important;color:#fff!important;text-align:center!important;font-weight:950!important}
.notation-playback-controls.sinhala{flex:1 1 100%;padding:5px 7px;border:1px solid #b7d8d4;border-radius:8px;background:#edf9f7}
.western-note-hit.notation-playing{fill:rgba(255,193,7,.42)!important;stroke:#f59e0b!important;stroke-width:3!important;filter:drop-shadow(0 0 5px rgba(245,158,11,.75))}
.western-measure-group.notation-playing-measure .measure-hit{fill:rgba(8,118,111,.08)!important;stroke:#08766f!important;stroke-width:2!important}
.clean-slot.notation-playing,.sinhala-slot.notation-playing{background:#fff1a8!important;outline:3px solid #f59e0b!important;outline-offset:-3px!important;color:#111!important;box-shadow:0 0 12px rgba(245,158,11,.5)!important}
.clean-cell.sinhala-playback-selected,.sinhala-cell.sinhala-playback-selected{border-color:#08766f!important;box-shadow:inset 0 0 0 2px #08766f,0 4px 12px rgba(8,118,111,.18)!important;background:#effbf9!important}
.sinhala-home-slot.notation-playing{position:relative!important;z-index:2!important;background:#fff1a8!important;outline:3px solid #f59e0b!important;outline-offset:-2px!important;border-radius:7px!important;color:#111!important;box-shadow:0 0 12px rgba(245,158,11,.55)!important}
.sinhala-home-cell.notation-playing-measure{background:rgba(8,118,111,.08)!important;box-shadow:inset 0 0 0 2px rgba(8,118,111,.6)!important}
.western-live-score .western-home-note.notation-playing{fill:#f59e0b!important;stroke:#b45309!important;stroke-width:3!important;filter:drop-shadow(0 0 7px rgba(245,158,11,.9))!important}
.western-live-score .western-home-measure.notation-playing-measure .measure-hit{fill:rgba(8,118,111,.1)!important;stroke:#08766f!important;stroke-width:2!important}

@media (max-width: 1200px) {
  .western-compact-toolbar{flex-wrap:wrap;overflow:visible}
  .western-tempo-fields input[type="range"]{width:78px}
  .western-notation-canvas-wrap{width:100%;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}
  .western-notation-paper{width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
  .western-notation-score{display:block;width:100%;max-width:100%;min-width:0}
}

@media (max-width: 760px) {
  .western-notation-modal { padding: 0; }
  .western-notation-dialog { width: 100%; height: 100%; border-radius: 0; }
  .western-notation-head, .western-notation-tools { padding: 8px; }
  .western-compact-toolbar{overflow:visible;flex-wrap:wrap;padding-bottom:8px}
  .western-tool-menu-panel{position:fixed;left:8px!important;right:8px!important;top:142px;width:auto;min-width:0;max-height:55vh;overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .western-notation-title { font-size: 15px; }
  .western-notation-title:before{width:29px;height:29px;font-size:17px}
  .western-notation-modal button,.western-notation-modal select{min-height:36px;padding:5px 8px;font-size:12px}
  .western-note-pitches{flex-wrap:wrap;overflow-x:visible}
  .western-note-pitches button{flex:0 0 38px;width:38px;min-width:38px;height:38px;min-height:38px}
  .notation-playback-controls{padding:6px 8px;flex-wrap:nowrap;overflow-x:auto}
  .notation-playback-controls>*{flex:0 0 auto}
  .western-notation-canvas-wrap { padding: 8px; }
  .western-notation-paper { padding: 10px; }
}