.xyAssignmentDialog{width:min(900px,96vw);max-height:88dvh;box-sizing:border-box;border:1px solid #777;border-radius:12px;padding:18px;background:#202327;color:#fff;z-index:20000;overflow:auto}
.xyAssignmentDialog::backdrop{background:#0009}
.xyAssignmentDialog h2{font-size:18px;margin:0 70px 12px 0}
.xyAssignmentDialog h3{font-size:13px;margin:12px 0 3px}
.xyAssignmentDialog button,.xyAssignmentDialog select,.xyAssignmentDialog input{font:inherit;min-height:42px;background:#353a40;color:#fff;border:1px solid #777;border-radius:6px;padding:6px 9px;box-sizing:border-box}
.xyAssignmentDialog button:focus-visible,.xySetBar :focus-visible,.xyMappingButton:focus-visible{outline:3px solid #80caff;outline-offset:2px}
.xyDialogClose{float:right}
.xyPickerTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.xyPickerLink{display:flex;align-items:center;gap:4px;margin-right:auto}
.xyPickerLink input{min-height:auto;width:20px;height:20px;padding:0}
.xyPickerHint{font-size:12px;color:#cbd2d8;margin:6px 0}
.xyPickerColumns,.xyPickerResults{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);gap:5px}
.xyPickerColumns{position:sticky;top:-18px;z-index:2;padding:7px 0 5px;background:#202327;font-size:11px;font-weight:700;text-align:center;color:#bfc8d0}
.xyPickerGroup{grid-column:1/-1;padding:7px 8px 4px;border-bottom:1px solid #555;color:#dbe8f2}
.xyPickerResults button{position:relative;min-width:0;text-align:left;line-height:1.15;white-space:normal}
.xyPickerResults .xyPickerPair{text-align:center;font-size:12px}
.xyPickerEmpty{display:grid;place-items:center;min-height:42px;color:#70777e;border:1px dashed #474d52;border-radius:6px}
.xyPickerOption.isAssigned,.xyPickerPair.isAssigned{border-color:#ddad4b;box-shadow:inset 0 0 0 1px #ddad4b}
.xyPickerOption.isAssigned::after{content:'●';position:absolute;right:6px;top:4px;color:#ffd36b;font-size:9px}
.xyPickerOption.isCurrent,.xyPickerPair.isCurrent{background:#30577c;border-color:#80caff;box-shadow:inset 0 0 0 1px #80caff}
.xyPickerPair:disabled{opacity:.35}
.xySetBar{display:flex;gap:4px;align-items:center;margin:8px 0;min-width:0}
.xySetBar select{flex:1;min-width:0;max-width:240px}
.xySetBar button,.xySetBar select{min-height:36px}
.xySetPerformance{display:none;position:fixed;top:calc(5px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:12005;padding:4px;border-radius:8px;background:#202327ee;color:white;width:min(440px,calc(100vw - 110px));pointer-events:auto}
body.xyPadsEnabled:not(.noteProgrammerActive) .xySetPerformance{display:flex}
.xySetPerformance select,.xySetPerformance button{background:#30353a;color:white;border:1px solid #777;border-radius:4px}
.xyPadControls .xyMappingButton{min-width:0;width:100%;min-height:36px;padding:3px 5px;font-size:11px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#202327dd;color:white;border:1px solid #777;border-radius:4px}
.xyPadControls .xyMappingButton.isAssigned{border-color:#ddad4b}
body.xyPadsSetup .xyPadControls[data-index="0"],body.xyPadsSetup .xyPadControls[data-index="1"]{top:calc(62px + env(safe-area-inset-top))}
@media(max-width:600px){
  .xyAssignmentDialog{padding:10px;width:98vw;max-height:94dvh}
  .xyPickerColumns{top:-10px}
  .xyPickerColumns,.xyPickerResults{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:4px}
  .xyPickerResults button{padding:5px 6px;font-size:11px;min-height:44px}
  .xyPickerTools button{min-height:36px;font-size:11px}
  .xySetBar select{max-width:180px}
}