@charset "UTF-8";
.cr-dropzone { position: relative; border: 2px dashed var(--border-color); border-radius: var(--tool-radius); padding: 34px 16px; text-align: center; cursor: pointer; transition: var(--tool-transition); background: var(--alt-content-bg-color); }
.cr-dropzone.dragover { border-color: var(--tool-accent); background: var(--content-bg-color); }
.cr-dropzone p { margin: 6px 0; }
.cr-sub { opacity: 0.7; font-size: 0.9rem; }
.cr-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-editor { margin-top: 4px; }
.cr-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: end; }
.cr-color-row { display: flex; align-items: center; gap: 10px; }
.cr-color-row input[type=color] { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); background: var(--bg-color); cursor: pointer; }
.cr-hex { font-family: 'Courier New', monospace; font-size: 0.95rem; }
.cr-hint { font-weight: 400; opacity: 0.65; font-size: 0.8rem; }
.cr-tol-field input[type=range] { width: 100%; }
.cr-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.cr-canvas-wrap { text-align: center; background:
    linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); padding: 10px; overflow: auto; }
#crCanvas { max-width: 100%; height: auto; cursor: crosshair; border-radius: 2px; }
.cr-tip { font-size: 0.85rem; opacity: 0.8; margin: 10px 0 0; }
.cr-about p { margin: 0 0 12px; }