.image-replacement-recolor { min-width:0; color:var(--ink); font-size:14px; }
.image-replacement-recolor [hidden],.rr-picker [hidden] { display:none!important; }
.rr-mode-bar,.rr-region-head,.rr-history-head,.rr-picker-head,.rr-picker-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.rr-mode-bar { margin-bottom:20px; flex-wrap:wrap; }
.rr-mode-switch,.rr-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rr-mode-switch .button[aria-pressed=true],.rr-level-nodes .button[aria-pressed=true],.rr-picker .button[aria-pressed=true] { background:var(--selected); border-color:var(--accent); color:var(--ink); }
.rr-mode-switch .button { min-width:112px; }
.rr-session-note { display:inline-flex; gap:6px; align-items:center; }
.rr-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:24px; align-items:start; }
.rr-input-panel,.rr-review,.rr-result { padding:20px; border:1px solid var(--line); background:var(--surface); border-radius:12px; min-width:0; }
.rr-input-panel>h3,.rr-review>h3,.rr-result>h3,.rr-history h3 { font-size:16px; line-height:1.5; margin:0 0 16px; font-weight:650; }
.rr-output-panel { display:grid; gap:20px; min-width:0; }
.rr-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.rr-upload { min-width:0; }
.rr-upload-title { display:block; margin:0 0 8px; font-weight:600; line-height:1.5; }
.rr-required { color:var(--red-700,var(--danger)); }
.rr-upload .rr-file { display:none; }
.rr-upload>.button { width:100%; justify-content:center; margin:8px 0 4px; }
.rr-upload-empty { display:flex; align-items:center; justify-content:center; min-height:144px; padding:16px; text-align:center; background:var(--soft); border:1px dashed var(--control-line); border-radius:8px; color:var(--muted); line-height:1.6; }
.rr-input-preview,.rr-mask-image,.rr-result-image { display:block; padding:0; width:100%; border:0; border-radius:8px; background:var(--soft); color:var(--ink); cursor:zoom-in; overflow:hidden; }
.rr-input-preview img { display:block; height:144px; width:100%; object-fit:contain; }
.rr-image-meta { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin:6px 0; line-height:1.5; overflow-wrap:anywhere; }
.rr-upload-limit { grid-column:1/-1; }
.rr-help { color:var(--muted); font-size:12px; line-height:1.65; margin:4px 0; overflow-wrap:anywhere; }
.rr-error { color:var(--red-700,var(--danger)); font-size:14px; line-height:1.65; margin:8px 0 0; overflow-wrap:anywhere; }
.rr-error:empty,.rr-message:empty { display:none; }
.rr-message { font-size:14px; line-height:1.65; margin:12px 0 0; overflow-wrap:anywhere; }
.rr-replace-settings { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.rr-replace-settings>h4,.rr-region h4 { margin:0; font-size:14px; font-weight:600; }
.rr-replace-settings>h4 { margin-bottom:14px; }
.rr-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.rr-field>label { font-size:14px; font-weight:600; line-height:1.5; }
.rr-field input:not([type=range]),.rr-field select,.rr-field textarea,.rr-coordinate-fields input,.rr-brush-label input { width:100%; box-sizing:border-box; min-height:44px; border:1px solid var(--control-line); border-radius:8px; padding:9px 10px; color:var(--ink); background:var(--surface); font:inherit; }
.rr-field textarea { min-height:84px; max-height:280px; resize:vertical; line-height:1.65; }
.rr-field [aria-invalid=true] { border-color:var(--red-700); }
.rr-level-range { display:block; width:100%; min-height:44px; margin:0; cursor:pointer; accent-color:var(--accent); }
.rr-level-nodes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 8px; }
.rr-level-nodes .button { padding:8px 5px; font-size:12px; justify-content:center; white-space:normal; line-height:1.4; }
.rr-level-nodes i { display:none; }
.rr-model-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(90px,1fr); gap:12px; margin-top:16px; }
.rr-model-grid .rr-field:first-child { grid-column:1/-1; }
.rr-regions { margin-top:20px; }
.rr-region { padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }
.rr-region-head { align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.rr-region-head h4 { padding-top:10px; }
.rr-crop-preview { display:block; max-width:180px; max-height:96px; object-fit:contain; background:var(--soft); border-radius:8px; margin:8px 0 12px; }
.rr-local-note,.rr-range-note,.rr-warning { background:var(--soft); padding:10px 12px; border-radius:8px; font-size:14px; line-height:1.65; margin:0 0 12px; overflow-wrap:anywhere; }
.rr-warning { color:var(--ink); }
.rr-submit-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.image-replacement-recolor .button,.rr-picker .button { min-height:44px; line-height:1.4; touch-action:manipulation; cursor:pointer; }
.image-replacement-recolor .button:disabled,.rr-picker .button:disabled { cursor:default; }
.rr-empty { color:var(--muted); background:var(--soft); border-radius:8px; padding:40px 20px; text-align:center; line-height:1.8; margin:0; }
.rr-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rr-review>:not(.rr-mask-preview) { grid-column:1/-1; }
.rr-review>h3 { margin-bottom:0; }
.rr-mask-preview { margin:0; min-width:0; }
.rr-mask-preview:only-of-type { grid-column:1/-1; }
.rr-mask-preview figcaption { font-size:14px; font-weight:600; line-height:1.5; margin-bottom:8px; }
.rr-mask-image img { width:100%; height:210px; display:block; object-fit:contain; }
.rr-mask-preview>.button { margin-top:8px; width:100%; justify-content:center; }
.rr-color-analysis { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 0; }
.rr-color-swatch { display:block; width:36px; height:36px; border:1px solid var(--control-line); border-radius:8px; flex-shrink:0; }
.rr-check { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.65; cursor:pointer; min-height:44px; padding:8px 0; }
.rr-check input { width:20px; height:20px; margin:1px 0 0; flex:0 0 20px; accent-color:var(--accent); }
.rr-confirmed { font-size:14px; line-height:1.65; color:var(--ui-success); margin:0; }
.rr-result-card { min-width:0; }
.rr-result-image img { display:block; width:100%; max-height:500px; object-fit:contain; }
.rr-result-card .rr-toolbar { margin:10px 0; }
.rr-history { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.rr-history-head h3 { margin:0; }
.rr-history-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:16px; }
.rr-history-grid .rr-result-card { border-top:1px solid var(--line); padding-top:12px; }
.rr-history-grid .rr-result-image img { height:180px; }
.rr-history-grid .rr-toolbar .button { flex:1 1 auto; justify-content:center; }
.rr-storage-help { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.rr-storage-help summary,.rr-picker summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-size:14px; }
.rr-storage-help p { max-width:85ch; margin-top:10px; }
.rr-picker { width:min(1120px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:0; box-sizing:border-box; border:0; border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 20px 65px rgba(25,30,35,.16); overflow:hidden; }
.rr-picker[open] { display:flex; flex-direction:column; }
.rr-picker::backdrop { background:rgba(25,30,35,.38); }
.rr-picker-head { padding:16px 20px; flex:0 0 auto; border-bottom:1px solid var(--line); }
.rr-picker-head h2 { font-size:20px; line-height:1.5; margin:0; }
.rr-picker-body { overflow-y:auto; min-height:0; padding:12px 20px 20px; overscroll-behavior:contain; scrollbar-color:var(--control-line) var(--soft); }
.rr-picker-body>.rr-toolbar { margin:10px 0; }
.rr-picker-viewport { height:clamp(180px,43dvh,500px); width:100%; overflow:hidden; background:var(--soft); border:1px solid var(--line); border-radius:8px; box-sizing:border-box; margin:12px 0; }
.rr-picker canvas { display:block; max-width:100%; touch-action:none; user-select:none; }
.rr-picker canvas:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.rr-coordinate-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:10px 0; }
.rr-coordinate-fields label { color:var(--muted); font-size:12px; }
.rr-coordinate-fields input { display:block; margin-top:4px; font-variant-numeric:tabular-nums; }
.rr-picker-footer { padding:12px 20px; border-top:1px solid var(--line); background:var(--surface); flex:0 0 auto; }
.rr-picker-footer>.rr-help { flex:1; max-width:64ch; }
.rr-picker-footer .rr-toolbar { flex-shrink:0; }
.rr-brush-label { display:flex; align-items:center; gap:8px; font-size:14px; }
.rr-brush-label input { width:76px; font-variant-numeric:tabular-nums; }
.rr-correction-controls>.rr-toolbar { margin-top:12px; }
.image-replacement-recolor :is(button,input,textarea,select,summary,[tabindex]):focus-visible,.rr-picker :is(button,input,summary):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.image-replacement-recolor input,.image-replacement-recolor textarea,.rr-picker input { caret-color:var(--accent); }
@media(max-width:1250px) { .rr-workspace { gap:16px; }.rr-input-panel,.rr-review,.rr-result { padding:16px; }.rr-inputs { gap:12px; }.rr-history-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; } }
@media(max-width:1100px) { .rr-workspace { grid-template-columns:minmax(0,1fr); }.rr-output-panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start; }.rr-review { grid-template-columns:minmax(0,1fr); }.rr-review>:not(.rr-mask-preview) { grid-column:auto; }.rr-result-image img { max-height:420px; }.rr-history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:850px) { .rr-output-panel { grid-template-columns:minmax(0,1fr); }.rr-picker-footer { gap:8px; flex-wrap:wrap; }.rr-picker-footer>.rr-help { flex-basis:100%; }.rr-picker-footer .rr-toolbar { margin-left:auto; }.rr-picker-head,.rr-picker-body,.rr-picker-footer { padding-left:14px;padding-right:14px; } }
@media(max-height:600px) { .rr-picker { max-height:calc(100dvh - 16px); }.rr-picker-head { padding-top:8px;padding-bottom:8px; }.rr-picker-footer { padding-top:8px;padding-bottom:8px; }.rr-picker-viewport { height:200px; }.rr-field textarea { max-height:180px; } }
@media(prefers-reduced-motion:reduce) { .image-replacement-recolor *,.rr-picker * { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }