/*!
 * Curious Research Metadata Inspector — front-end styles
 * Purple brand palette matches the Curious Research desktop app.
 */
.crmi-instance {
    --crmi-bg-dark: #241033;
    --crmi-bg-panel: #2f1747;
    --crmi-accent: #9b4fd1;
    --crmi-accent-hover: #b06fe0;
    --crmi-text-light: #f3ecfa;
    --crmi-text-muted: #c9b8dd;
    --crmi-success: #5fd68a;
    --crmi-warning: #f0b429;
    --crmi-error: #e05c5c;
    --crmi-row-alt: #3a1f57;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--crmi-text-light);
    background: var(--crmi-bg-dark);
    border-radius: 10px;
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
}
.crmi-instance *, .crmi-instance *::before, .crmi-instance *::after { box-sizing: border-box; }

/* Logo stacked above the title, centered, on every screen size — a
   horizontal (logo | text) layout was overflowing the container on
   narrower pages, pushing "Metadata Inspector" off to the right. */
.crmi-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 16px;
}
.crmi-header picture, .crmi-header img { display: block; max-width: 100%; }
.crmi-header img { height: 40px; width: auto; }
.crmi-header h3 { margin: 0; font-size: 1.25rem; color: var(--crmi-text-light); }
.crmi-privacy-note {
    background: rgba(95, 214, 138, 0.12);
    border: 1px solid var(--crmi-success);
    color: var(--crmi-text-light);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 18px;
}
.crmi-privacy-note strong { color: var(--crmi-success); }

.crmi-dropzone {
    border: 2px dashed var(--crmi-accent);
    border-radius: 8px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--crmi-bg-panel);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.crmi-dropzone:hover, .crmi-dropzone.crmi-dragover { background: #38205a; border-color: var(--crmi-accent-hover); }
.crmi-dropzone.crmi-processing { opacity: 0.6; pointer-events: none; }
.crmi-dropzone p { margin: 0 0 8px; color: var(--crmi-text-muted); }
.crmi-dropzone .crmi-dropzone-title { color: var(--crmi-text-light); font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.crmi-file-input { display: none; }
.crmi-browse-btn {
    display: inline-block;
    margin-top: 6px;
    background: var(--crmi-accent);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 18px;
    font-size: 0.9rem;
    cursor: pointer;
}
.crmi-browse-btn:hover { background: var(--crmi-accent-hover); }

.crmi-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.crmi-file-chip {
    background: var(--crmi-bg-panel);
    color: var(--crmi-text-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.8rem;
    cursor: pointer;
}
.crmi-file-chip-active { color: var(--crmi-text-light); border-color: var(--crmi-accent); }

.crmi-warnings { margin: 14px 0; }
.crmi-warning {
    color: var(--crmi-warning);
    font-size: 0.85rem;
    background: rgba(240, 180, 41, 0.1);
    border-radius: 5px;
    padding: 6px 10px;
    margin-bottom: 6px;
}

.crmi-results { margin-top: 18px; }

/* Top-level function tabs (Metadata/Exif, Image Adjustment, ...) */
.crmi-main-tabs {
    display: flex; gap: 6px; margin-bottom: 18px;
    border-bottom: 2px solid var(--crmi-bg-panel);
}
.crmi-main-tab-btn {
    background: none; border: none; color: var(--crmi-text-muted);
    padding: 12px 20px; font-size: 1rem; font-weight: 600; cursor: pointer;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.crmi-main-tab-btn:hover { color: var(--crmi-text-light); }
.crmi-main-tab-btn.crmi-main-tab-active { color: var(--crmi-accent-hover); border-bottom-color: var(--crmi-accent); }

.crmi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--crmi-bg-panel); margin-bottom: 14px; }
.crmi-tab-btn {
    background: none; border: none; color: var(--crmi-text-muted);
    padding: 10px 16px; font-size: 0.9rem; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.crmi-tab-btn.crmi-tab-active { color: var(--crmi-text-light); border-bottom-color: var(--crmi-accent); }

.crmi-section { margin-bottom: 20px; background: var(--crmi-bg-panel); border-radius: 8px; padding: 14px 16px; }
.crmi-section-title { margin: 0 0 10px; font-size: 0.95rem; color: var(--crmi-accent-hover); text-transform: uppercase; letter-spacing: 0.03em; }
.crmi-field-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.88rem; }
.crmi-field-row:last-child { border-bottom: none; }
.crmi-field-label { color: var(--crmi-text-muted); flex: 0 0 auto; }
.crmi-field-value { color: var(--crmi-text-light); text-align: right; word-break: break-word; }
.crmi-field-value.crmi-not-present { color: #8b7aa0; font-style: italic; }
.crmi-maps-link { color: var(--crmi-accent-hover); text-decoration: underline; }

/* Geolocation tab — unlike the canvas-based analysis tabs, the photo
   preview and map here are a plain <img>/<iframe>, so the responsive
   `max-width: 100%` behavior most themes apply is what we *want* rather
   than something to defend against with `!important` overrides. */
.crmi-geo-empty { color: var(--crmi-text-muted); font-style: italic; padding: 8px 2px; }
.crmi-geo-content {
    display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.crmi-geo-photo, .crmi-geo-map {
    flex: 1 1 320px; min-width: 240px; background: var(--crmi-bg-panel);
    border-radius: 8px; overflow: hidden; display: flex; align-items: center;
    justify-content: center; min-height: 240px;
}
.crmi-geo-photo-img { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: contain; }
.crmi-geo-photo-unsupported, .crmi-geo-map-placeholder p {
    color: var(--crmi-text-muted); font-style: italic; font-size: 0.85rem;
    text-align: center; padding: 16px;
}
.crmi-geo-map-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px;
}
.crmi-geo-map-placeholder p { padding: 0; }
.crmi-geo-show-map-btn {
    background: var(--crmi-accent); color: #fff; border: none; border-radius: 5px;
    padding: 9px 18px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.crmi-geo-show-map-btn:hover { background: var(--crmi-accent-hover); }
.crmi-geo-map-iframe { width: 100%; height: 100%; min-height: 240px; border: none; display: block; }
.crmi-geo-links { display: flex; gap: 10px; flex-wrap: wrap; }
.crmi-geo-link-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; text-decoration: none;
    display: inline-block; cursor: pointer;
}
.crmi-geo-link-btn:hover { background: rgba(155, 79, 209, 0.25); }

.crmi-tag-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.crmi-tag-table th { text-align: left; color: var(--crmi-accent-hover); padding: 8px; border-bottom: 1px solid var(--crmi-accent); }
.crmi-tag-table td { padding: 6px 8px; color: var(--crmi-text-light); vertical-align: top; }
.crmi-tag-table tbody tr:nth-child(even) { background: var(--crmi-row-alt); }
.crmi-tag-value { word-break: break-word; max-width: 420px; }
.crmi-empty { color: var(--crmi-text-muted); font-style: italic; }

.crmi-export-bar { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.crmi-export-bar button {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 7px 14px; font-size: 0.82rem; cursor: pointer;
}
.crmi-export-bar button:hover { background: var(--crmi-accent); }

/* -------------------------------------------------------------------- */
/* Image Adjustment tab                                                  */
/* -------------------------------------------------------------------- */
.crmi-imgadj { display: flex; flex-direction: column; gap: 12px; }
.crmi-imgadj-loading, .crmi-imgadj-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-imgadj-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 10px 12px;
}
.crmi-imgadj-group { display: flex; gap: 4px; }
.crmi-imgadj-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 6px 12px; font-size: 0.82rem; cursor: pointer; line-height: 1.2;
}
.crmi-imgadj-btn:hover { background: rgba(155, 79, 209, 0.25); }
.crmi-imgadj-toggle.crmi-imgadj-toggle-active { background: var(--crmi-accent); color: #fff; }
.crmi-imgadj-contrast-label {
    display: flex; align-items: center; gap: 8px; color: var(--crmi-text-muted); font-size: 0.82rem;
}
.crmi-imgadj-contrast-slider { width: 120px; accent-color: var(--crmi-accent); }
.crmi-imgadj-contrast-value { min-width: 2.5em; text-align: right; color: var(--crmi-text-light); }

.crmi-imgadj-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    cursor: grab;
    touch-action: none;
    /* Center the canvas with flexbox rather than the old "0x0 absolutely
       positioned anchor + -50%/-50% transform" trick. That trick made the
       0x0 div the percentage-resolution containing block for the canvas —
       and WordPress themes very commonly ship a global reset like
       `img, canvas, video { max-width:100%; height:auto }` for responsive
       media, which against a 0-width containing block collapses the canvas
       to nothing visible. Flexbox centering has no such trap. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-imgadj-viewport.crmi-imgadj-dragging { cursor: grabbing; }
.crmi-imgadj-stage { position: relative; }
.crmi-imgadj-stage canvas {
    display: block;
    transform-origin: center center;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    /* Belt-and-suspenders against that same theme reset: this canvas's
       real on-screen size is driven entirely by JS (its width/height
       attributes plus the transform below), never by CSS layout, so it
       opts out of any external max-width/height rule that might otherwise
       shrink or distort it. */
    max-width: none !important;
    max-height: none !important;
}

.crmi-imgadj-loupe {
    position: absolute;
    width: 160px; height: 160px;
    /* Rounded square rather than a full circle: a forensic magnifier is for
       reading pixels accurately, and a circular clip loses the corners of
       the zoomed window right when they might matter. */
    border-radius: 10px;
    border: 2px solid var(--crmi-accent-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.08s ease;
    background: #000;
}
.crmi-imgadj-loupe canvas {
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    image-rendering: pixelated; display: block;
}
/* Center crosshair — marks exactly which source pixel is under the cursor. */
.crmi-imgadj-loupe::before, .crmi-imgadj-loupe::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.crmi-imgadj-loupe::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }
.crmi-imgadj-loupe::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }

.crmi-imgadj-histogram {
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px;
}
.crmi-imgadj-histogram canvas { width: 100%; height: 160px; display: block; border-radius: 4px; }
.crmi-imgadj-histo-legend { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; font-size: 0.78rem; }
.crmi-histo-swatch { position: relative; padding-left: 16px; color: var(--crmi-text-muted); }
.crmi-histo-swatch::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 2px;
}
.crmi-histo-swatch.crmi-histo-r::before { background: #e05c5c; }
.crmi-histo-swatch.crmi-histo-g::before { background: #5fd68a; }
.crmi-histo-swatch.crmi-histo-b::before { background: #5f9fd6; }
.crmi-histo-swatch.crmi-histo-lum::before { background: #c9b8dd; }

/* -------------------------------------------------------------------- */
/* Clone Detection tab                                                   */
/* -------------------------------------------------------------------- */
.crmi-clone { display: flex; flex-direction: column; gap: 12px; }
.crmi-clone-loading, .crmi-clone-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-clone-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px 14px;
}
.crmi-clone-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--crmi-text-muted); }
.crmi-clone-control label { cursor: help; }
.crmi-clone-control-row { display: flex; align-items: center; gap: 8px; }
.crmi-clone-slider { width: 130px; accent-color: var(--crmi-accent); }
.crmi-clone-value { color: var(--crmi-text-light); min-width: 2.4em; text-align: right; font-size: 0.85rem; }
.crmi-clone-select {
    background: var(--crmi-bg-dark); color: var(--crmi-text-light);
    border: 1px solid var(--crmi-accent); border-radius: 5px; padding: 5px 8px; font-size: 0.85rem;
}
.crmi-clone-run-group { display: flex; gap: 8px; margin-left: auto; align-self: center; }
.crmi-clone-run-btn {
    background: var(--crmi-accent); color: #fff; border: none; border-radius: 5px;
    padding: 9px 18px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.crmi-clone-run-btn:hover { background: var(--crmi-accent-hover); }
.crmi-clone-run-btn:disabled { opacity: 0.6; cursor: default; }
.crmi-clone-cancel-btn {
    background: transparent; border: 1px solid var(--crmi-error); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer;
}
.crmi-clone-cancel-btn:hover { background: rgba(224, 92, 92, 0.2); }

.crmi-clone-status { font-size: 0.85rem; color: var(--crmi-text-muted); padding: 2px 2px; }
.crmi-clone-status-busy { color: var(--crmi-accent-hover); }
.crmi-clone-status-found { color: var(--crmi-warning); }
.crmi-clone-status-warning { color: var(--crmi-warning); }
.crmi-clone-status-error { color: var(--crmi-error); }

.crmi-clone-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Centered with flexbox rather than a 0x0 absolutely-positioned anchor —
       see the Image Adjustment viewport above (and the v1.1.2 changelog) for
       why: a 0-width containing block collapses to invisible against a
       WordPress theme's common `img, canvas, video { max-width:100%;
       height:auto }` reset. Flexbox centering has no such trap. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-clone-stage { position: relative; }
.crmi-clone-stage canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    /* Belt-and-suspenders against that same theme reset, matching the JS-applied
       !important inline sizing set in cr-clone-detect.js. */
    max-width: none !important;
    max-height: none !important;
}

/* -------------------------------------------------------------------- */
/* Error Analysis tab                                                    */
/* -------------------------------------------------------------------- */
.crmi-ela { display: flex; flex-direction: column; gap: 12px; }
.crmi-ela-loading, .crmi-ela-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-ela-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px 14px;
}
.crmi-ela-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--crmi-text-muted); }
.crmi-ela-control label { cursor: help; }
.crmi-ela-control-row { display: flex; align-items: center; gap: 8px; }
.crmi-ela-slider { width: 130px; accent-color: var(--crmi-accent); }
.crmi-ela-value { color: var(--crmi-text-light); min-width: 2.6em; text-align: right; font-size: 0.85rem; }
.crmi-ela-select {
    background: var(--crmi-bg-dark); color: var(--crmi-text-light);
    border: 1px solid var(--crmi-accent); border-radius: 5px; padding: 5px 8px; font-size: 0.85rem;
}
.crmi-ela-reset-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer;
    margin-left: auto; align-self: center;
}
.crmi-ela-reset-btn:hover { background: rgba(155, 79, 209, 0.25); }

.crmi-ela-status { font-size: 0.85rem; color: var(--crmi-text-muted); padding: 2px 2px; min-height: 1.2em; }
.crmi-ela-status-busy { color: var(--crmi-accent-hover); }
.crmi-ela-status-error { color: var(--crmi-error); }

.crmi-ela-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Flexbox-centered, same reasoning as the Image Adjustment / Clone
       Detection viewports above — see the v1.1.2 changelog. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-ela-stage { position: relative; }
.crmi-ela-stage canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-width: none !important;
    max-height: none !important;
}

/* -------------------------------------------------------------------- */
/* Analyze Noise tab                                                     */
/* -------------------------------------------------------------------- */
.crmi-noise { display: flex; flex-direction: column; gap: 12px; }
.crmi-noise-loading, .crmi-noise-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-noise-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px 14px;
}
.crmi-noise-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--crmi-text-muted); }
.crmi-noise-control label { cursor: help; }
.crmi-noise-control-row { display: flex; align-items: center; gap: 8px; }
.crmi-noise-slider { width: 130px; accent-color: var(--crmi-accent); }
.crmi-noise-value { color: var(--crmi-text-light); min-width: 2.6em; text-align: right; font-size: 0.85rem; }
.crmi-noise-select {
    background: var(--crmi-bg-dark); color: var(--crmi-text-light);
    border: 1px solid var(--crmi-accent); border-radius: 5px; padding: 5px 8px; font-size: 0.85rem;
}
.crmi-noise-reset-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer;
    margin-left: auto; align-self: center;
}
.crmi-noise-reset-btn:hover { background: rgba(155, 79, 209, 0.25); }

.crmi-noise-status { font-size: 0.85rem; color: var(--crmi-text-muted); padding: 2px 2px; min-height: 1.2em; }
.crmi-noise-status-busy { color: var(--crmi-accent-hover); }
.crmi-noise-status-error { color: var(--crmi-error); }

.crmi-noise-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Flexbox-centered, same reasoning as the other canvas-based viewports
       above — see the v1.1.2 changelog. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-noise-stage { position: relative; }
.crmi-noise-stage canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-width: none !important;
    max-height: none !important;
}

/* -------------------------------------------------------------------- */
/* Sweep Levels tab                                                      */
/* -------------------------------------------------------------------- */
.crmi-sweep { display: flex; flex-direction: column; gap: 12px; }
.crmi-sweep-loading, .crmi-sweep-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-sweep-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px 14px;
}
.crmi-sweep-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--crmi-text-muted); }
.crmi-sweep-control label { cursor: help; }
.crmi-sweep-control-row { display: flex; align-items: center; gap: 8px; }
.crmi-sweep-slider { width: 130px; accent-color: var(--crmi-accent); }
.crmi-sweep-value { color: var(--crmi-text-light); min-width: 2.6em; text-align: right; font-size: 0.85rem; }
.crmi-sweep-reset-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer;
    margin-left: auto; align-self: center;
}
.crmi-sweep-reset-btn:hover { background: rgba(155, 79, 209, 0.25); }

.crmi-sweep-status { font-size: 0.85rem; color: var(--crmi-text-muted); padding: 2px 2px; min-height: 1.2em; }

.crmi-sweep-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Flexbox-centered, same reasoning as the other canvas-based viewports
       above — see the v1.1.2 changelog. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-sweep-stage { position: relative; }
.crmi-sweep-stage canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-width: none !important;
    max-height: none !important;
}

/* -------------------------------------------------------------------- */
/* Luminance Grade tab                                                   */
/* -------------------------------------------------------------------- */
.crmi-luma { display: flex; flex-direction: column; gap: 12px; }
.crmi-luma-loading, .crmi-luma-unsupported {
    color: var(--crmi-text-muted); font-style: italic; padding: 24px; text-align: center;
    background: var(--crmi-bg-panel); border-radius: 8px;
}

.crmi-luma-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    background: var(--crmi-bg-panel); border-radius: 8px; padding: 12px 14px;
}
.crmi-luma-control { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--crmi-text-muted); }
.crmi-luma-control label { cursor: help; }
.crmi-luma-control-row { display: flex; align-items: center; gap: 8px; }
.crmi-luma-slider { width: 130px; accent-color: var(--crmi-accent); }
.crmi-luma-value { color: var(--crmi-text-light); min-width: 2.6em; text-align: right; font-size: 0.85rem; }
.crmi-luma-toggle {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 14px; font-size: 0.85rem; cursor: pointer; align-self: center;
}
.crmi-luma-toggle:hover { background: rgba(155, 79, 209, 0.25); }
.crmi-luma-toggle.crmi-luma-toggle-active { background: var(--crmi-accent); color: #fff; }
.crmi-luma-reset-btn {
    background: transparent; border: 1px solid var(--crmi-accent); color: var(--crmi-text-light);
    border-radius: 5px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer;
    margin-left: auto; align-self: center;
}
.crmi-luma-reset-btn:hover { background: rgba(155, 79, 209, 0.25); }

.crmi-luma-status { font-size: 0.85rem; color: var(--crmi-text-muted); padding: 2px 2px; min-height: 1.2em; }

.crmi-luma-viewport {
    position: relative;
    width: 100%; height: 460px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #1a0b26;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    /* Flexbox-centered, same reasoning as the other canvas-based viewports
       above — see the v1.1.2 changelog. */
    display: flex; align-items: center; justify-content: center;
}
.crmi-luma-stage { position: relative; }
.crmi-luma-stage canvas {
    display: block;
    image-rendering: pixelated;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    max-width: none !important;
    max-height: none !important;
}

@media (max-width: 600px) {
    .crmi-field-row { flex-direction: column; gap: 2px; }
    .crmi-field-value { text-align: left; }
    .crmi-imgadj-viewport { height: 320px; }
    .crmi-imgadj-contrast-slider { width: 90px; }
    .crmi-clone-viewport { height: 320px; }
    .crmi-clone-slider { width: 90px; }
    .crmi-clone-run-group { margin-left: 0; }
    .crmi-ela-viewport { height: 320px; }
    .crmi-ela-slider { width: 90px; }
    .crmi-ela-reset-btn { margin-left: 0; }
    .crmi-noise-viewport { height: 320px; }
    .crmi-noise-slider { width: 90px; }
    .crmi-noise-reset-btn { margin-left: 0; }
    .crmi-sweep-viewport { height: 320px; }
    .crmi-sweep-slider { width: 90px; }
    .crmi-sweep-reset-btn { margin-left: 0; }
    .crmi-luma-viewport { height: 320px; }
    .crmi-luma-slider { width: 90px; }
    .crmi-luma-reset-btn { margin-left: 0; }
    .crmi-geo-photo, .crmi-geo-map { min-height: 200px; flex-basis: 100%; }
}