.input-adjust-launch { margin: 0 0 1rem; }
.input-adjust-launch[hidden], .input-adjust-dialog [hidden] { display: none !important; }
.input-adjust-launch button, .input-adjust-dialog button {
    font: inherit; cursor: pointer; border: 1px solid #b4c2b0; border-radius: 6px;
    padding: 8px 12px; background: #fff; color: #30432d;
}
.input-adjust-launch p { font-size: 12px; margin: 6px 0; color: #586754; }
.input-adjust-dialog {
    --input-adjust-padding: 22px;
    width: min(1000px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    box-sizing: border-box; overflow: auto; margin: auto; padding: var(--input-adjust-padding);
    border: 1px solid #c9d2c6; border-radius: 14px; background: #fff; color: #30432d;
    font: 14px/1.5 Figtree, system-ui, sans-serif; box-shadow: 0 20px 80px #0004;
}
.input-adjust-dialog::backdrop { background: #162314aa; }
.input-adjust-dialog h2 { margin: 0 0 5px; padding: 0; background: none; color: inherit; font-size: 22px; }
.input-adjust-dialog p { margin: 0 0 14px; color: #586754; }
.input-adjust-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 22px; }
.input-adjust-stage {
    position: relative; width: fit-content; max-width: 100%; margin: auto;
    touch-action: none; cursor: crosshair; line-height: 0; overflow: hidden;
}
.input-adjust-stage > img { display: block; max-width: 100%; max-height: 52dvh; width: auto; height: auto; user-select: none; }
.input-adjust-stage, .input-adjust-result {
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 / 16px 16px;
}
.input-adjust-selection {
    position: absolute; box-sizing: border-box; border: 2px solid #fff;
    outline: 1px solid #30432d; box-shadow: 0 0 0 10000px #0007; cursor: move;
}
.input-adjust-handle { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid #30432d; border-radius: 3px; }
.input-adjust-handle[data-corner="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.input-adjust-handle[data-corner="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.input-adjust-handle[data-corner="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.input-adjust-handle[data-corner="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.input-adjust-dialog fieldset { border: 0; margin: 14px 0; padding: 0; min-width: 0; }
.input-adjust-dialog legend, .input-adjust-dialog summary { font-weight: 600; }
.input-adjust-dialog summary { cursor: pointer; }
.input-adjust-coordinates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.input-adjust-dialog label { display: block; float: none; width: auto; padding: 0; color: inherit; font-size: 13px; }
.input-adjust-dialog input[type="number"] { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px; border: 1px solid #b4c2b0; border-radius: 4px; background: #fff; color: #30432d; }
.input-adjust-dialog input[type="range"] { width: 100%; accent-color: #5a7358; margin: 7px 0 12px; }
.input-adjust-dialog output { float: right; }
.input-adjust-result { display: flex; justify-content: center; align-items: center; height: 232px; box-sizing: border-box; padding: 10px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 12px; }
.input-adjust-result canvas { max-width: 100%; max-height: 210px; width: auto; height: auto; object-fit: contain; }
.input-adjust-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.input-adjust-footer { position: sticky; bottom: calc(0px - var(--input-adjust-padding)); z-index: 1; background: #fff; justify-content: flex-end; border-top: 1px solid #e4e8e1; padding: 14px 0 var(--input-adjust-padding); margin-bottom: calc(0px - var(--input-adjust-padding)); }
.input-adjust-dialog button[data-action="apply"] { background: #5a7358; color: #fff; }
.input-adjust-dialog button:disabled { opacity: .5; cursor: wait; }
.input-adjust-dialog :focus-visible { outline: 3px solid #8faa85; outline-offset: 2px; }
.input-adjust-error { color: #a22020 !important; }
@media (max-width: 650px) {
    .input-adjust-dialog { --input-adjust-padding: 16px; }
    .input-adjust-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .input-adjust-stage > img { max-height: 38dvh; }
    .input-adjust-result canvas { max-height: 140px; }
    .input-adjust-result { height: 162px; }
}