/**
 * BLRRD Editor v15 — Stylesheet
 * Geistiges Eigentum von Berkan Ustalar
 * © 2025-2026 Berkan Ustalar. Alle Rechte vorbehalten.
 * Kontakt: ustalar@hirschen-group.com
 */

/* ============================================
   BLRRD DESIGN TOKENS — derived from blrrd.ai
   ============================================ */
:root{
    /* Brand */
    --brand-fg:#C4FF2E;
    --brand-fg-dim:#9ACE1F;
    --brand-fg-glow:rgba(196,255,46,0.18);

    /* Base — dark like blrrd.ai */
    --bg-base:#08080C;
    --bg-elevated:#0E0E14;
    --bg-surface:#15151C;
    --bg-hover:rgba(196,255,46,0.06);

    /* Text — paper-white scale */
    --text-primary:#EFEEEC;
    --text-secondary:#A5A4A2;
    --text-muted:#727170;
    --text-dim:#4A4948;

    /* Borders */
    --border:rgba(255,255,255,0.08);
    --border-subtle:rgba(255,255,255,0.05);
    --border-strong:rgba(255,255,255,0.16);

    /* Accent (legacy alias --obi → BLRRD lime) */
    --obi:var(--brand-fg);
    --obi-light:#D8FF5A;
    --obi-glow:var(--brand-fg-glow);

    /* Material */
    --ios-material:rgba(8,8,12,0.78);
    --ios-blur:blur(20px) saturate(180%);

    /* Radius — terminal-sharp */
    --radius-sm:3px;
    --radius-md:6px;
    --radius-lg:10px;

    /* Fonts — full mono like blrrd.ai */
    --font-mono:'JetBrains Mono','IBM Plex Mono','Geist Mono',Menlo,Monaco,Consolas,ui-monospace,monospace;
    --font-sans:var(--font-mono);
    --font-display:var(--font-mono);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-base);color:var(--text-primary);
    font-family:var(--font-sans);font-size:13px;line-height:1.5;
    font-feature-settings:'ss01','cv01','tnum','zero';
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow:hidden}

/* Subtle scanline overlay — terminal nostalgia, easy on the eyes */
body::after{content:'';position:fixed;inset:0;
    background:repeating-linear-gradient(180deg,transparent 0,transparent 2px,rgba(255,255,255,0.014) 3px);
    pointer-events:none;z-index:9999;mix-blend-mode:overlay}

/* Brand mark — tight monospace block */
.brand-mark{display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;color:var(--brand-fg);
    font-family:var(--font-mono);font-weight:900;font-size:14px;
    letter-spacing:0;line-height:1;
    text-shadow:0 0 8px var(--brand-fg-glow)}
.editor-toolbar-title{font-family:var(--font-mono);font-weight:700;
    letter-spacing:0.06em;text-transform:uppercase}

/* Selection */
::selection{background:var(--brand-fg);color:var(--bg-base)}

/* Scrollbars — hairline */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* ============================================
   EDITOR LAYOUT
   ============================================ */
.editor-root{display:flex;height:100vh;width:100vw;overflow:hidden;
    /* iOS dynamic toolbar — match height to actual viewport, not URL bar peek */
    height:100dvh}
.editor-canvas-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-base);position:relative;overflow:hidden;padding-top:48px;
    /* Phase 1.E: own all touch gestures here so the browser doesn't fight
       pinch-zoom or trigger pull-to-refresh on iOS Safari. */
    touch-action:none;
    -webkit-user-select:none;user-select:none}
.editor-canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center}
.editor-canvas-wrap canvas{display:block;border-radius:2px;image-rendering:auto}
#previewCanvas{cursor:crosshair}

/* Toolbar top */
.editor-toolbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;
    padding:0 16px;background:var(--ios-material);backdrop-filter:var(--ios-blur);
    border-bottom:1px solid var(--border-subtle);z-index:100;gap:8px}
.editor-toolbar-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}
.editor-toolbar-title span{color:var(--obi)}
.editor-toolbar-spacer{flex:1}
.editor-tb-btn{padding:6px 12px;background:var(--bg-surface);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;font-weight:700;
    cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.editor-tb-btn:hover{border-color:var(--obi);color:var(--obi)}
.editor-tb-btn.primary{background:var(--obi);color:var(--bg-base);border-color:var(--obi);font-weight:800}
.editor-tb-btn.primary:hover{background:var(--obi-light);color:var(--bg-base)}
.editor-tb-btn.active{border-color:var(--obi);color:var(--obi)}
.editor-tb-sep{width:1px;height:24px;background:var(--border-subtle)}

/* Zoom indicator */
.editor-zoom{font-size:11px;color:var(--text-dim);font-weight:600;min-width:44px;text-align:center}

/* ============================================
   RIGHT SIDEBAR
   ============================================ */
.editor-sidebar{width:300px;min-width:280px;max-width:600px;flex-shrink:0;background:var(--bg-elevated);border-left:1px solid var(--border-subtle);
    display:flex;flex-direction:column;overflow:hidden;padding-top:48px;position:relative}
.sidebar-resize-handle{position:absolute;top:0;left:-3px;width:6px;height:100%;cursor:ew-resize;z-index:101;background:transparent;transition:background 0.15s}
.sidebar-resize-handle:hover,.sidebar-resize-handle.active{background:var(--obi);opacity:0.6}
.sidebar-resize-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:32px;border-radius:1px;background:var(--text-dim);opacity:0;transition:opacity 0.15s}
.sidebar-resize-handle:hover::after{opacity:1}
.editor-sidebar-tabs{display:flex;border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-surface)}
.editor-sidebar-tab{flex:1;padding:10px 0;text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);
    cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s;background:none;border-top:none;border-left:none;border-right:none}
.editor-sidebar-tab.active{color:var(--obi);border-bottom-color:var(--obi)}
.editor-sidebar-tab:hover{color:var(--text-primary)}
.editor-sidebar-content{flex:1;overflow-y:auto;padding:14px}
.editor-sidebar-panel{display:none}
.editor-sidebar-panel.active{display:block}

/* Section */
.ed-section{margin-bottom:18px}
.ed-section-title{font-size:10px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px;
    display:flex;align-items:center;justify-content:space-between}
.ed-section-title button{background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:4px}
.ed-section-title button:hover{color:var(--obi);background:var(--bg-hover)}

/* Slider row */
.ed-slider-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ed-slider-label{font-size:11px;color:var(--text-secondary);min-width:68px;font-weight:600}
.ed-slider-input{flex:1;-webkit-appearance:none;height:20px;background:transparent;cursor:pointer;margin:0}
.ed-slider-input::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,0.08);border-radius:1.5px;border:0.5px solid rgba(255,255,255,0.06)}
.ed-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--text-primary);
    border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,0.3);margin-top:-5.5px;border:2px solid var(--bg-base);transition:transform 0.1s}
.ed-slider-input::-webkit-slider-thumb:hover{transform:scale(1.15)}
.ed-slider-input::-webkit-slider-thumb:active{transform:scale(1.2)}
.ed-val-wrap{display:flex;align-items:center;gap:2px}
.ed-slider-val{font-size:10px;color:var(--text-dim);min-width:26px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ed-spinner{display:flex;flex-direction:column;gap:0px}
.ed-spin-btn{width:14px;height:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);
    border:1px solid var(--border-subtle);color:var(--text-dim);font-size:7px;cursor:pointer;line-height:1;
    transition:all 0.1s;user-select:none;-webkit-user-select:none}
.ed-spin-btn:first-child{border-radius:2px 2px 0 0}
.ed-spin-btn:last-child{border-radius:0 0 2px 2px;border-top:none}
.ed-spin-btn:hover{border-color:var(--obi);color:var(--obi);background:var(--bg-hover)}
.ed-spin-btn:active{background:var(--obi-glow)}

/* ============================================
   CURVES EDITOR
   ============================================ */
.curves-wrap{position:relative;width:100%;padding-bottom:100%;background:#0a0a0a;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.curves-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}
.curves-tabs{display:flex;gap:4px;margin-bottom:8px}
.curves-tab{padding:4px 10px;border-radius:var(--radius-sm);font-size:10px;font-weight:700;cursor:pointer;
    border:1px solid var(--border);background:var(--bg-surface);color:var(--text-muted);transition:all 0.1s}
.curves-tab.active{border-color:var(--text-primary);color:var(--text-primary)}
.curves-tab[data-ch="r"].active{border-color:#ef4444;color:#ef4444}
.curves-tab[data-ch="g"].active{border-color:#22c55e;color:#22c55e}
.curves-tab[data-ch="b"].active{border-color:#3b82f6;color:#3b82f6}

/* ============================================
   COLOR GRADING (Grade Panel)
   ============================================ */
.grade-top-bar{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle)}
.grade-param-row{display:flex;gap:6px;margin-bottom:6px}
.grade-param{flex:1;display:flex;flex-direction:column;gap:2px}
.grade-param.wide{flex:1}
.grade-param label{font-size:8px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px}
.grade-input{width:100%;padding:3px 4px;background:var(--bg-base);border:1px solid var(--border);border-radius:3px;color:var(--text-primary);
    font-size:10px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;outline:none}
.grade-input:focus{border-color:var(--obi)}
.grade-mini-bar{height:3px;border-radius:1.5px;margin-top:1px}
.grade-mini-bar.temp{background:linear-gradient(90deg,#4a9eff,#ff6b35)}
.grade-mini-bar.tint{background:linear-gradient(90deg,#22c55e,#d946ef)}
.grade-mini-bar.contrast{background:linear-gradient(90deg,#555,#fff)}
.grade-mini-bar.neutral{background:linear-gradient(90deg,#333,#aaa)}
.grade-mini-bar.rainbow{background:linear-gradient(90deg,#ef4444,#eab308,#22c55e,#3b82f6,#8b5cf6,#ef4444)}

/* Wheels Row */
.grade-wheels-row{display:flex;gap:4px;margin-bottom:10px}
.grade-wheel-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.grade-wheel-wrap.offset{width:140px;margin:0 auto}
.grade-wheel-header{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--text-secondary);width:100%;justify-content:center}
.grade-wheel-icon{font-size:10px;color:var(--text-dim)}
.grade-reset{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:1px 4px;border-radius:3px;transition:all 0.1s}
.grade-reset:hover{color:var(--obi);background:var(--bg-hover)}
.grade-reset-all{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);font-size:10px;font-weight:700;
    padding:4px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s}
.grade-reset-all:hover{border-color:var(--obi);color:var(--obi)}

/* Wheel Canvas Container */
.grade-wheel-container{position:relative;width:100%;aspect-ratio:1;max-width:170px;border-radius:50%;box-shadow:0 0 12px rgba(255,126,33,0.06),inset 0 0 0 1px rgba(255,255,255,0.04)}
.grade-wheel-canvas{width:100%;height:100%;cursor:crosshair;border-radius:50%}
.grade-wheel-container:hover{box-shadow:0 0 18px rgba(255,126,33,0.12),inset 0 0 0 1px rgba(255,255,255,0.08)}

/* RGBY Values */
.grade-rgby{display:flex;gap:2px;width:100%}
.grade-val{width:100%;padding:2px 1px;background:var(--bg-base);border:1px solid var(--border);border-radius:2px;color:var(--text-primary);
    font-size:9px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;outline:none}
.grade-val:focus{border-color:var(--obi)}
.grade-val.r{border-bottom:2px solid #ef4444}
.grade-val.g{border-bottom:2px solid #22c55e}
.grade-val.b{border-bottom:2px solid #3b82f6}
.grade-val.y{border-bottom:2px solid #eab308}

/* Master luminance slider */
.grade-master{width:100%;height:14px;-webkit-appearance:none;background:transparent;cursor:pointer;margin-top:2px}
.grade-master::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,#111,#888);border-radius:3px;border:1px solid rgba(255,255,255,0.08)}
.grade-master::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;background:var(--text-primary);border-radius:2px;margin-top:-4px;
    box-shadow:0 1px 3px rgba(0,0,0,0.4);border:1px solid rgba(0,0,0,0.3)}

/* Bottom bar */
.grade-bottom-bar{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.grade-offset-section{margin-bottom:6px}
.grade-offset-row{display:flex;justify-content:center}

/* ============================================
   HISTOGRAM
   ============================================ */
.scope-box{width:100%;height:100px;background:#0a0a0a;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-sm);overflow:hidden;position:relative}
.scope-box canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.scope-box.square{aspect-ratio:1;height:auto;max-height:260px}
.scope-box.hidden{display:none}
/* Scope brightness slider */
.scope-bright-row{display:flex;align-items:center;gap:6px;margin-top:6px;margin-bottom:4px}
.scope-bright-row label{font-size:9px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap}
.scope-bright-row input[type="range"]{flex:1;height:14px;-webkit-appearance:none;background:transparent;cursor:pointer}
.scope-bright-row input[type="range"]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,0.1);border-radius:1px}
.scope-bright-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--obi);border-radius:50%;margin-top:-4px}
.scope-bright-row .scope-bright-val{font-size:9px;color:var(--text-dim);font-weight:700;min-width:20px;text-align:right}
/* Scope toggle buttons */
.scope-toggles{display:flex;gap:4px;margin-top:6px;margin-bottom:6px}
.scope-toggle{padding:3px 8px;border-radius:var(--radius-sm);font-size:9px;font-weight:700;cursor:pointer;
    border:1px solid var(--border);background:var(--bg-surface);color:var(--text-dim);transition:all 0.1s;text-transform:uppercase}
.scope-toggle.active{border-color:var(--obi);color:var(--obi);background:var(--obi-glow)}
.scope-toggle:hover{color:var(--text-primary)}

/* ============================================
   LAYER PANEL
   ============================================ */
.layer-list{display:flex;flex-direction:column;gap:4px}
.layer-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-surface);
    border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.1s}
.layer-item.active{border-color:var(--obi);background:var(--bg-panel)}
.layer-item:hover{border-color:var(--border);cursor:pointer}
.layer-item:hover .layer-type::after{content:' ⇗';font-size:8px;opacity:0.6}
.layer-vis{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;opacity:0.6}
.layer-vis:hover{opacity:1}
.layer-vis.hidden{opacity:0.2}
.layer-name{flex:1;font-size:11px;font-weight:600;color:var(--text-primary)}
.layer-type{font-size:9px;color:var(--text-dim);font-weight:700;text-transform:uppercase;padding:2px 6px;background:var(--bg-base);border-radius:3px}
.layer-del{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:2px 4px;border-radius:3px}
.layer-del:hover{color:var(--error);background:var(--bg-hover)}
.layer-add{width:100%;padding:8px;background:none;border:1px dashed var(--border);border-radius:var(--radius-sm);
    color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all 0.1s;margin-top:8px}
.layer-add:hover{border-color:var(--obi);color:var(--obi)}
.layer-picker{position:absolute;bottom:60px;left:14px;right:14px;background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:6px;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:20;display:none}
.layer-picker.show{display:block}
.layer-picker-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);
    cursor:pointer;transition:all 0.1s;font-size:12px;color:var(--text-secondary);font-weight:600}
.layer-picker-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.layer-picker-item span{font-size:16px}

/* ============================================
   EMPTY STATE
   ============================================ */
.editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--text-muted);text-align:center;font-family:var(--font-mono)}
.editor-empty-prompt{font-size:13px;color:var(--text-secondary);letter-spacing:0.06em;display:flex;align-items:center;gap:8px}
.editor-empty-cursor{color:var(--brand-fg);font-weight:900;animation:blrrd-blink 1.05s steps(1) infinite;text-shadow:0 0 8px var(--brand-fg-glow)}

/* WB eyedropper + Clipping toggles */
.ed-section-tools{display:inline-flex;gap:6px;align-items:center}
.ed-icon-btn{background:transparent;border:1px solid var(--border-subtle);
    color:var(--text-dim);padding:1px 6px;border-radius:var(--radius-sm);
    font-family:var(--font-mono);font-size:11px;cursor:pointer;line-height:1.2;
    transition:all 0.12s}
.ed-icon-btn:hover{border-color:var(--brand-fg);color:var(--brand-fg)}
.ed-icon-btn.active{background:var(--brand-fg);color:var(--bg-base);border-color:var(--brand-fg);
    box-shadow:0 0 12px var(--brand-fg-glow)}
.clip-toggle{background:transparent;border:1px solid var(--border-subtle);
    color:var(--text-dim);padding:1px 6px;border-radius:var(--radius-sm);
    font-family:var(--font-mono);font-size:10px;cursor:pointer;line-height:1.2;
    transition:all 0.12s;letter-spacing:0.05em}
.clip-toggle:hover{border-color:var(--text-secondary);color:var(--text-secondary)}
.clip-toggle.clip-hi.active{background:#FF3030;color:#fff;border-color:#FF3030}
.clip-toggle.clip-lo.active{background:#3060FF;color:#fff;border-color:#3060FF}

/* Clipping overlay canvas — sits on top of preview */
.clipping-overlay{position:absolute;inset:0;pointer-events:none;mix-blend-mode:normal}
.ed-section-hint{font-size:9px;color:var(--text-dim);font-weight:400;letter-spacing:0;
    text-transform:none;margin-left:4px;opacity:0.7}

/* SNAPSHOTS — versioned state capture chips in toolbar */
.snapshot-strip{display:inline-flex;gap:4px;align-items:center;max-width:340px;
    overflow-x:auto;scrollbar-width:none}
.snapshot-strip::-webkit-scrollbar{display:none}
.snapshot-chip{display:inline-flex;align-items:center;justify-content:center;
    gap:5px;padding:5px 10px;min-width:42px;
    background:transparent;border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);color:var(--text-secondary);
    font-family:var(--font-mono);font-size:10px;font-weight:600;cursor:pointer;
    white-space:nowrap;letter-spacing:0.04em;transition:all 0.12s;
    position:relative}
.snapshot-chip:hover{border-color:var(--brand-fg);color:var(--brand-fg)}
.snapshot-chip.active{background:var(--brand-fg);color:var(--bg-base);
    border-color:var(--brand-fg);box-shadow:0 0 8px var(--brand-fg-glow)}
.snapshot-chip-del{display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:none;color:inherit;
    width:14px;height:14px;cursor:pointer;font-size:9px;opacity:0;
    transition:opacity 0.12s}
.snapshot-chip:hover .snapshot-chip-del{opacity:0.5}
.snapshot-chip-del:hover{opacity:1 !important;color:#FF6060}

/* CROP TOOL */
.crop-toolbar{display:inline-flex;align-items:center;gap:6px;margin-left:4px;margin-right:4px}
.editor-tb-select{padding:5px 8px;background:var(--bg-surface);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11px;
    font-family:var(--font-mono);font-weight:600;cursor:pointer;outline:none}
.editor-tb-select:focus{border-color:var(--brand-fg)}
.crop-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}
.crop-overlay[data-active]{pointer-events:auto}
.crop-rect{position:absolute;
    box-shadow:0 0 0 9999px rgba(8,8,12,0.62);
    border:1px dashed var(--brand-fg);
    cursor:move}
.crop-handle{position:absolute;width:14px;height:14px;
    background:var(--brand-fg);border:1.5px solid var(--bg-base);
    box-shadow:0 0 6px var(--brand-fg-glow);pointer-events:auto;z-index:11}
.crop-handle[data-h="nw"]{top:-7px;left:-7px;cursor:nwse-resize}
.crop-handle[data-h="n"] {top:-7px;left:50%;margin-left:-7px;cursor:ns-resize}
.crop-handle[data-h="ne"]{top:-7px;right:-7px;cursor:nesw-resize}
.crop-handle[data-h="e"] {top:50%;right:-7px;margin-top:-7px;cursor:ew-resize}
.crop-handle[data-h="se"]{bottom:-7px;right:-7px;cursor:nwse-resize}
.crop-handle[data-h="s"] {bottom:-7px;left:50%;margin-left:-7px;cursor:ns-resize}
.crop-handle[data-h="sw"]{bottom:-7px;left:-7px;cursor:nesw-resize}
.crop-handle[data-h="w"] {top:50%;left:-7px;margin-top:-7px;cursor:ew-resize}
.crop-grid{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s;
    background-image:
        linear-gradient(to right,transparent 33.3%,rgba(196,255,46,.32) 33.3%,rgba(196,255,46,.32) 33.45%,transparent 33.45%,transparent 66.55%,rgba(196,255,46,.32) 66.55%,rgba(196,255,46,.32) 66.7%,transparent 66.7%),
        linear-gradient(to bottom,transparent 33.3%,rgba(196,255,46,.32) 33.3%,rgba(196,255,46,.32) 33.45%,transparent 33.45%,transparent 66.55%,rgba(196,255,46,.32) 66.55%,rgba(196,255,46,.32) 66.7%,transparent 66.7%)}
.crop-rect[data-dragging] .crop-grid,
.crop-overlay:hover .crop-grid{opacity:1}
.crop-badge{display:inline-flex;align-items:center;padding:2px 7px;font-family:var(--font-mono);
    font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    color:#FF6060;background:rgba(255,96,96,0.14);border:1px solid rgba(255,96,96,0.4);
    border-radius:var(--radius-sm);cursor:help;white-space:nowrap}
.crop-cancel{color:var(--text-secondary)}
.crop-apply{background:var(--brand-fg);color:var(--bg-base);border-color:var(--brand-fg)}
.crop-apply:hover{background:var(--obi-light)}

/* CHEATSHEET POPOVER — modifier discoverability */
.cheatsheet{position:fixed;top:54px;right:12px;z-index:200;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 0 1px var(--brand-fg-glow);
    width:300px;animation:cheatsheet-in 0.18s ease-out;
    font-family:var(--font-mono)}
.cheatsheet[hidden]{display:none}
@keyframes cheatsheet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cheatsheet-inner{padding:14px 16px}
.cheatsheet-head{display:flex;justify-content:space-between;align-items:center;
    margin-bottom:10px;font-size:11px;font-weight:700;color:var(--brand-fg);
    letter-spacing:0.08em;text-transform:uppercase}
.cheatsheet-close{background:transparent;border:none;color:var(--text-dim);
    font-size:14px;cursor:pointer;padding:0 4px;line-height:1}
.cheatsheet-close:hover{color:var(--brand-fg)}
.cheatsheet-section{margin-bottom:12px}
.cheatsheet-section:last-child{margin-bottom:0}
.cheatsheet-h{font-size:9px;color:var(--text-dim);text-transform:uppercase;
    letter-spacing:0.1em;margin-bottom:6px;padding-bottom:4px;
    border-bottom:1px solid var(--border-subtle)}
.cheatsheet-row{display:flex;justify-content:space-between;align-items:baseline;
    gap:10px;padding:3px 0;font-size:11px;color:var(--text-secondary);line-height:1.4}
.cheatsheet-row kbd{display:inline-flex;align-items:center;padding:2px 6px;
    background:var(--bg-base);border:1px solid var(--border);border-radius:3px;
    font-family:var(--font-mono);font-size:10px;color:var(--brand-fg);
    min-width:22px;justify-content:center;font-weight:700}
.cheatsheet-row span{color:var(--text-secondary);text-align:right}

/* Export modal — EXIF + LUT extras */
.exp-meta{flex-direction:column;align-items:flex-start !important}
.exp-meta-toggles{display:flex;gap:14px;margin-top:6px}
.exp-check{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono)}
.exp-check input{margin:0;accent-color:var(--brand-fg)}
.exp-lut{background:transparent;border:1px solid var(--brand-fg) !important;color:var(--brand-fg)}
.exp-lut:hover{background:var(--brand-fg);color:var(--bg-base);box-shadow:0 0 14px var(--brand-fg-glow)}

/* Numeric direct entry — input that replaces .ed-slider-val on dblclick */
.ed-val-edit{background:var(--bg-base);border:1px solid var(--brand-fg);
    color:var(--brand-fg);font-family:var(--font-mono);font-size:10px;
    padding:1px 4px;border-radius:2px;text-align:right;outline:none;
    box-shadow:0 0 8px var(--brand-fg-glow)}
@keyframes blrrd-blink{50%{opacity:0.15}}
.editor-empty-title{font-size:38px;font-weight:700;color:var(--text-primary);letter-spacing:0.02em;text-transform:lowercase;line-height:1}
.editor-empty-title::after{content:'';display:inline-block;width:0.5em;height:0.85em;margin-left:0.15em;background:var(--brand-fg);vertical-align:-0.1em;animation:blrrd-blink 1.05s steps(1) infinite;box-shadow:0 0 12px var(--brand-fg-glow)}
.editor-empty-hint{font-size:11px;max-width:340px;line-height:1.6;color:var(--text-muted);letter-spacing:0.02em}
.editor-empty input[type="file"]{display:none}
.editor-empty-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}

/* Phase 2.B.1 AI metadata panel — chips, sections, grid. */
.ai-meta-body{display:flex;flex-direction:column;gap:10px;font-family:var(--font-mono);font-size:11px}
.ai-meta-head{display:flex;flex-wrap:wrap;gap:6px}
.ai-meta-chip{padding:3px 8px;border:1px solid var(--obi);color:var(--obi);border-radius:var(--radius-sm);font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.ai-meta-chip-preserve{border-color:var(--text-secondary);color:var(--text-secondary)}
.ai-meta-section{display:flex;flex-direction:column;gap:4px}
.ai-meta-section-label{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em}
.ai-meta-section-body{padding:6px 8px;background:var(--bg-surface,#101015);border:1px solid var(--border-subtle,#22222a);border-radius:var(--radius-sm);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;line-height:1.4;max-height:240px;overflow:auto}
.ai-meta-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline}
.ai-meta-cell{display:contents}
.ai-meta-key{color:var(--text-secondary);font-size:10px;text-transform:uppercase;letter-spacing:0.04em}
.ai-meta-val{color:var(--text-primary);word-break:break-word}
.ai-meta-other{margin-top:4px}
.ai-meta-other summary{cursor:pointer;color:var(--text-secondary);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;padding:4px 0}
.ai-meta-other summary:hover{color:var(--obi)}
.ai-meta-correct{margin-top:8px;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--bg-surface,#101015);border:1px solid var(--obi);border-radius:var(--radius-sm)}
.ai-meta-correct-desc{font-size:10px;color:var(--text-secondary);line-height:1.4}
.ai-meta-correct-btn{padding:6px 12px;background:var(--obi);color:var(--bg-base);border:none;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:0.04em;text-transform:lowercase;cursor:pointer;transition:all 0.15s}
.ai-meta-correct-btn:hover{background:var(--obi-light);box-shadow:0 0 12px var(--obi-glow)}
.ai-meta-tell{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ai-meta-tell-row{display:grid;grid-template-columns:80px 1fr 36px;gap:8px;align-items:center;font-size:10px}
.ai-meta-tell-tag{color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em}
.ai-meta-tell-bar{height:6px;background:var(--bg-surface,#101015);border:1px solid var(--border-subtle,#22222a);border-radius:3px;overflow:hidden}
.ai-meta-tell-fill{height:100%;background:#3a8a3a;transition:width 0.18s ease}
.ai-meta-tell-mild .ai-meta-tell-fill,.ai-meta-tell-fill.ai-meta-tell-mild{background:#c4a02a}
.ai-meta-tell-strong .ai-meta-tell-fill,.ai-meta-tell-fill.ai-meta-tell-strong{background:#a83a3a}
.ai-meta-tell-num{font-family:var(--font-mono);color:var(--text-primary);text-align:right}
.editor-empty label{padding:11px 22px;background:transparent;color:var(--brand-fg);border:1px solid var(--brand-fg);border-radius:var(--radius-sm);
    font-size:12px;font-weight:700;font-family:var(--font-mono);letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;text-transform:lowercase}
.editor-empty label:hover{background:var(--brand-fg);color:var(--bg-base);box-shadow:0 0 24px var(--brand-fg-glow)}
.editor-empty label:active{transform:translateY(1px)}

/* ============================================
   COLOR PICKER / INFO BAR
   ============================================ */
.editor-infobar{position:fixed;bottom:0;left:0;right:var(--sidebar-width,300px);height:28px;display:flex;align-items:center;
    padding:0 16px;gap:16px;background:var(--bg-surface);border-top:1px solid var(--border-subtle);
    font-size:10px;font-weight:600;color:var(--text-dim);z-index:50}
.editor-infobar .info-swatch{width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}
.editor-infobar .info-sep{width:1px;height:14px;background:var(--border-subtle)}

/* HSL mode tabs */
.hsl-channel-tabs{display:flex;gap:4px;margin-bottom:12px}
.hsl-mode-tab{flex:1;padding:5px 0;text-align:center;font-size:10px;font-weight:700;cursor:pointer;
    border:1px solid var(--border);background:var(--bg-surface);color:var(--text-muted);border-radius:var(--radius-sm);transition:all 0.1s}
.hsl-mode-tab.active{border-color:var(--obi);color:var(--obi);background:var(--obi-glow)}
.hsl-mode-tab:hover{color:var(--text-primary)}

/* Split view divider */
.split-divider{position:absolute;top:0;bottom:0;width:3px;background:var(--obi);cursor:ew-resize;z-index:10;display:none}
.split-divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:20px;height:40px;background:var(--obi);border-radius:10px;opacity:0.9}

/* Export modal */
.export-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:300}
.export-modal.show{display:flex}
.export-modal-inner{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:24px;width:340px;max-width:90vw}
.export-modal h3{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--text-primary)}
.export-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.export-row label{font-size:11px;font-weight:600;color:var(--text-secondary);min-width:70px}
.export-row select,.export-row input[type="range"]{flex:1}
.export-row select{padding:6px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px}
.export-row .exp-val{font-size:10px;color:var(--text-dim);min-width:32px;text-align:right;font-weight:700}
.export-btns{display:flex;gap:8px;margin-top:18px}
.export-btns button{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border)}
.export-btns .exp-cancel{background:var(--bg-surface);color:var(--text-secondary)}
.export-btns .exp-save{background:var(--obi);color:var(--bg-base);border-color:var(--obi);font-weight:800}
.export-btns .exp-save:hover{background:var(--obi-light);color:var(--bg-base)}

/* Presets grid */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.preset-item{padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
    cursor:pointer;font-size:11px;font-weight:600;color:var(--text-secondary);transition:all 0.1s;text-align:center}
.preset-item:hover{border-color:var(--obi);color:var(--obi)}
.preset-item.active{border-color:var(--obi);background:var(--obi-glow);color:var(--obi)}
.custom-looks{margin-top:12px}
.custom-looks-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.look-save-btn{padding:4px 10px;background:var(--obi);color:var(--bg-base);border:none;border-radius:var(--radius-sm);
    font-size:10px;font-weight:800;cursor:pointer;transition:all 0.15s}
.look-save-btn:hover{background:var(--obi-light);color:var(--bg-base)}
.custom-look-item{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-surface);
    border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;font-size:11px;
    font-weight:600;color:var(--text-secondary);transition:all 0.1s;margin-bottom:4px}
.custom-look-item:hover{border-color:var(--obi);color:var(--obi)}
.custom-look-item .look-name{flex:1}
.custom-look-item .look-del{background:none;border:none;color:var(--text-dim);font-size:10px;cursor:pointer;padding:2px}
.custom-look-item .look-del:hover{color:var(--error)}

/* ============================================
   PWA UPDATE TOAST — persistent, user-confirmed
   ============================================ */
.pwa-toast{position:fixed;bottom:20px;right:20px;z-index:10001;
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 14px;background:var(--bg-elevated);
    border:1px solid var(--border);border-radius:var(--radius-sm,6px);
    color:var(--text-primary);font-size:12px;font-weight:600;
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
    font-family:system-ui,-apple-system,sans-serif}
.pwa-toast-msg{color:var(--text-primary)}
.pwa-toast-btn{background:transparent;border:1px solid var(--border);
    color:var(--text-secondary);font-size:11px;font-weight:700;
    padding:5px 10px;border-radius:var(--radius-sm,6px);cursor:pointer;
    transition:border-color .15s,color .15s}
.pwa-toast-btn:hover{border-color:var(--brand-fg);color:var(--brand-fg)}
.pwa-toast-btn-primary{background:var(--brand-fg);border-color:var(--brand-fg);color:#08080C}
.pwa-toast-btn-primary:hover{background:var(--brand-fg-dim);border-color:var(--brand-fg-dim);color:#08080C}

/* ============================================
   PHASE 1.E — TOUCH + MOBILE LAYOUT
   ============================================ */

/* Coarse pointers: enlarge slider hit area without disturbing visuals.
   `touch-action: pan-x` lets vertical scroll pass through but claims
   horizontal motion for the slider value (Safari iOS needs this hint). */
@media (pointer: coarse) {
    .ed-slider-input{height:32px;touch-action:pan-x}
    .ed-slider-input::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9.5px}
    .ed-slider-input::-moz-range-thumb{width:22px;height:22px}
    .ed-slider-row{gap:10px;margin-bottom:10px}
    .ed-slider-label{min-width:80px}
    .editor-tb-btn{padding:8px 14px;font-size:12px;min-height:36px}
    .editor-sidebar-tab{padding:14px 0;font-size:12px}
}

/* Bottom-sheet sidebar @ <=900px. Safe-area insets keep controls clear of
   the iOS home indicator and notch. */
@media (max-width:900px) {
    .editor-root{flex-direction:column}
    .editor-toolbar{padding-top:env(safe-area-inset-top);height:calc(48px + env(safe-area-inset-top))}
    .editor-canvas-area{padding-top:calc(48px + env(safe-area-inset-top));flex:1 1 auto;min-height:0}
    .editor-sidebar{
        width:100%;min-width:0;max-width:none;
        height:50vh;height:50dvh;
        border-left:none;border-top:1px solid var(--border-subtle);
        padding-top:0;padding-bottom:env(safe-area-inset-bottom);
        flex-shrink:0;
    }
    .sidebar-resize-handle{
        top:-3px;left:0;width:100%;height:6px;cursor:ns-resize;
    }
    .sidebar-resize-handle::after{
        top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:2px
    }
    .editor-toolbar-title{font-size:11px}
    /* Hide split divider on touch — gesture is owned by the canvas area. */
    .split-divider{display:none}
    /* Snapshot strip narrower on small screens. */
    .snapshot-strip{max-width:160px}
}

/* ============================================
   PHASE 2.D — DROP OVERLAY + LIBRARY DIALOG
   Drop overlay covers #canvasArea while a drag-with-files is hovering. CSS
   uses display:none via [hidden] so we don't fight transitions on layout.
   ============================================ */
.drop-overlay{
    position:absolute;inset:0;z-index:50;
    display:flex;align-items:center;justify-content:center;
    background:rgba(8,8,12,0.78);color:var(--brand-fg);
    border:2px dashed var(--brand-fg);
    font-family:var(--font-mono);font-size:18px;font-weight:700;
    letter-spacing:0.04em;text-transform:lowercase;pointer-events:none;
    animation:drop-overlay-in 0.14s ease-out;
}
.drop-overlay[hidden]{display:none}
@keyframes drop-overlay-in{from{opacity:0}to{opacity:1}}

/* Library dialog (<dialog>) — natively centered + backdrop. We override the
   default::backdrop colour to match the editor palette. */
.library-dialog{
    width:min(960px,94vw);max-height:88vh;
    padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--bg-elevated);color:var(--text-primary);
    box-shadow:0 12px 48px rgba(0,0,0,0.6);
    overflow:hidden;
}
.library-dialog::backdrop{background:rgba(0,0,0,0.6)}
.library-dialog-head{
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.library-dialog-head h3{margin:0;font-size:14px;font-weight:700;color:var(--text-primary)}
.library-dialog-head .library-spacer{flex:1}
.library-dialog-close{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    font-size:14px;font-weight:700;width:30px;height:30px;border-radius:var(--radius-sm);
    cursor:pointer;line-height:1;
}
.library-dialog-close:hover{border-color:var(--brand-fg);color:var(--brand-fg)}

.library-tabs{
    display:flex;gap:4px;padding:8px 18px 0;
    border-bottom:1px solid var(--border-subtle);
}
.library-tab{
    background:transparent;border:none;border-bottom:2px solid transparent;
    color:var(--text-secondary);font-size:12px;font-weight:700;
    padding:10px 14px;cursor:pointer;text-transform:uppercase;letter-spacing:0.04em;
}
.library-tab:hover{color:var(--text-primary)}
.library-tab[aria-selected="true"]{color:var(--brand-fg);border-bottom-color:var(--brand-fg)}

.library-body{padding:14px 18px 18px;max-height:calc(88vh - 120px);overflow:auto}
.library-empty-msg{
    padding:28px 12px;color:var(--text-muted);font-size:12px;text-align:center;
    font-family:var(--font-mono);
}
.library-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
}
.library-card{
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);overflow:hidden;display:flex;flex-direction:column;
    transition:border-color 0.12s,transform 0.08s;
}
.library-card:hover{border-color:var(--obi)}
.library-card-thumb{
    width:100%;aspect-ratio:1/1;background:var(--bg-base);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    cursor:pointer;
}
.library-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.library-card-thumb-empty{font-size:24px;color:var(--text-dim)}
.library-card-meta{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.library-card-name{
    font-size:11px;font-weight:700;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.library-card-sub{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}
.library-card-actions{display:flex;gap:6px;padding:0 10px 10px}
.library-card-actions button{
    flex:1;padding:6px 8px;font-size:10px;font-weight:700;cursor:pointer;
    background:var(--bg-elevated);border:1px solid var(--border-subtle);
    color:var(--text-secondary);border-radius:var(--radius-sm);
    text-transform:uppercase;letter-spacing:0.04em;
}
.library-card-actions .btn-open{color:var(--brand-fg);border-color:var(--brand-fg)}
.library-card-actions .btn-open:hover{background:var(--brand-fg);color:var(--bg-base)}
.library-card-actions .btn-del:hover{color:var(--error,#ef4444);border-color:var(--error,#ef4444)}

.library-foot{
    display:flex;align-items:center;gap:8px;padding:10px 18px;
    border-top:1px solid var(--border-subtle);background:var(--bg-base);
}
.library-foot .library-spacer{flex:1}
.library-wipe-btn{
    padding:8px 14px;background:transparent;border:1px solid var(--error,#ef4444);
    color:var(--error,#ef4444);font-size:11px;font-weight:700;border-radius:var(--radius-sm);
    cursor:pointer;letter-spacing:0.04em;text-transform:uppercase;
}
.library-wipe-btn:hover{background:var(--error,#ef4444);color:#fff}

@media (max-width:600px){
    .library-dialog{width:100vw;max-height:100vh;border-radius:0}
    .library-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ============================================
   HDR Merge Dialog (Lane C) — same palette as the Library modal.
   Anatomy: head → body (bracket-list, warning, options-row, backend-row,
   busy-overlay) → foot. Cards use 96×96 thumb + meta + remove button.
   ============================================ */
.hdr-merge-dialog{
    width:min(720px,94vw);max-height:88vh;
    padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--bg-elevated);color:var(--text-primary);
    box-shadow:0 12px 48px rgba(0,0,0,0.6);
    overflow:hidden;position:relative;
}
.hdr-merge-dialog::backdrop{background:rgba(0,0,0,0.6)}
.hdr-dialog-head{
    display:flex;align-items:center;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.hdr-dialog-head h3{margin:0;font-size:14px;font-weight:700;color:var(--text-primary)}
.hdr-spacer{flex:1}
.hdr-dialog-close{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    font-size:14px;font-weight:700;width:30px;height:30px;border-radius:var(--radius-sm);
    cursor:pointer;line-height:1;
}
.hdr-dialog-close:hover{border-color:var(--brand-fg);color:var(--brand-fg)}

.hdr-dialog-body{
    padding:14px 18px 18px;max-height:calc(88vh - 130px);overflow:auto;
    display:flex;flex-direction:column;gap:12px;
}

.hdr-bracket-list{display:flex;flex-direction:column;gap:8px}
.hdr-bracket-empty{
    padding:24px 12px;color:var(--text-muted);font-size:12px;text-align:center;
    font-family:var(--font-mono);
}
.hdr-bracket-card{
    display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);padding:8px;
}
.hdr-bracket-thumb{
    width:96px;height:96px;background:var(--bg-base);border-radius:var(--radius-sm);
    overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.hdr-bracket-thumb canvas{width:96px;height:96px;display:block}
.hdr-bracket-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.hdr-bracket-name{
    font-size:12px;font-weight:700;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr-bracket-row{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.hdr-bracket-ev{
    color:var(--brand-fg);font-weight:700;
    background:rgba(196,255,46,0.08);border:1px solid rgba(196,255,46,0.3);
    border-radius:3px;padding:1px 6px;font-size:11px;
}
.hdr-bracket-dim{color:var(--text-dim)}
.hdr-bracket-remove{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;
    font-size:14px;line-height:1;
}
.hdr-bracket-remove:hover{border-color:var(--error,#ef4444);color:var(--error,#ef4444)}
.hdr-bracket-remove:disabled{opacity:0.4;cursor:not-allowed}

.hdr-exif-footnote{
    font-size:10px;color:var(--text-muted);font-family:var(--font-mono);
    padding:0 2px;
}

.hdr-warning{
    padding:8px 10px;border-radius:var(--radius-sm);
    background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.4);
    color:var(--error,#ef4444);font-size:11px;font-weight:600;
}
.hdr-warning[hidden]{display:none}

.hdr-options-row{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;
    padding:10px;background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
}
.hdr-option{display:flex;align-items:center;gap:8px}
.hdr-option-label{
    font-size:10px;font-weight:700;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.6px;min-width:64px;
}
.hdr-option-slider{flex:1;-webkit-appearance:none;height:2px;background:var(--border);outline:none;border-radius:2px}
.hdr-option-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:12px;background:var(--text-primary);
    border-radius:50%;border:2px solid var(--bg-base);cursor:pointer;
}
.hdr-option-val{
    font-size:10px;color:var(--text-secondary);font-variant-numeric:tabular-nums;
    min-width:32px;text-align:right;font-family:var(--font-mono);
}

.hdr-backend-row{
    display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);
}
.hdr-backend-label{font-family:var(--font-mono);font-size:11px}
.hdr-backend-badge{
    padding:3px 8px;border-radius:3px;font-family:var(--font-mono);font-size:11px;
    font-weight:700;letter-spacing:0.04em;border:1px solid var(--border);
}
.hdr-backend-badge.tier-32f{
    color:var(--brand-fg);border-color:var(--brand-fg);background:rgba(196,255,46,0.06);
}
.hdr-backend-badge.tier-16f{
    color:#7dd3fc;border-color:#7dd3fc;background:rgba(125,211,252,0.06);
}
.hdr-backend-badge.tier-cpu{
    color:var(--text-muted);border-color:var(--border);background:transparent;
}

.hdr-dialog-foot{
    display:flex;align-items:center;gap:8px;padding:10px 18px;
    border-top:1px solid var(--border-subtle);background:var(--bg-base);
}
.hdr-btn{
    padding:8px 14px;font-size:11px;font-weight:700;cursor:pointer;
    background:var(--bg-elevated);border:1px solid var(--border);
    color:var(--text-secondary);border-radius:var(--radius-sm);
    text-transform:uppercase;letter-spacing:0.04em;
}
.hdr-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}
.hdr-btn:disabled{opacity:0.4;cursor:not-allowed}
.hdr-btn-primary{color:var(--brand-fg);border-color:var(--brand-fg)}
.hdr-btn-primary:hover{background:var(--brand-fg);color:var(--bg-base)}
.hdr-btn-primary:disabled{background:transparent;color:var(--text-dim);border-color:var(--border)}

.hdr-busy-overlay{
    position:absolute;inset:0;background:rgba(8,8,12,0.85);
    display:flex;align-items:center;justify-content:center;z-index:10;
}
.hdr-busy-overlay[hidden]{display:none}
.hdr-busy-inner{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:18px 24px;background:var(--bg-elevated);
    border:1px solid var(--border);border-radius:var(--radius-md);
    min-width:240px;
}
.hdr-busy-text{
    font-size:12px;color:var(--brand-fg);font-family:var(--font-mono);
    font-weight:700;text-align:center;
}

.hdr-fatal-error{
    padding:10px;background:rgba(239,68,68,0.12);border:1px solid var(--error,#ef4444);
    color:var(--error,#ef4444);border-radius:var(--radius-sm);font-size:11px;
}

@media (max-width:600px){
    .hdr-merge-dialog{width:100vw;max-height:100vh;border-radius:0}
    .hdr-options-row{grid-template-columns:1fr}
    .hdr-bracket-card{grid-template-columns:72px 1fr auto}
    .hdr-bracket-thumb,.hdr-bracket-thumb canvas{width:72px;height:72px}
}

/* ─── Phase 3.A.batch — batch-convert modal (src/ui/batch-modal.js) ─── */
.blrrd-batch-modal{
    width:min(560px,94vw);max-height:88vh;
    padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--bg-elevated);color:var(--text-primary);
    box-shadow:0 12px 48px rgba(0,0,0,0.6);
    overflow:hidden;
}
.blrrd-batch-modal::backdrop{background:rgba(0,0,0,0.6)}
.bbm-inner{display:flex;flex-direction:column;max-height:88vh}
.bbm-header{
    display:flex;align-items:center;gap:10px;
    padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.bbm-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.bbm-subtitle{
    flex:1;font-size:10px;color:var(--text-muted);
    font-family:var(--font-mono);
}
.bbm-close{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    font-size:16px;font-weight:700;width:30px;height:30px;border-radius:var(--radius-sm);
    cursor:pointer;line-height:1;
}
.bbm-close:hover{border-color:var(--brand-fg);color:var(--brand-fg)}
.bbm-dropzone{
    margin:14px 18px 0;padding:24px 18px;
    background:var(--bg-surface);border:2px dashed var(--border);
    border-radius:var(--radius-sm);text-align:center;
    transition:border-color .12s,background .12s;
}
.bbm-dropzone.over{border-color:var(--brand-fg);background:rgba(196,255,46,0.05)}
.bbm-dz-text{font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.bbm-dz-btn{
    background:transparent;border:1px solid var(--brand-fg);color:var(--brand-fg);
    padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;
    cursor:pointer;font-family:inherit;
}
.bbm-dz-btn:hover{background:var(--brand-fg);color:var(--bg-base)}
.bbm-dz-hint{
    font-size:10px;color:var(--text-dim);margin-top:10px;
    font-family:var(--font-mono);line-height:1.4;
}
.bbm-files{
    margin:10px 18px 0;max-height:140px;overflow-y:auto;
    display:flex;flex-direction:column;gap:4px;
}
.bbm-files:empty{display:none}
.bbm-file-row{
    display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
    padding:6px 10px;background:var(--bg-surface);
    border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
}
.bbm-file-name{
    font-size:11px;font-family:var(--font-mono);color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bbm-file-size{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}
.bbm-file-remove{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    width:22px;height:22px;border-radius:3px;cursor:pointer;font-size:12px;line-height:1;
}
.bbm-file-remove:hover{border-color:var(--error,#ef4444);color:var(--error,#ef4444)}
.bbm-controls{
    margin:14px 18px;padding:12px;
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:10px;
}
.bbm-row{display:flex;align-items:center;gap:10px}
.bbm-label{
    font-size:10px;font-weight:700;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.6px;min-width:110px;
}
.bbm-row select,.bbm-row input[type="range"]{
    flex:1;background:var(--bg-base);color:var(--text-primary);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:4px 8px;font-size:11px;font-family:var(--font-mono);
}
.bbm-val{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);min-width:40px;text-align:right}
.bbm-progress{margin:0 18px 14px;display:flex;flex-direction:column;gap:8px}
.bbm-progress[hidden]{display:none}
.bbm-progress-bar{
    height:6px;background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:3px;overflow:hidden;
}
.bbm-progress-fill{
    height:100%;background:var(--brand-fg);transition:width .12s;
}
.bbm-progress-text{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono)}
.bbm-progress-list{
    max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
}
.bbm-progress-row{
    display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;
    padding:3px 8px;font-size:10px;font-family:var(--font-mono);
    background:var(--bg-surface);border-radius:3px;
}
.bbm-progress-row.ok{color:var(--text-secondary)}
.bbm-progress-row.err{color:var(--error,#ef4444)}
.bbm-progress-row.warn{color:#f59e0b}
.bbm-progress-icon{font-weight:700}
.bbm-progress-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbm-progress-err{color:var(--error,#ef4444);font-size:10px}
.bbm-buttons{
    padding:12px 18px;border-top:1px solid var(--border-subtle);
    display:flex;justify-content:flex-end;gap:8px;background:var(--bg-base);
}
.bbm-cancel{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;
    font-size:11px;font-weight:700;font-family:inherit;
}
.bbm-cancel:hover{border-color:var(--error,#ef4444);color:var(--error,#ef4444)}
.bbm-cancel[hidden]{display:none}
.bbm-start{
    background:transparent;border:1px solid var(--brand-fg);color:var(--brand-fg);
    padding:6px 14px;border-radius:var(--radius-sm);cursor:pointer;
    font-size:11px;font-weight:700;font-family:inherit;
}
.bbm-start:hover:not(:disabled){background:var(--brand-fg);color:var(--bg-base)}
.bbm-start:disabled{opacity:0.4;cursor:not-allowed}

@media (max-width:600px){
    .blrrd-batch-modal{width:100vw;max-height:100vh;border-radius:0}
    .bbm-row{flex-direction:column;align-items:stretch;gap:4px}
    .bbm-label{min-width:0}
}

/* ─── Phase 3.B-ux P9 — metadata viewer modal (src/ui/metadata-panel.js) ─── */
.blrrd-meta-modal{
    width:min(640px,94vw);max-height:88vh;
    padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--bg-elevated);color:var(--text-primary);
    box-shadow:0 12px 48px rgba(0,0,0,0.6);
    overflow:hidden;
}
.blrrd-meta-modal::backdrop{background:rgba(0,0,0,0.6)}
.bmd-inner{display:flex;flex-direction:column;max-height:88vh}
.bmd-header{
    display:flex;align-items:center;gap:10px;
    padding:14px 18px;border-bottom:1px solid var(--border-subtle);
}
.bmd-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.bmd-subtitle{
    flex:1;font-size:10px;color:var(--text-muted);
    font-family:var(--font-mono);letter-spacing:0.4px;text-transform:uppercase;
}
.bmd-close{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    font-size:16px;font-weight:700;width:30px;height:30px;border-radius:var(--radius-sm);
    cursor:pointer;line-height:1;
}
.bmd-close:hover{border-color:var(--brand-fg);color:var(--brand-fg)}
.bmd-body{
    overflow-y:auto;padding:8px 18px 18px;
    display:flex;flex-direction:column;gap:14px;
}
.bmd-empty{
    padding:20px;text-align:center;font-size:12px;
    color:var(--text-muted);font-family:var(--font-mono);
}
.bmd-section{
    background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);padding:10px 12px;
}
.bmd-section-title{
    font-size:10px;font-weight:700;color:var(--brand-fg);
    text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;
    font-family:var(--font-mono);
}
.bmd-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:6px 14px;
}
.bmd-grid-empty{
    grid-column:1/-1;color:var(--text-muted);font-family:var(--font-mono);
    font-size:11px;text-align:center;padding:4px 0;
}
.bmd-cell{
    display:flex;flex-direction:column;gap:2px;min-width:0;
}
.bmd-key{
    font-size:9px;font-weight:700;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.5px;
}
.bmd-val{
    font-size:12px;color:var(--text-primary);
    font-family:var(--font-mono);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bmd-section-gps .bmd-gps-warning{
    font-size:11px;color:var(--text-secondary);
    background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.4);
    border-radius:var(--radius-sm);padding:8px 10px;line-height:1.4;
    margin-bottom:8px;
}
.bmd-section-gps .bmd-gps-reveal{
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    padding:6px 14px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;
    cursor:pointer;font-family:inherit;
}
.bmd-section-gps .bmd-gps-reveal:hover{
    border-color:var(--brand-fg);color:var(--brand-fg);
}
.bmd-section-ai .bmd-ai-prompt-label{
    font-size:9px;font-weight:700;color:var(--text-dim);
    text-transform:uppercase;letter-spacing:0.5px;
    margin-top:10px;margin-bottom:4px;
}
.bmd-section-ai .bmd-ai-prompt{
    font-size:11px;color:var(--text-primary);
    background:var(--bg-base);border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);padding:8px 10px;
    font-family:var(--font-mono);line-height:1.5;
    max-height:160px;overflow-y:auto;
    white-space:pre-wrap;word-break:break-word;
}

@media (max-width:600px){
    .blrrd-meta-modal{width:100vw;max-height:100vh;border-radius:0}
    .bmd-grid{grid-template-columns:1fr}
}

/* ============================================
   PHASE 3.B-tone P7 — TONE EQUALIZER PANEL
   9 vertical sliders in a horizontal strip; each is one EV zone
   from -8 EV to 0 EV. Halo-free guided-filter mask under the hood.
   ============================================ */
.tone-eq-strip{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:4px;padding:8px 4px 4px;
    background:var(--bg-surface);
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    height:240px
}
.tone-eq-zone{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;
    gap:6px;min-width:0;height:100%
}
.tone-eq-zone label{
    font-size:9px;font-weight:700;color:var(--text-dim);
    letter-spacing:0.2px;line-height:1
}
.tone-eq-zone.active label{color:var(--obi)}
.tone-eq-slider{
    /* Vertical orientation. writing-mode is the modern Chrome/Safari
       way; appearance:slider-vertical is Firefox legacy fallback. */
    -webkit-appearance:slider-vertical;
    appearance:slider-vertical;
    writing-mode:bt-lr;
    width:18px;flex:1 1 auto;min-height:0;
    cursor:ns-resize;
    accent-color:var(--obi);
    background:transparent;
    margin:0
}
/* Highlight rail — non-zero zones get a brand-colour glow so the user
   can see at a glance which bands are touched. */
.tone-eq-zone.active .tone-eq-slider{
    accent-color:var(--obi-light, var(--obi))
}
.tone-eq-readout{
    margin-top:6px;font-size:10px;font-weight:600;color:var(--text-dim);
    text-align:center;min-height:14px
}
#btnToneEqReset{
    background:var(--bg-surface);color:var(--text-secondary);
    border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
    padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer;
    transition:all 0.1s
}
#btnToneEqReset:hover{border-color:var(--obi);color:var(--obi)}

/* Coarse pointers (touch) — wider sliders + bigger touch targets */
@media (pointer: coarse){
    .tone-eq-strip{height:280px;gap:6px;padding:10px 6px 6px}
    .tone-eq-slider{width:28px}
    .tone-eq-zone label{font-size:10px}
}