#replace-image-color-app [hidden] { display: none !important; }
#replace-image-color-app .ric-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#replace-image-color-app .ric-color-pair { display: flex; align-items: stretch; gap: 8px; min-width: 0; min-height: 46px; }
#replace-image-color-app .ric-color-pair input[type=color] { width: 50px; min-width: 50px; min-height: 46px; height: auto; padding: 4px; border: 1px solid var(--site-border, #d1d5db); border-radius: 8px; background: var(--site-surface, #fff); cursor: pointer; }
#replace-image-color-app .ric-color-pair .tool-input { width: 0; flex: 1 1 auto; min-width: 0; height: auto; min-height: 46px; padding-inline: 10px; font-variant-numeric: tabular-nums; }
#replace-image-color-app .ric-range { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; border: 1px solid var(--site-border, #d1d5db); border-radius: 8px; padding: 8px 12px; }
#replace-image-color-app .ric-range input { min-width: 0; width: 100%; flex: 1 1 auto; accent-color: #2563eb; }
#replace-image-color-app .ric-range output { min-width: 4ch; text-align: end; font-variant-numeric: tabular-nums; }
#replace-image-color-app .ric-file-info:empty { display: none; }
#replace-image-color-app .ric-file-info { overflow-wrap: anywhere; margin-block: 12px 18px; }
#replace-image-color-app .ric-pick-help { margin-block: 16px 12px; }
#replace-image-color-app .ric-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#replace-image-color-app .ric-previews figure { margin: 0; min-width: 0; }
#replace-image-color-app .ric-previews figcaption { font-weight: 600; line-height: 1.5; margin-bottom: 8px; overflow-wrap: anywhere; }
#replace-image-color-app .ric-canvas-wrap { min-height: 80px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--site-border, #d1d5db); border-radius: 8px; background-color: #fff; background-image: linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
#replace-image-color-app canvas { max-width: 100%; height: auto; display: block; }
#replace-image-color-app #ric-original { cursor: crosshair; touch-action: manipulation; }
#replace-image-color-app .ric-preview-help { margin-block: 12px 0; }
#replace-image-color-app .ric-actions { margin-top: 18px; }
#replace-image-color-app .ric-actions button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
#replace-image-color-app progress { width: 100%; margin-top: 16px; accent-color: #2563eb; }
#replace-image-color-app .ric-result-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; min-width: 0; margin-top: 12px; }
#replace-image-color-app .ric-result-line p { margin: 0; overflow-wrap: anywhere; }
.ric-copy > p { line-height: 1.75; margin: 0 0 14px; max-width: 90ch; }
html[data-theme=dark] #replace-image-color-app .ric-color-pair input[type=color],html[data-theme=dark] #replace-image-color-app .ric-range { background-color: #111827; border-color: #4b5563; }
html[data-theme=dark] #replace-image-color-app .ric-canvas-wrap { border-color: #4b5563; background-color: #374151; background-image: linear-gradient(45deg,#1f2937 25%,transparent 25%),linear-gradient(-45deg,#1f2937 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1f2937 75%),linear-gradient(-45deg,transparent 75%,#1f2937 75%); }
@media(max-width:1100px) { #replace-image-color-app .ric-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { #replace-image-color-app .ric-fields,#replace-image-color-app .ric-previews { grid-template-columns: minmax(0,1fr); } }