.jop-page { max-width: 780px; }
.jop-tool { background: #f7f7fa; border: 1px solid #d8dce4; border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.jop-tool h2 { margin-top: 0; }
.jop-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jop-field { display: inline-flex; flex-direction: column; }
.jop-field label { font-size: 12px; color: #5a6472; margin-bottom: 2px; }
.jop-field input[type=number] { width: 72px; padding: 5px 8px; border: 1px solid #c7cdd8; border-radius: 6px; }
.jop-field select { padding: 5px 8px; border: 1px solid #c7cdd8; border-radius: 6px; }
.jop-field input[type=text] { width: 150px; padding: 5px 8px; border: 1px solid #c7cdd8; border-radius: 6px; }
.jop-editable-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
#jop-preview { margin-top: 12px; display: none; }
#jop-preview canvas { image-rendering: pixelated; max-width: 100%; }
#jop-grid-label { font-size: 13px; color: #5a6472; }
#jop-status { font-size: 13px; margin-top: 8px; }
#jop-replacement { display: none; border: 1px solid #d8a0a0; background: #fdf3f3; border-radius: 10px; padding: 14px 18px; margin-top: 12px; }
#jop-replacement ul { max-height: 220px; overflow: auto; }
#jop-replacement li { font-size: 13px; }
.jop-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.jop-list th, .jop-list td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #e3e6ec; }
.jop-empty { color: #8a93a3; }
.jop-delete { display: inline; }
.jop-delete button { background: none; border: none; color: #b03a3a; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }