.image-design {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px 24px 24px;
  color: var(--ink, #22262b);
  font-size: 14px;
  line-height: 1.7;
}
.image-design *, .image-compare-dialog * { box-sizing: border-box; }
.image-design-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.image-design-intro h2 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 650; }
.image-design-memory-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #656b72); font-size: 12px; }
.image-design i.ph { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.image-design-tabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.image-design-mobile-panes { display: none; }
.image-design-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted, #656b72); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.image-design-tab:hover { background: var(--soft, #f1f0eb); color: var(--ink, #22262b); }
.image-design-tab.active { background: var(--selected, #e9edf0); color: var(--ink, #22262b); font-weight: 650; border-color: var(--control-line, #a0a5a9); }
.image-design-workspace { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: start; gap: 20px; min-width: 0; }
.image-design-form-card, .image-design-result-card { min-width: 0; padding: 0; border: 1px solid var(--line, #e4e3de); border-radius: 12px; background: #fff; }
.image-design-form, .image-design-result { display: grid; align-content: start; gap: 16px; min-width: 0; margin: 0; padding: 0 20px 20px; }
.image-design-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 14px 20px; margin: 0 -20px; border-bottom: 1px solid var(--line, #e4e3de); }
.image-design-card-heading h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 650; line-height: 1.5; }
.image-design .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border-radius: 7px; font-family: inherit; font-size: 12px; line-height: 1.5; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.image-design .button.secondary { border: 1px solid var(--line, #e4e3de); background: #fff; color: var(--ink, #22262b); box-shadow: none; }
.image-design .button.secondary:hover { background: var(--soft, #f1f0eb); border-color: var(--control-line, #a0a5a9); }
.image-design .button.primary { border: 1px solid var(--ink, #22262b); background: var(--ink, #22262b); color: #fff; box-shadow: none; }
.image-design .button.primary:hover { border-color: var(--ink, #22262b); background: var(--ink, #22262b); }
.image-design button:disabled, .image-design input:disabled, .image-design select:disabled { opacity: .56; cursor: not-allowed; }
.image-design :where(button, a, input, select, textarea, summary):focus-visible, .image-design-file-picker:focus-within { outline: 2px solid var(--accent, #506577); outline-offset: 3px; }
.image-design textarea, .image-design input, .image-design select { font: inherit; caret-color: var(--ink, #22262b); }
.image-design textarea::placeholder, .image-design input::placeholder { color: var(--muted, #656b72); opacity: 1; }
.image-design-muted, .image-design-field-help { margin: 0; color: var(--muted, #656b72); font-size: 12px; line-height: 1.7; }
.image-design-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.image-design-field-title { display: flex; align-items: center; gap: 5px; color: var(--ink, #22262b); font-size: 12px; font-weight: 600; }
.image-design-field-title i.ph { font-size: 15px; }
.image-design-editable { margin-left: auto; color: var(--muted, #656b72); font-size: 12px; font-weight: 400; }
.image-design-context-settings { display: flex; flex-wrap: wrap; gap: 12px; }
.image-design-context-settings .image-design-field { flex: 1; min-width: 130px; }
.image-design-context-settings select, .image-design-context-settings input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--control-line, #a0a5a9); border-radius: 7px; background: #fff; color: var(--ink, #22262b); font-size: 13px; }
.image-design-composer, .image-design-feedback-composer { min-width: 0; border: 1px solid var(--soft, #f1f0eb); border-radius: 12px; background: #fff; }
.image-design-composer:focus-within, .image-design-feedback-composer:focus-within { border-color: var(--accent, #506577); }
.image-design-prompt-field > .image-design-field-title { padding: 12px 14px 0; }
.image-design-prompt { display: block; width: 100%; height: 164px; min-height: 160px; max-height: 520px; margin: 0; padding: 10px 14px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink, #22262b); font-size: 14px; line-height: 1.85; resize: vertical; outline-offset: -4px; box-shadow: none; }
.image-design-prompt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 12px 9px; }
.image-design-prompt-tools .button { min-height: 30px; }
.image-design-compose-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-upload { flex: 1 1 150px; display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; background: transparent; }
.image-design-upload-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 36px; }
.image-design-upload-heading > span { color: var(--muted, #656b72); font-size: 11px; }
.image-design-file-picker { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: var(--soft, #f1f0eb); color: var(--ink, #22262b); font-size: 12px; cursor: pointer; white-space: nowrap; }
.image-design-file-picker:hover { background: var(--selected, #e9edf0); border-color: var(--soft, #f1f0eb); }
.image-design-file-picker:has(input:disabled) { opacity: .56; cursor: not-allowed; }
.image-design-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.image-design-action-row { display: flex; align-items: center; margin-left: auto; }
.image-design-submit { min-height: 38px !important; }
.image-design-materials { min-width: 0; }
.image-design-materials > summary { display: flex; align-items: center; gap: 8px; min-height: 50px; list-style: none; color: var(--muted, #656b72); font-size: 12px; cursor: pointer; }
.image-design-material-stack { display: inline-flex; align-items: center; height: 43px; padding-right: 2px; }
.image-design-material-stack img { width: 37px; height: 39px; object-fit: contain; margin-left: -17px; border: 2px solid #fff; border-radius: 5px; background: var(--soft, #f1f0eb); box-shadow: 0 2px 4px transparent; transform: rotate(4deg); }
.image-design-material-stack img:first-child { margin-left: 0; transform: rotate(-4deg); }
.image-design-source-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 6px; }
.image-design-source-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--line, #e4e3de); }
.image-design-source-card img { display: block; width: 48px; height: 48px; object-fit: contain; border-radius: 5px; background: var(--soft, #f1f0eb); }
.image-design-source-details { display: grid; gap: 3px; min-width: 0; }
.image-design-source-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.image-design-source-details small { color: var(--muted, #656b72); font-size: 11px; font-variant-numeric: tabular-nums; }
.image-design-source-details select { width: 100%; min-height: 30px; padding: 3px 5px; border: 1px solid var(--line, #e4e3de); border-radius: 5px; background: #fff; color: var(--ink, #22262b); font-size: 12px; }
.image-design-remove { display: inline-flex; align-items: center; gap: 3px; min-height: 34px; padding: 5px; border: 0; border-radius: 5px; background: transparent; color: var(--danger, #a13a30); font: inherit; font-size: 11px; cursor: pointer; }
.image-design-remove:hover { background: var(--soft, #f1f0eb); }
.image-design-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; padding: 0 12px 12px; }
.image-design-settings > .image-design-field { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; max-width: 100%; padding: 2px 6px; border-radius: 7px; background: var(--soft, #f1f0eb); }
.image-design-settings > .image-design-field > .image-design-field-title > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.image-design-settings > .image-design-field > .image-design-field-title { flex: 0 0 auto; }
.image-design-settings > .image-design-field select { max-width: 195px; min-width: 0; min-height: 31px; padding: 3px 1px; border: 0; border-radius: 5px; background: transparent; color: var(--ink, #22262b); font-size: 12px; }
.image-design-settings > .image-design-field input { width: 145px; min-height: 31px; padding: 3px 5px; border: 1px solid var(--control-line, #a0a5a9); border-radius: 5px; background: #fff; font-size: 12px; }
.image-design-settings > .image-design-field > .image-design-field-help { display: none; }
.image-design-fixed-model { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 32px; color: var(--muted, #656b72); font-size: 12px; }
.image-design-settings > .image-design-fixed-model:last-child { flex-basis: 100%; }
.image-design-advanced { flex-basis: 100%; min-width: 0; padding-top: 3px; }
.image-design-advanced > summary, .image-design-verification-prompt > summary, .image-design-help > summary, .image-design-text-check > summary { display: flex; align-items: center; gap: 6px; min-height: 30px; list-style: none; color: var(--muted, #656b72); font-size: 12px; cursor: pointer; }
.image-design summary::-webkit-details-marker { display: none; }
.image-design summary > .ph-caret-down { margin-left: auto; transition: transform .16s ease-out; font-size: 14px; }
.image-design details[open] > summary > .ph-caret-down { transform: rotate(180deg); }
.image-design-advanced-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px 0; }
.image-design-advanced-fields select, .image-design-advanced-fields input { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--control-line, #a0a5a9); border-radius: 7px; background: #fff; color: var(--ink, #22262b); font-size: 12px; }
.image-design-help { min-width: 0; color: var(--muted, #656b72); font-size: 12px; }
.image-design-help p { margin: 7px 0 0; max-width: 72ch; line-height: 1.8; overflow-wrap: anywhere; }
.image-design-upload > .image-design-help > summary { min-height: 24px; font-size: 11px; }
.image-design-upload > .image-design-help > summary i.ph { font-size: 14px; }
.image-design-verification-prompt { min-width: 0; border-top: 1px solid var(--line, #e4e3de); padding-top: 8px; }
.image-design-verification-prompt pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 1.8; }
.image-design-cost-note { display: flex; align-items: flex-start; gap: 5px; margin: 0; color: var(--muted, #656b72); font-size: 12px; }
.image-design-cost-note i.ph { margin-top: 2px; font-size: 15px; }
.image-design-message { margin: 0; color: var(--muted, #656b72); font-size: 12px; overflow-wrap: anywhere; }
.image-design-message:empty, .image-design-feedback-message:empty { display: none; }
.image-design-message[data-tone="error"], .image-design-feedback-message[data-tone="error"] { color: var(--danger, #a13a30); }
.image-design-parameter-warning { margin: 5px 12px 12px; padding: 8px 10px; border-radius: 7px; background: #fff7e5; color: #795619; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.image-design-empty { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 320px; padding: 30px 18px; color: var(--muted, #656b72); text-align: center; }
.image-design-empty i.ph { font-size: 32px; color: var(--accent, #506577); }
.image-design-empty strong { color: var(--ink, #22262b); font-size: 14px; font-weight: 600; }
.image-design-empty p { max-width: 300px; margin: 0; font-size: 12px; line-height: 1.8; }
.image-design-operation-status, .image-design-unknown-operation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 11px; border-radius: 7px; background: var(--selected, #e9edf0); color: var(--ink, #22262b); font-size: 12px; }
.image-design-unknown-operation { display: grid; background: #fff7e5; color: #795619; }
.image-design-unknown-operation p { margin: 0; }
.image-design-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #506577); }
.image-design-progress-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.image-design-progress-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line, #e4e3de); font-size: 12px; }
.image-design-gallery { display: grid; gap: 24px; min-width: 0; }
.image-design-result-item { display: grid; gap: 10px; min-width: 0; padding: 0; }
.image-design-result-item + .image-design-result-item { padding-top: 20px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-item-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.image-design-item-title strong { font-size: 13px; font-weight: 600; }
.image-design-item-status { padding: 3px 7px; border-radius: 5px; background: var(--soft, #f1f0eb); color: var(--muted, #656b72); font-size: 11px; }
.image-design-item-status.succeeded { background: var(--selected, #e9edf0); color: var(--ink, #22262b); }
.image-design-item-status.failed { background: var(--soft, #f1f0eb); color: var(--danger, #a13a30); }
.image-design-preview-link { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 250px; overflow: hidden; border-radius: 7px; background: var(--soft, #f1f0eb); }
.image-design-generated-image { display: block; width: 100%; max-height: 500px; object-fit: contain; }
.image-design-item-actions { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; padding: 4px 0 8px; background: #fff; }
.image-design-item-actions .button { min-height: 34px; padding: 6px 8px; }
.image-design-item-actions .image-design-download { order: 5; margin-left: auto; }
.image-design-item-actions .image-design-download + .image-design-download { margin-left: 0; }
.image-design-item-meta, .image-design-item-error { min-width: 0; margin: 0; color: var(--muted, #656b72); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.image-design-item-error { color: var(--danger, #a13a30); }
.image-design-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.image-design-result-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.image-design-result-meta i.ph { font-size: 14px; }
.image-design-result-meta > .image-design-help { flex: 1; min-width: 90px; }
.image-design-result-meta > .image-design-help > summary { justify-content: flex-end; }
.image-design-result-meta > .image-design-help[open] { flex-basis: 100%; }
.image-design-result-meta > .image-design-help[open] > summary { justify-content: flex-start; }
.image-design-text-check { min-width: 0; padding-top: 8px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-text-check > summary { flex-wrap: wrap; gap: 5px; }
.image-design-text-check > summary strong { font-size: 12px; }
.image-design-review-model, .image-design-check-status { padding: 2px 5px; border-radius: 5px; background: var(--soft, #f1f0eb); font-size: 11px; font-weight: 400; }
.image-design-translation-check { min-width: 0; margin-top: 9px; overflow: auto; }
.image-design-translation-check table { width: 100%; margin-top: 8px; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.image-design-translation-check th, .image-design-translation-check td { width: 50%; padding: 9px 10px; border: 1px solid var(--line, #e4e3de); vertical-align: top; text-align: start; }
.image-design-translation-check th { background: var(--soft, #f1f0eb); color: var(--ink, #22262b); font-weight: 600; }
.image-design-translation-check pre, .image-design-reverse-output { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.85; }
.image-design-reverse-output { padding: 12px; border-radius: 7px; background: var(--soft, #f1f0eb); font-size: 14px; }
.image-design-feedback { display: grid; gap: 9px; min-width: 0; padding-top: 13px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-feedback-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.image-design-feedback-head > strong { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.image-design-feedback-head > .image-design-field { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.image-design-feedback-head select { max-width: 170px; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line, #e4e3de); border-radius: 7px; background: var(--soft, #f1f0eb); color: var(--ink, #22262b); font-size: 12px; }
.image-design-feedback-composer > .image-design-field > .image-design-field-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.image-design-feedback textarea { width: 100%; min-height: 75px; max-height: 260px; padding: 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink, #22262b); font-size: 13px; line-height: 1.8; resize: vertical; outline-offset: -4px; }
.image-design-feedback-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; padding: 7px 9px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-feedback-toolbar > .button { margin-left: auto; }
.image-design-feedback-upload { flex: 1 1 110px; display: grid; gap: 5px; min-width: 0; }
.image-design-feedback-model { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; max-width: 100%; min-height: 36px; padding: 2px 6px; border-radius: 7px; background: var(--soft, #f1f0eb); }
.image-design-feedback-model > .image-design-field-title > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.image-design-feedback-model select { max-width: 190px; min-width: 0; min-height: 30px; padding: 3px 1px; border: 0; border-radius: 5px; background: transparent; color: var(--ink, #22262b); font-size: 12px; }
.image-design-feedback-previews { display: grid; gap: 5px; min-width: 0; padding-top: 6px; }
.image-design-feedback-preview { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 0; border-bottom: 1px solid var(--line, #e4e3de); }
.image-design-feedback-preview img { width: 43px; height: 43px; object-fit: contain; border-radius: 5px; background: var(--soft, #f1f0eb); }
.image-design-feedback-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
.image-design-feedback-preview .button { margin-left: auto; min-height: 30px; padding: 4px 6px; }
.image-design-feedback-message { min-width: 0; margin: 0; color: var(--muted, #656b72); font-size: 12px; overflow-wrap: anywhere; }
.image-design-strict-note { margin: 0; color: var(--muted, #656b72); font-size: 12px; }
.image-design-selection-ui { display: grid; gap: 8px; min-width: 0; }
.image-design-selection-stage { position: relative; display: inline-block; max-width: 100%; width: fit-content; line-height: 0; cursor: crosshair; touch-action: none; user-select: none; }
.image-design-selection-image { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; pointer-events: none; }
.image-design-selection-rect { position: absolute; box-sizing: border-box; border: 2px solid var(--accent, #506577); background: var(--selected, #e9edf0); box-shadow: 0 0 0 1px #fff; cursor: move; touch-action: none; }
.image-design-selection-rect[hidden] { display: none; }
.image-design-selection-handle { position: absolute; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: var(--accent, #506577); box-shadow: 0 1px 4px #0005; touch-action: none; }
.image-design-selection-handle.nw { top: -9px; left: -9px; cursor: nwse-resize; }
.image-design-selection-handle.ne { top: -9px; right: -9px; cursor: nesw-resize; }
.image-design-selection-handle.sw { bottom: -9px; left: -9px; cursor: nesw-resize; }
.image-design-selection-handle.se { bottom: -9px; right: -9px; cursor: nwse-resize; }
.image-design-selection-summary { margin: 0; color: var(--muted, #656b72); font-size: 12px; font-variant-numeric: tabular-nums; }
.image-design-selection-controls { display: flex; flex-wrap: wrap; gap: 5px; }
.image-design-strict-prompt-preview { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 10px; border-radius: 7px; background: var(--soft, #f1f0eb); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; }
.image-design-history { display: grid; gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line, #e4e3de); }
.image-design-history h4 { margin: 0; font-size: 13px; }
.image-design-history-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.image-design-history-item { display: grid; align-content: start; gap: 6px; min-width: 0; }
.image-design-history-item img { display: block; width: 100%; height: 130px; object-fit: contain; border-radius: 7px; background: var(--soft, #f1f0eb); }
.image-design-history-item small { color: var(--muted, #656b72); font-size: 11px; overflow-wrap: anywhere; }
.image-design-history-item .button { justify-self: start; }
.image-design-footer-note { margin: 0; }
.image-text-review { display: grid; gap: 8px; min-width: 0; margin-top: 12px; }
.image-text-review textarea { width: 100%; min-height: 80px; padding: 9px; border: 1px solid var(--control-line, #a0a5a9); border-radius: 7px; background: #fff; color: var(--ink, #22262b); font: inherit; font-size: 13px; line-height: 1.8; }
.image-text-review output { white-space: pre-wrap; overflow-wrap: anywhere; }
.image-compare-dialog { box-sizing: border-box; width: min(1500px, 96vw); max-width: 96vw; height: 90vh; max-height: 90vh; padding: 18px; border: 1px solid var(--line, #e4e3de); border-radius: 12px; color: var(--ink, #22262b); background: #fff; font-family: inherit; }
.image-compare-dialog::backdrop { background: rgba(25,30,35,.38); }
.image-compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; }
.image-compare-toolbar strong { margin-right: auto; font-weight: 600; }
.image-compare-toolbar select, .image-compare-toolbar button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--control-line, #a0a5a9); border-radius: 7px; background: #fff; color: var(--ink, #22262b); font-family: inherit; font-size: 12px; }
.image-compare-toolbar :focus-visible { outline: 2px solid var(--accent, #506577); outline-offset: 3px; }
.image-compare-grid { display: flex; gap: 14px; height: calc(100% - 70px); }
.image-compare-grid > section { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.image-compare-grid p { margin: 0 0 7px; font-size: 12px; }
.image-compare-pane { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line, #e4e3de); background: repeating-conic-gradient(var(--soft, #f1f0eb) 0% 25%, #fff 0% 50%) 50% / 20px 20px; }
.image-compare-pane img { display: block; width: 100%; height: auto; max-width: 100%; }

@media (min-width: 1650px) {
  .image-design-workspace { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 24px; }
  .image-design-prompt { height: 190px; min-height: 190px; }
}
@media (max-width: 1050px) {
  .image-design-mobile-panes { display: flex; flex-wrap: wrap; gap: 5px; }
  .image-design-mobile-panes button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line, #e4e3de); border-radius: 7px; background: #fff; color: var(--muted, #656b72); font-family: inherit; font-size: 12px; cursor: pointer; }
  .image-design-mobile-panes button.active { border-color: var(--control-line, #a0a5a9); background: var(--selected, #e9edf0); color: var(--ink, #22262b); }
  .image-design-workspace { grid-template-columns: minmax(0, 1fr); }
  .image-design[data-pane="input"] .image-design-result-card { display: none; }
  .image-design[data-pane="result"] .image-design-form-card { display: none; }
  .image-design-empty { min-height: 240px; }
}
@media (max-width: 760px) {
  .image-design { padding: 14px 10px 18px; gap: 12px; }
  .image-design-intro { flex-wrap: wrap; gap: 5px; }
  .image-design-intro h2 { font-size: 18px; }
  .image-design-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .image-design-tab { flex: 0 0 auto; min-height: 38px; padding: 7px 8px; font-size: 12px; }
  .image-design-form, .image-design-result { padding: 0 14px 16px; gap: 12px; }
  .image-design-card-heading { margin: 0 -14px; padding: 12px 14px; flex-wrap: wrap; }
  .image-design-context-settings { gap: 8px; }
  .image-design-context-settings .image-design-field { min-width: 110px; }
  .image-design-prompt { min-height: 160px; padding: 9px 12px 12px; }
  .image-design-prompt-field > .image-design-field-title { padding-left: 12px; padding-right: 12px; }
  .image-design-compose-toolbar { padding: 8px; gap: 7px; }
  .image-design-upload { flex-basis: 100%; }
  .image-design-action-row { flex-basis: 100%; justify-content: flex-end; }
  .image-design-settings { padding: 0 8px 10px; }
  .image-design-settings > .image-design-field select { max-width: 178px; min-height: 34px; }
  .image-design-advanced-fields { gap: 8px; }
  .image-design-item-actions { gap: 5px; }
  .image-design-item-actions .button { min-height: 37px; padding: 7px; }
  .image-design-item-actions .image-design-download { margin-left: 0; }
  .image-design-generated-image { max-height: 380px; }
  .image-design-preview-link { min-height: 210px; }
  .image-design-feedback-head > .image-design-field { flex-wrap: wrap; }
  .image-design-feedback-toolbar { gap: 5px; }
  .image-design-feedback-model select { max-width: 170px; }
  .image-design-feedback-toolbar > .button { min-height: 37px; }
  .image-design-result-meta { gap: 6px; }
  .image-design-text-check th, .image-design-text-check td { padding: 8px; }
  .image-compare-dialog { padding: 12px; }
  .image-compare-grid { flex-direction: column; height: calc(100% - 105px); }
}
@media (prefers-reduced-motion: reduce) { .image-design summary > .ph-caret-down { transition: none; } }
/* Shared Nordic workspace tokens, preserving native generation controls. */
.image-design { padding:28px 32px 40px; gap:24px; background:var(--canvas,#faf9f6); }
.image-design-intro h2 { font-size:24px; letter-spacing:-.03em; }
.image-design-card-heading h3 { font-size:16px; }
.image-design .button { font-size:14px; border-radius:8px; min-height:40px; }
.image-design .button.primary { color:var(--surface,#fff); }
.image-design-tab.active { color:var(--ink,#22262b); border-color:transparent; }
.image-design-material-stack img { box-shadow:none; transform:none; }
.image-design-material-stack img:first-child { transform:none; }
.image-design-settings > .image-design-field > .image-design-field-title > span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
.image-design-settings > .image-design-field select { font-size:14px; }
.image-design-settings > .image-design-field { flex-wrap:wrap; }
.image-design-prompt,.image-design-feedback textarea,.image-design-reverse-output { font-size:15px; }
.image-design-composer,.image-design-feedback-composer { border-color:var(--control-line,#a0a5a9); }
.image-design-field :is(input,select),.image-design-advanced-fields :is(input,select) { border-color:var(--control-line,#a0a5a9); }
.image-design-item-status.succeeded { background:transparent; color:var(--success,#35634b); }
.image-design-result-item,.image-design-preview-link { scroll-margin-top:16px; }
.image-compare-dialog { border:0; box-shadow:0 12px 36px rgba(25,30,35,.16); }
.image-design-help summary { min-height:36px; }
@media(max-width:1250px) { .image-design { padding:24px; gap:16px; } }
@media(max-width:760px) {
 .image-design { padding:16px 16px 24px; }
 .image-design-intro h2 { font-size:22px; }
 .image-design-prompt,.image-design-feedback textarea,.image-design-reverse-output,.image-design input { font-size:16px; }
 .image-design :is(.button,.image-design-tab,.image-design-remove),.image-design-settings > .image-design-field select,.image-design-advanced-fields :is(input,select),.image-design-mobile-panes button,.image-compare-toolbar :is(button,select) { min-height:44px; }
 .image-design-settings > .image-design-field { flex:1 1 140px; }
 .image-design-settings > .image-design-field select { max-width:100%; }
 .image-design-feedback-toolbar { align-items:center; }
 .image-design-feedback-model { flex-wrap:wrap; }
 .image-design-feedback-model select { min-height:44px; max-width:100%; }
}