/* 120 Image padding and border */
.ipb-drop-zone { transition: border-color .2s ease, background .2s ease; }
.ipb-drop-zone.is-dragover { border-color: var(--color-primary); background: #eaf7f4; }
.ipb-workspace { display: grid; min-width: 0; gap: 1.25rem; margin-bottom: 1.5rem; }
.ipb-workspace[hidden] { display: none; }
.ipb-file-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0 0; }
.ipb-file-info div { min-width: 0; padding: .7rem; border-radius: 10px; background: var(--color-surface-soft); }
.ipb-file-info dt { color: var(--color-muted); font-size: .78rem; }
.ipb-file-info dd { margin: .2rem 0 0; overflow-wrap: anywhere; font-weight: 700; }
.ipb-editor-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.38fr); align-items: start; gap: 1.25rem; }
.ipb-editor-grid > *, .ipb-preview-panel, .ipb-export-panel, .ipb-controls { min-width: 0; }
.ipb-side-grid, .ipb-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ipb-side-grid label, .ipb-control-grid label, [data-ipb-padding-modes] > label { display: grid; min-width: 0; gap: .35rem; font-weight: 700; }
.ipb-radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.ipb-radio-grid label { display: flex; min-width: 0; align-items: center; gap: .45rem; font-weight: 700; }
.ipb-radio-grid input, .ipb-controls input[type="checkbox"] { width: auto; min-width: auto; }
.ipb-controls .is-disabled { opacity: .58; }
.ipb-canvas-wrap { display: grid; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 180px; place-items: center; overflow: auto; padding: .7rem; border-radius: 12px; background: repeating-conic-gradient(#dfe7e5 0 25%, #fff 0 50%) 50% / 20px 20px; }
.ipb-canvas-wrap canvas { display: block; width: auto; max-width: 100%; height: auto; max-height: 70vh; outline: 2px solid rgba(20,107,99,.45); }
.ipb-result { min-width: 0; margin-top: .8rem; padding: .8rem; border: 1px solid rgba(20,107,99,.25); border-radius: var(--radius-sm); background: rgba(20,107,99,.07); }
.ipb-result[hidden] { display: none; }
.ipb-result p, .ipb-long-message { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ipb-result .button { width: 100%; min-width: 0; }
.ipb-controls input:focus-visible, .ipb-controls select:focus-visible, .ipb-controls button:focus-visible, .ipb-export-panel input:focus-visible, .ipb-export-panel select:focus-visible, .ipb-export-panel button:focus-visible, .ipb-export-panel a:focus-visible { outline: 3px solid rgba(20,107,99,.4); outline-offset: 3px; }

@media (max-width: 860px) {
  .ipb-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .ipb-file-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .ipb-editor-grid, .ipb-preview-panel, .ipb-export-panel, .ipb-controls { width: 100%; max-width: 100%; min-width: 0; }
  .ipb-file-info, .ipb-side-grid, .ipb-control-grid, .ipb-radio-grid { grid-template-columns: minmax(0, 1fr); }
  .ipb-canvas-wrap { min-height: 150px; padding: .5rem; }
}