.redact-page { background: #f3f0e8; }
.redact-canvas-shell { overflow: auto; padding: 18px; border: 1px solid #cfc8bc; background: #dad6ce; }
.redact-stage { position: relative; width: 100%; max-height: 76vh; margin: auto; overflow: hidden; background-color: #e7e2d9; background-image: linear-gradient(45deg,#d9d4cb 25%,transparent 25%),linear-gradient(-45deg,#d9d4cb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d4cb 75%),linear-gradient(-45deg,transparent 75%,#d9d4cb 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; box-shadow: 0 16px 38px rgba(42,38,33,.16); }
#redactCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; outline: 0; }
#redactCanvas:focus-visible { box-shadow: inset 0 0 0 4px rgba(255,90,60,.85); }
.redact-region-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin: 12px 2px 0; color: #706a62; font-size: 13px; line-height: 1.55; }
.redact-region-meta output:first-child { color: #b6452e; font-weight: 850; }
.redact-mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.redact-mode-options button { min-height: 46px; border: 1px solid #59554e; color: #d8d2c9; background: #34322e; font-size: 13px; font-weight: 800; cursor: pointer; }
.redact-mode-options button.active { border-color: #ff775d; color: #fff; background: #b8462e; }
.redact-safety-note { margin: 12px 0 0; padding: 11px; border-left: 3px solid #8bd3ad; color: #d6e8dd; background: rgba(70,119,94,.16); font-size: 12px; line-height: 1.55; }
.redact-safety-note [data-for-mode] { display: none; }
.redact-safety-note[data-mode="solid"] [data-for-mode="solid"],
.redact-safety-note[data-mode="pixelate"] [data-for-mode="pixelate"],
.redact-safety-note[data-mode="blur"] [data-for-mode="blur"] { display: block; }
.redact-control-label { display: block; color: #bab4ab; font-size: 12px; font-weight: 750; }
.redact-control-label + .redact-control-label { margin-top: 15px; }
.redact-control-label > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.redact-control-label input[type="range"] { width: 100%; accent-color: #ff775d; }
.redact-color-control { display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 12px; }
.redact-color-control input { width: 46px; height: 38px; padding: 2px; border: 1px solid #5b574f; background: #34322e; cursor: pointer; }
.redact-edit-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.redact-edit-actions button { min-height: 41px; border: 1px solid #5b574f; color: #ddd7ce; background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.redact-edit-actions button:disabled { opacity: .4; cursor: not-allowed; }
.redact-export-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.redact-export-formats label span { min-height: 41px; display: grid; place-items: center; border: 1px solid #59554e; color: #d8d2c9; background: #34322e; font-size: 13px; font-weight: 800; cursor: pointer; }
.redact-export-formats input { position: absolute; opacity: 0; pointer-events: none; }
.redact-export-formats input:checked + span { border-color: #ff775d; color: #fff; background: #b8462e; }
.redact-result-warning { margin: 12px 0 0; color: #6f6961; font-size: 12px; line-height: 1.55; }
.redact-page .crop-primary { min-height: 56px; }
.redact-page .crop-result-preview { background-color: #e9e5de; background-image: linear-gradient(45deg,#ddd8cf 25%,transparent 25%),linear-gradient(-45deg,#ddd8cf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd8cf 75%),linear-gradient(-45deg,transparent 75%,#ddd8cf 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; }

@media (max-width: 700px) {
  .redact-canvas-shell { padding: 9px; overflow: visible; }
  .redact-stage { max-height: none; }
  .redact-mode-options { grid-template-columns: 1fr; }
  .redact-region-meta { display: grid; }
}