.custom-reference-heading { display: grid; min-width: 0; }
.reference-role-custom.has-reference .reference-role-picker {
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto;
  padding-right: 34px;
}
.reference-role-custom.has-reference .reference-role-copy { align-self: center; }
.reference-role-custom .reference-role-copy small { overflow-wrap: anywhere; }
.custom-reference-refine {
  position: static; justify-self: end; width: auto; max-width: calc(100% - 20px);
  min-height: 30px; margin: 0 10px 10px; padding: 5px 10px;
  border: 1px solid var(--accent-line); border-radius: 8px;
  background: var(--accent-faint); color: var(--accent); font: inherit; font-size: calc(11px + var(--app-font-increase, 1pt)); font-weight: 650; cursor: pointer;
}
.custom-reference-refine[hidden], .custom-reference-heading .reference-role-action[hidden] { display: none; }
.custom-reference-refine:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.custom-reference-refine:active { background: var(--accent-soft); }
.custom-reference-region-status { color: var(--accent); font-size: calc(10px + var(--app-font-increase, 1pt)); line-height: 1.4; margin: -4px 0 3px; }

.reference-region-editor {
  width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; overflow: auto; padding: 0;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--composer-card-solid); color: var(--text); box-shadow: var(--shadow-floating);
}
.reference-region-editor::backdrop { background: var(--overlay); backdrop-filter: blur(5px); }
.reference-region-editor [hidden] { display: none !important; }
.reference-region-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 8px; }
.reference-region-eyebrow { color: var(--muted); font-size: calc(11px + var(--app-font-increase, 1pt)); font-weight: 550; }
.reference-region-header h2 { font-size: calc(18px + var(--app-font-increase, 1pt)); letter-spacing: -0.035em; margin: 4px 0 0; line-height: 1.4; }
.reference-region-help { margin: 0; padding: 0 22px 16px; font-size: calc(12px + var(--app-font-increase, 1pt)); line-height: 1.6; color: var(--muted); word-break: keep-all; }
.reference-region-editor button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 36px; margin: 0; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text);
  font: inherit; font-size: calc(12px + var(--app-font-increase, 1pt)); font-weight: 550; line-height: 1.3; cursor: pointer;
}
.reference-region-editor button:disabled { opacity: 0.38; cursor: default; }
.reference-region-editor button:focus-visible, .reference-region-editor input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.reference-region-editor button:not(:disabled):active { background: var(--surface-hover); }
.reference-region-editor svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reference-region-editor .reference-region-icon { padding: 8px; width: 36px; }
.reference-region-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 22px 14px; }
.reference-region-tools { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.reference-region-toolbar button { flex-shrink: 0; width: auto; min-width: max-content; white-space: nowrap; }
.reference-region-toolbar button > span { flex-shrink: 0; overflow: visible; text-overflow: clip; }
.reference-region-tools button[aria-pressed="true"] { color: var(--accent); background: var(--composer-card-solid); border-color: var(--line); box-shadow: var(--shadow-control); }
.reference-region-size { display: flex; align-items: center; flex: 1; min-width: 150px; max-width: 300px; gap: 9px; font-size: calc(11px + var(--app-font-increase, 1pt)); color: var(--muted); }
.reference-region-size input { appearance: auto; width: 100%; min-width: 50px; min-height: 24px; height: 24px; padding: 0; margin: 0; accent-color: var(--accent); border: 0; box-shadow: none; }
.reference-region-size output { min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.reference-region-stage {
  display: flex; align-items: center; justify-content: center; min-height: 160px;
  margin: 0 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-soft); overflow: hidden;
}
.reference-region-plane { position: relative; min-width: 0; width: min(100%, calc(min(52dvh, 600px) * var(--region-aspect, 1))); aspect-ratio: var(--region-aspect, 1); line-height: 0; border-radius: 7px; overflow: hidden; }
.reference-region-plane [data-image] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.reference-region-plane [data-overlay] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; touch-action: none; cursor: none; }
.reference-region-plane [data-overlay]:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.reference-region-plane [data-overlay].is-preview { cursor: default; }
.reference-region-cursor { position: absolute; box-sizing: border-box; transform: translate(-50%, -50%); pointer-events: none; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #222; }
.reference-region-cursor.is-eraser { border-style: dashed; box-shadow: 0 0 0 1px #222; background: transparent; }
.reference-region-loading { padding: 50px 14px; font-size: calc(13px + var(--app-font-increase, 1pt)); line-height: 1.6; color: var(--muted); text-align: center; }
.reference-region-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px 0; }
.reference-region-meta [data-preview][aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.reference-region-meta [data-replace] { color: var(--muted); }
.reference-region-status { min-height: 18px; margin: 7px 22px 14px; color: var(--muted); font-size: calc(11px + var(--app-font-increase, 1pt)); line-height: 1.6; word-break: keep-all; }
.reference-region-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.reference-region-footer > div { display: flex; margin-left: auto; gap: 8px; }
.reference-region-footer button { min-height: 40px; padding: 10px 15px; border-color: var(--line); }
.reference-region-footer .reference-region-whole { color: var(--muted); border-color: transparent; font-size: calc(11px + var(--app-font-increase, 1pt)); padding-left: 0; }
.reference-region-footer .reference-region-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.reference-region-footer .reference-region-primary:not(:disabled):active { background: var(--accent-hover); }
@media (hover: hover) and (pointer: fine) {
  .custom-reference-refine:hover { background: var(--accent-soft); }
  .reference-region-editor button:not(:disabled):hover { background: var(--surface-hover); }
  .reference-region-footer .reference-region-primary:not(:disabled):hover { background: var(--accent-hover); }
}
@media (max-width: 600px) {
  .reference-region-editor { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .reference-region-header, .reference-region-toolbar, .reference-region-footer { padding-left: 14px; padding-right: 14px; }
  .reference-region-help { padding-left: 14px; padding-right: 14px; }
  .reference-region-size { order: 3; max-width: none; flex-basis: 100%; }
  .reference-region-stage { margin: 0 8px; padding: 8px; }
  .reference-region-editor button { min-height: 42px; }
  .reference-region-editor .reference-region-icon { width: 42px; }
  .reference-region-plane { width: min(100%, calc(43dvh * var(--region-aspect, 1))); }
}

#imageEditWindow .edit-drawing-canvas.is-lasso,
.reference-region-plane [data-overlay].is-lasso:not(.is-preview) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M2%202v16l4-4%203%207%203-1-3-7h6Z%22%20fill%3D%22%23222%22%20stroke%3D%22white%22%20stroke-width%3D%221.3%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17%2019c-4-2-2-7%203-7s8%205%203%207c-3%202-7%200-6-2%201-1%203%200%202%202l-2%205%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17%2019c-4-2-2-7%203-7s8%205%203%207c-3%202-7%200-6-2%201-1%203%200%202%202l-2%205%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 2 2, default; }