.imageprocjs-shell {
    gap: 1.25rem;
}

.imageprocjs-intro {
    margin-bottom: 0.25rem;
    max-width: 52rem;
}

/* ── Three-column app layout ── */
.project-app-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1.5fr) 280px;
    gap: 1.25rem;
    align-items: start;
}

.imageprocjs-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--surface-strong) 40%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-glow) 10%, transparent);
    backdrop-filter: blur(10px);
    min-width: 0;
}

.imageprocjs-panel__header {
    display: grid;
    gap: 0.2rem;
}

.imageprocjs-panel__header--inline {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
}

.imageprocjs-panel__eyebrow {
    margin: 0;
    color: color-mix(in srgb, var(--soft) 52%, var(--accent-secondary));
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    font-weight: 600;
}

.imageprocjs-panel__title {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.02;
    text-shadow: 0 0 12px rgba(78, 246, 255, 0.08);
}

/* Left sidebar: control panel */
.project-sidebar {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.85rem;
}

.project-sidebar::-webkit-scrollbar {
    width: 4px;
}

.project-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.project-sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

.project-canvas-column,
.project-curve-column {
    min-width: 0;
}

.project-sidebar,
.project-canvas-column,
.project-curve-column {
    align-self: start;
}

.imageprocjs-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

/* ── Compact buttons for imageprocjs ── */
/* Override large .project-button (min-height: 2.75rem) inside the app */
.project-app-layout .project-button,
.project-controls-grid .project-button {
    min-height: 2.1rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.79rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
}

.project-app-layout .project-button--secondary,
.project-controls-grid .project-button--secondary {
    box-shadow: none;
}

.project-app-layout .project-button:hover,
.project-controls-grid .project-button:hover,
.project-app-layout .project-button--secondary:hover,
.project-controls-grid .project-button--secondary:hover {
    box-shadow: none;
}

/* Sidebar compact buttons too */
.project-sidebar .project-button,
.project-sidebar .project-button--secondary {
    min-height: 2.1rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.79rem;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
}

.project-sidebar .project-button:hover,
.project-sidebar .project-button--secondary:hover {
    box-shadow: none;
}

/* Mode picker toggle buttons */
.mode-picker {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.35rem;
    margin: 0 auto;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: calc(var(--button-radius-tight) + 0.15rem);
    max-width: 100%;
    transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.mode-picker:hover {
    border-color: rgba(78, 246, 255, 0.28);
}

.mode-option {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--muted);
    padding: 0.3rem 0.55rem;
    border-radius: calc(var(--button-radius-tight) + 0.1rem);
    transition: color 150ms ease, background-color 150ms ease;
}

.mode-option:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mode-option input[type="radio"] {
    margin: 0;
    accent-color: var(--accent-secondary);
    width: 0.85rem;
    height: 0.85rem;
}

/* ── Controls panel ── */
.controls-panel {
    padding: 0.9rem 0.95rem;
    background: color-mix(in srgb, var(--surface) 42%, transparent);
    border: 1px solid var(--border);
    border-radius: calc(var(--button-radius-tight) + 0.15rem);
    max-width: 100%;
    overflow-x: auto;
    transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.controls-panel:hover {
    border-color: rgba(78, 246, 255, 0.28);
}

.control-group {
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}

.control-group:last-child {
    border-bottom: none;
}

.control-group--range {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.control-group--range input[type="range"] {
    flex: 1;
    min-width: 100px;
    accent-color: var(--accent-secondary);
}

.control-group--range span {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 1.75rem;
    text-align: right;
    color: var(--accent-secondary);
    font-size: 0.8rem;
}

.control-group--range label {
    min-width: 5rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.control-group__label {
    width: 100%;
    font-weight: 600;
    font-size: 0.73rem;
    color: var(--soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.25rem;
}

.control-group--compact .control-group__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    width: 100%;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: calc(var(--button-radius-tight) + 0.1rem);
    transition: background-color 150ms ease;
}

.checkbox-label:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.checkbox-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent-secondary);
    width: 0.85rem;
    height: 0.85rem;
}

.project-app-layout .project-select,
.project-app-layout .project-input {
    min-height: 2.3rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--button-radius-tight) + 0.1rem);
    background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.2;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-glow) 8%, transparent);
}

.project-app-layout .project-select:focus,
.project-app-layout .project-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-secondary) 52%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-glow) 35%, transparent);
}

.project-app-layout .project-select {
    appearance: none;
    padding-right: 2.1rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1rem) calc(50% - 0.14rem),
        calc(100% - 0.72rem) calc(50% - 0.14rem);
    background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
    background-repeat: no-repeat;
}

.project-app-layout .project-input::placeholder {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.control-group--range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 0.4rem;
    border-radius: 999px;
    border: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-secondary) 52%, var(--accent)) 0%, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface-strong)) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-glow) 14%, transparent);
}

.control-group--range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent-secondary) 45%, var(--border));
    background: color-mix(in srgb, var(--surface-strong) 88%, white 12%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-glow) 12%, transparent);
    cursor: pointer;
}

.control-group--range input[type="range"]::-moz-range-track {
    height: 0.4rem;
    border-radius: 999px;
    border: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--accent-secondary) 52%, var(--accent)) 0%, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface-strong)) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-glow) 14%, transparent);
}

.control-group--range input[type="range"]::-moz-range-thumb {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent-secondary) 45%, var(--border));
    background: color-mix(in srgb, var(--surface-strong) 88%, white 12%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-glow) 12%, transparent);
    cursor: pointer;
}

/* ── Middle canvas column ── */
.project-canvas-column {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    position: sticky;
    top: 6rem;
}

#div_canvas {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageprocjs-canvas-frame {
    padding: 0.9rem;
}

#div_canvas canvas {
    width: 100%;
    height: auto;
    max-height: 78vh;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md) - 0.2rem);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    image-rendering: auto;
    box-shadow: none;
}

/* ── Right curve column ── */
.project-curve-column {
    position: sticky;
    top: 6rem;
}

#div_curvetool {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

#div_curveplot {
    position: relative;
    width: min(100%, 255px);
    aspect-ratio: 1 / 1;
    min-height: 255px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-md) - 0.2rem);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    box-shadow: none;
    overflow: hidden;
}

#div_curvetool svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

#div_curveplot #histogram,
#div_curveplot #curvetool {
    position: absolute;
    inset: 0;
}

#div_curveplot #histogram {
    z-index: 1;
}

#div_curveplot #curvetool {
    z-index: 2;
    background: transparent;
    box-shadow: none;
}

#div_curvetool #rect {
    fill: transparent;
}

#div_curvetool .line {
    fill: none;
    stroke: var(--accent-secondary);
    stroke-width: 2;
}

#div_curvetool circle {
    fill: var(--accent);
    stroke: var(--surface-strong);
    stroke-width: 1.5;
}

#div_curvetool circle.selected {
    fill: var(--accent-secondary);
}

#div_curvetool circle.locked {
    fill: var(--soft);
}

#histogram .area {
    fill: color-mix(in srgb, var(--accent) 30%, transparent);
}

.curve-tool-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border: 1px solid var(--border);
    border-radius: calc(var(--button-radius-tight) + 0.15rem);
    width: 100%;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.curve-tool-header:hover {
    border-color: rgba(78, 246, 255, 0.28);
}

#imageinfo {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .project-app-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .project-sidebar {
        max-height: 60vh;
    }

    .project-curve-column {
        grid-column: 1 / -1;
        position: static;
    }

    .project-curve-column {
        align-items: start;
    }
}

@media (max-width: 767px) {
    .project-app-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
     }

     .project-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
      }

      .mode-picker {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
        max-width: none;
      }

      .mode-option {
        justify-content: center;
        width: 100%;
      }

      .controls-panel {
        padding: 0.6rem;
        margin: 0;
      }

      .control-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
      }

      .control-group--range {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
      }

      .control-group--range input[type="range"] {
        width: 100%;
      }

      .control-group--compact .control-group__row {
        flex-direction: column;
      }

      #div_canvas {
        min-width: 0;
      }

      #div_canvas canvas {
        max-height: 40vh;
      }

      .project-curve-column {
        position: static;
      }

      #div_curvetool {
        width: 100%;
        max-width: 360px;
        min-width: 0;
      }

      #div_curveplot {
        width: min(100%, 255px);
      }

      .imageprocjs-panel__header--inline {
        grid-template-columns: 1fr;
      }

      #imageinfo {
        text-align: left;
        white-space: normal;
      }
}

/* ── Theme overrides ── */

/* Minimalist */
[data-theme="minimalist"] .mode-picker {
    background: rgba(255, 252, 248, 0.8);
    border-color: rgba(58, 52, 46, 0.12);
    border-radius: 6px;
}

[data-theme="minimalist"] .mode-picker:hover {
    border-color: rgba(106, 124, 140, 0.3);
}

[data-theme="minimalist"] .controls-panel {
    background: rgba(255, 252, 248, 0.7);
    border-color: rgba(58, 52, 46, 0.12);
    border-radius: 6px;
}

[data-theme="minimalist"] .imageprocjs-panel {
    background: rgba(255, 252, 248, 0.6);
    border-color: rgba(58, 52, 46, 0.12);
    box-shadow: none;
}

[data-theme="minimalist"] #div_canvas canvas,
[data-theme="minimalist"] #div_curveplot {
    border-color: rgba(58, 52, 46, 0.15);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

[data-theme="minimalist"] .curve-tool-header {
    background: rgba(255, 252, 248, 0.8);
    border-color: rgba(58, 52, 46, 0.12);
    border-radius: 6px;
}

[data-theme="minimalist"] #div_curveplot #curvetool {
    border-radius: 6px;
}

[data-theme="minimalist"] .project-button,
[data-theme="minimalist"] .project-button--secondary,
[data-theme="minimalist"] .project-select,
[data-theme="minimalist"] .project-input {
    border-radius: 4px;
}

/* Win31 */
[data-theme="win31"] .mode-picker {
    background: #c0c0c0;
    border-color: #808080;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

[data-theme="win31"] .controls-panel {
    background: #c0c0c0;
    border-color: #808080;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

[data-theme="win31"] .imageprocjs-panel {
    background: #c0c0c0;
    border-color: #808080;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
    backdrop-filter: none;
}

[data-theme="win31"] #div_canvas canvas,
[data-theme="win31"] #div_curveplot {
    border: 2px solid;
    border-color: #000 #808080 #808080 #000;
    background: #fff;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

[data-theme="win31"] .curve-tool-header {
    background: #c0c0c0;
    border-color: #808080;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000;
}

/* Matrix */
[data-theme="matrix"] .mode-picker {
    background: rgba(7, 18, 8, 0.85);
    border-color: rgba(57, 255, 20, 0.25);
}

[data-theme="matrix"] .controls-panel {
    background: rgba(7, 18, 8, 0.75);
    border-color: rgba(57, 255, 20, 0.25);
}

[data-theme="matrix"] .imageprocjs-panel {
    background: rgba(7, 18, 8, 0.62);
    border-color: rgba(57, 255, 20, 0.25);
    box-shadow: inset 0 0 0 1px rgba(57, 255, 20, 0.06);
}

[data-theme="matrix"] #div_canvas canvas,
[data-theme="matrix"] #div_curveplot {
    border-color: rgba(57, 255, 20, 0.3);
    background: rgba(7, 18, 8, 0.5);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}

[data-theme="matrix"] .curve-tool-header {
    background: rgba(7, 18, 8, 0.85);
    border-color: rgba(57, 255, 20, 0.25);
}

/* Industrial */
[data-theme="industrial"] .mode-picker {
    background: rgba(245, 247, 249, 0.7);
    border-color: rgba(97, 113, 127, 0.3);
}

[data-theme="industrial"] .controls-panel {
    background: rgba(245, 247, 249, 0.82);
    border-color: rgba(97, 113, 127, 0.34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

[data-theme="industrial"] .imageprocjs-panel {
    background: rgba(245, 247, 249, 0.58);
    border-color: rgba(97, 113, 127, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

[data-theme="industrial"] .control-group {
    border-bottom-color: rgba(97, 113, 127, 0.22);
}

[data-theme="industrial"] #div_canvas canvas,
[data-theme="industrial"] #div_curveplot {
    border-color: rgba(97, 113, 127, 0.35);
    background: #e6ebef;
}

[data-theme="industrial"] .curve-tool-header {
    background: rgba(245, 247, 249, 0.7);
    border-color: rgba(97, 113, 127, 0.3);
}