/* Niexbot Photo Editor — full-screen workspace (see photo-editor.js). */
.pe-root{
  --pe-bg:#0b0b0c;--pe-bar:#131315;--pe-card:#1a1a1d;--pe-line:rgba(255,255,255,.07);--pe-line2:rgba(255,255,255,.12);
  --pe-text:#ececec;--pe-dim:#9a9a9a;--pe-accent:var(--teal,#10a37f);--pe-accent-soft:rgba(16,163,127,.15);
  position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:var(--pe-bg);color:var(--pe-text);
  font-family:var(--font-body,Inter,system-ui,sans-serif);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;animation:pe-in 180ms ease-out;
}
@keyframes pe-in{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}
.pe-root *,.pe-root *::before,.pe-root *::after{box-sizing:border-box;}
.pe-root button{font-family:inherit;}
.pe-root kbd{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-bottom-width:2px;border-radius:4px;color:var(--pe-text);font-family:var(--font-head,inherit);font-size:10.5px;padding:0 5px;}

/* Top bar */
.pe-top{align-items:center;background:var(--pe-bar);border-bottom:1px solid var(--pe-line);display:flex;flex:none;gap:12px;height:56px;justify-content:space-between;padding:0 12px;}
.pe-top-l,.pe-top-m,.pe-top-r{align-items:center;display:flex;gap:4px;min-width:0;}
.pe-top-l{flex:1 1 0;gap:8px;}
.pe-top-r{flex:1 1 0;gap:8px;justify-content:flex-end;}
.pe-title{display:flex;flex-direction:column;min-width:0;}
.pe-title strong{font-family:var(--font-head,inherit);font-size:14px;font-weight:600;letter-spacing:.01em;}
.pe-meta{color:var(--pe-dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw;}
.pe-sep{background:var(--pe-line2);height:20px;margin:0 6px;width:1px;}
.pe-icon-btn{align-items:center;background:transparent;border:0;border-radius:8px;color:#d4d4d4;cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:background 120ms ease,color 120ms ease;width:36px;}
.pe-icon-btn:hover:not(:disabled){background:rgba(255,255,255,.07);color:#fff;}
.pe-icon-btn:disabled{cursor:default;opacity:.3;}
.pe-icon-btn.active{background:var(--pe-accent-soft);color:#fff;}
.pe-zoom-label{background:transparent;border:0;border-radius:6px;color:var(--pe-dim);cursor:pointer;font-family:var(--font-head,inherit);font-size:12px;font-variant-numeric:tabular-nums;min-width:52px;padding:6px 4px;text-align:center;}
.pe-zoom-label:hover{color:#fff;background:rgba(255,255,255,.06);}
.pe-btn{align-items:center;background:transparent;border:1px solid var(--pe-line2);border-radius:9px;color:var(--pe-text);cursor:pointer;display:inline-flex;font-family:var(--font-head,inherit);font-size:12.5px;font-weight:600;gap:7px;height:36px;justify-content:center;padding:0 14px;transition:background 120ms ease,border-color 120ms ease,opacity 120ms ease;white-space:nowrap;}
.pe-btn:hover:not(:disabled){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);}
.pe-btn.primary{background:var(--pe-accent);border-color:var(--pe-accent);color:#fff;}
.pe-btn.primary:hover:not(:disabled){background:var(--pe-accent);filter:brightness(1.1);}
.pe-btn.danger{border-color:rgba(248,113,113,.4);color:#fca5a5;}
.pe-btn.danger:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.6);}
.pe-btn:disabled{cursor:default;opacity:.45;}
.pe-btn[hidden]{display:none;}
.pe-root :focus-visible{outline:2px solid var(--pe-accent);outline-offset:2px;}

/* Body */
.pe-body{display:flex;flex:1;min-height:0;}
.pe-rail{background:var(--pe-bar);border-right:1px solid var(--pe-line);display:flex;flex:none;flex-direction:column;gap:2px;overflow-y:auto;padding:10px 7px;scrollbar-width:none;width:80px;}
.pe-rail::-webkit-scrollbar{display:none;}
.pe-tool{align-items:center;background:none;border:0;border-radius:11px;color:var(--pe-dim);cursor:pointer;display:flex;flex:none;flex-direction:column;font-family:var(--font-head,inherit);font-size:10.5px;font-weight:500;gap:4px;letter-spacing:.01em;padding:9px 2px 8px;transition:background 120ms ease,color 120ms ease;}
.pe-tool:hover{background:rgba(255,255,255,.05);color:#fff;}
.pe-tool.active{background:var(--pe-accent-soft);color:#fff;}
.pe-tool.active svg{color:var(--pe-accent);}
.pe-tool span{white-space:nowrap;}
.pe-rail-sep{background:var(--pe-line);flex:none;height:1px;margin:6px 10px;}

.pe-stage{background:var(--pe-bg);flex:1;min-width:0;overflow:hidden;position:relative;}
.pe-stage canvas{display:block;height:100%;inset:0;position:absolute;width:100%;}
.pe-ov{touch-action:none;}
.pe-loading{align-items:center;color:var(--pe-dim);display:flex;flex-direction:column;gap:14px;inset:0;justify-content:center;position:absolute;text-align:center;padding:24px;}
.pe-fatal{color:#fca5a5;font-size:14px;max-width:420px;}
.pe-spin{animation:pe-spin .9s linear infinite;border:2px solid rgba(255,255,255,.15);border-radius:50%;border-top-color:var(--pe-accent);display:inline-block;flex:none;height:18px;width:18px;}
@keyframes pe-spin{to{transform:rotate(360deg)}}
.pe-busy{align-items:center;background:rgba(22,22,24,.94);border:1px solid var(--pe-line2);border-radius:99px;box-shadow:0 8px 30px rgba(0,0,0,.45);display:none;font-family:var(--font-head,inherit);font-size:12.5px;gap:10px;left:50%;padding:9px 16px;position:absolute;top:14px;transform:translateX(-50%);z-index:3;}
.pe-busy.show{display:flex;}
.pe-busy-bar{background:rgba(255,255,255,.1);border-radius:2px;display:none;height:3px;overflow:hidden;width:90px;}
.pe-busy.has-bar .pe-busy-bar{display:block;}
.pe-busy-bar i{background:var(--pe-accent);display:block;height:100%;transition:width 200ms ease;width:0;}
.pe-is-busy .pe-ov{cursor:progress!important;}
.pe-toast{align-items:center;background:rgba(24,24,27,.96);border:1px solid var(--pe-line2);border-radius:12px;bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;font-size:13px;gap:12px;left:50%;max-width:min(560px,calc(100% - 32px));opacity:0;padding:10px 16px;pointer-events:none;position:absolute;transform:translate(-50%,8px);transition:opacity 160ms ease,transform 160ms ease;z-index:3;}
.pe-toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
.pe-toast.error{border-color:rgba(248,113,113,.45);}
.pe-toast a{color:var(--pe-accent);font-weight:600;text-decoration:none;white-space:nowrap;}

/* Panel */
.pe-panel{background:var(--pe-bar);border-left:1px solid var(--pe-line);flex:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(255,255,255,.15) transparent;scrollbar-width:thin;width:316px;}
.pe-pane{padding:16px 18px 32px;}
.pe-pane-h{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:6px;min-height:30px;}
.pe-pane-h h3{font-family:var(--font-head,inherit);font-size:16px;font-weight:600;margin:0;}
.pe-pane-actions{display:flex;gap:6px;}
.pe-hint{color:var(--pe-dim);font-size:12.5px;line-height:1.55;margin:0 0 14px;}
.pe-hint b{color:var(--pe-text);font-weight:600;}
.pe-sub{color:var(--pe-dim);font-family:var(--font-head,inherit);font-size:11px;font-weight:600;letter-spacing:.07em;margin:14px 0 8px;text-transform:uppercase;}
.pe-note{color:var(--pe-dim);font-size:12px;}
.pe-sbtn{align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--pe-line2);border-radius:8px;color:#dcdcdc;cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:6px;height:30px;padding:0 10px;transition:all 120ms ease;white-space:nowrap;}
.pe-sbtn:hover{background:rgba(255,255,255,.08);color:#fff;}
.pe-sbtn.active{background:var(--pe-accent-soft);border-color:var(--pe-accent);color:#fff;}
.pe-btnrow{align-items:center;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.pe-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:18px;}
.pe-actions .pe-btn{flex:1 1 auto;}
.pe-hist{aspect-ratio:560/150;background:#0f0f11;border:1px solid var(--pe-line);border-radius:9px;display:block;margin:4px 0 10px;width:100%;}

.pe-sec{border-top:1px solid var(--pe-line);}
.pe-sec-h{align-items:center;background:none;border:0;color:var(--pe-text);cursor:pointer;display:flex;font-family:var(--font-head,inherit);font-size:11.5px;font-weight:600;justify-content:space-between;letter-spacing:.08em;padding:13px 0;text-transform:uppercase;width:100%;}
.pe-sec-h svg{color:var(--pe-dim);transition:transform 160ms ease;}
.pe-sec.closed .pe-sec-h svg{transform:rotate(-90deg);}
.pe-sec-b{padding:0 0 12px;}
.pe-sec.closed .pe-sec-b{display:none;}

/* Sliders */
.pe-sl{padding:4px 0 3px;}
.pe-sl.disabled{opacity:.4;}
.pe-sl-head{align-items:baseline;color:#d2d2d2;display:flex;font-size:12.5px;justify-content:space-between;}
.pe-sl-head label{cursor:default;}
.pe-sl-val{color:var(--pe-dim);cursor:pointer;font-family:var(--font-head,inherit);font-size:11.5px;font-variant-numeric:tabular-nums;min-width:48px;text-align:right;}
.pe-range{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;display:block;height:22px;margin:0;width:100%;}
.pe-range:disabled{cursor:default;}
.pe-range::-webkit-slider-runnable-track{background:var(--trk,rgba(255,255,255,.13));border-radius:2px;height:4px;}
.pe-range::-moz-range-track{background:var(--trk,rgba(255,255,255,.13));border-radius:2px;height:4px;}
.pe-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f4f4f4;border:0;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.6);height:15px;margin-top:-5.5px;transition:transform 100ms ease;width:15px;}
.pe-range::-moz-range-thumb{background:#f4f4f4;border:0;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.6);height:15px;width:15px;}
.pe-range:active::-webkit-slider-thumb{transform:scale(1.15);}
.pe-range:focus-visible{outline:none;}
.pe-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(16,163,127,.55);}
.pe-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(16,163,127,.55);}

/* Chips */
.pe-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px;}
.pe-chips-grid{display:grid;grid-template-columns:repeat(3,1fr);}
.pe-chip{align-items:center;background:transparent;border:1px solid var(--pe-line2);border-radius:99px;color:#c4c4c4;cursor:pointer;display:inline-flex;font-family:var(--font-head,inherit);font-size:12px;font-weight:500;gap:6px;justify-content:center;padding:6px 12px;transition:all 120ms ease;white-space:nowrap;}
.pe-chips-grid .pe-chip{border-radius:9px;padding:7px 6px;}
.pe-chip:hover{border-color:rgba(255,255,255,.28);color:#fff;}
.pe-chip.active{background:var(--pe-accent-soft);border-color:var(--pe-accent);color:#fff;}
.pe-chip-icon{padding:5px 9px;}
.pe-dot{border-radius:50%;display:inline-block;height:8px;width:8px;}

/* Switch */
.pe-switch-row{align-items:center;color:#d2d2d2;cursor:pointer;display:flex;font-size:12.5px;justify-content:space-between;padding:8px 0 4px;}
.pe-switch{flex:none;height:18px;position:relative;width:32px;}
.pe-switch input{height:1px;opacity:0;position:absolute;width:1px;}
.pe-switch i{background:rgba(255,255,255,.14);border-radius:99px;inset:0;position:absolute;transition:background 140ms ease;}
.pe-switch i::after{background:#bdbdbd;border-radius:50%;content:"";height:14px;left:2px;position:absolute;top:2px;transition:transform 140ms ease,background 140ms ease;width:14px;}
.pe-switch input:checked + i{background:var(--pe-accent);}
.pe-switch input:checked + i::after{background:#fff;transform:translateX(14px);}
.pe-switch input:focus-visible + i{outline:2px solid var(--pe-accent);outline-offset:2px;}

/* Color mixer */
.pe-swatches{display:flex;gap:7px;justify-content:space-between;margin:2px 0 10px;}
.pe-sw{border:2px solid transparent;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);cursor:pointer;flex:none;height:24px;padding:0;transition:transform 120ms ease;width:24px;}
.pe-sw:hover{transform:scale(1.1);}
.pe-sw.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18);}

/* Curves */
.pe-curves{aspect-ratio:1;background:#0f0f11;border:1px solid var(--pe-line);border-radius:10px;cursor:crosshair;display:block;margin:0 0 6px;touch-action:none;width:100%;}

/* Filters */
.pe-fgrid{display:grid;gap:12px 8px;grid-template-columns:repeat(3,1fr);margin-top:12px;}
.pe-fitem{background:none;border:0;color:#bdbdbd;cursor:pointer;font-family:var(--font-head,inherit);font-size:11.5px;padding:0;text-align:center;}
.pe-fitem canvas{aspect-ratio:1;background:#1f1f22;border:2px solid transparent;border-radius:10px;display:block;margin-bottom:5px;transition:border-color 120ms ease,transform 120ms ease;width:100%;}
.pe-fitem:hover canvas{transform:translateY(-1px);border-color:rgba(255,255,255,.2);}
.pe-fitem.active{color:#fff;}
.pe-fitem.active canvas{border-color:var(--pe-accent);}

/* Paint color */
.pe-color-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.pe-color{cursor:pointer;display:inline-flex;position:relative;}
.pe-color input{height:100%;inset:0;opacity:0;position:absolute;width:100%;cursor:pointer;}
.pe-color-sw{border:2px solid rgba(255,255,255,.85);border-radius:9px;box-shadow:0 0 0 1px rgba(0,0,0,.4);display:block;height:30px;width:42px;}
.pe-recent{display:flex;flex-wrap:wrap;gap:5px;}
.pe-rc{border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;height:20px;padding:0;width:20px;}
.pe-tips{color:var(--pe-dim);font-size:12px;line-height:1.6;margin:16px 0 0;padding-left:16px;}
.pe-tips li{margin-bottom:4px;}

/* Modal */
.pe-modal-back{align-items:center;background:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;padding:16px;position:absolute;z-index:10;animation:pe-in 140ms ease-out;}
.pe-modal{background:#18181b;border:1px solid var(--pe-line2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.5);max-height:calc(100% - 32px);overflow:auto;padding:22px 22px 18px;width:min(420px,100%);-webkit-user-select:text;user-select:text;}
.pe-modal h3{font-family:var(--font-head,inherit);font-size:17px;font-weight:600;margin:0 0 14px;}
.pe-field{display:block;margin:0 0 12px;}
.pe-field > span{color:var(--pe-dim);display:block;font-family:var(--font-head,inherit);font-size:11px;font-weight:600;letter-spacing:.07em;margin-bottom:6px;text-transform:uppercase;}
.pe-field .pe-chips{margin:0;}
.pe-modal input[type=text],.pe-modal input[type=number]{background:#0f0f11;border:1px solid var(--pe-line2);border-radius:8px;color:var(--pe-text);font-family:inherit;font-size:13px;outline:none;padding:8px 10px;width:100%;}
.pe-modal input:focus{border-color:var(--pe-accent);}
.pe-inline{align-items:center;display:flex;gap:10px;}
.pe-inline input{max-width:120px;}

/* Narrower desktops: compact the top bar */
@media (max-width:1180px){
  .pe-top .pe-lbl,.pe-top .pe-lbl-long{display:none;}
  .pe-top-r .pe-btn:not(.primary){padding:0;width:36px;}
}
@media (max-width:1000px){ .pe-title{display:none;} }

/* Phones & small tablets: canvas on top, options sheet, tool bar at the bottom */
@media (max-width:860px){
  .pe-top{gap:4px;height:52px;padding:0 6px;}
  .pe-top-l{flex:0 1 auto;}
  .pe-top .pe-btn.primary{padding:0 12px;}
  .pe-top-m .pe-sep{margin:0 2px;}
  .pe-body{flex-direction:column;}
  .pe-stage{flex:1 1 auto;min-height:200px;order:1;}
  .pe-panel{border-left:0;border-top:1px solid var(--pe-line);max-height:38vh;order:2;width:auto;}
  .pe-pane{padding:12px 14px 20px;}
  .pe-rail{border-right:0;border-top:1px solid var(--pe-line);flex-direction:row;gap:2px;height:auto;order:3;overflow-x:auto;overflow-y:hidden;padding:6px;width:auto;}
  .pe-tool{min-width:64px;padding:7px 2px 6px;}
  .pe-rail-sep{height:auto;margin:8px 3px;width:1px;}
  .pe-fgrid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:520px){
  .pe-top-m [title^="Zoom"],.pe-top-m [title^="Fit"]{display:none;}
  .pe-fgrid{grid-template-columns:repeat(3,1fr);}
}
@media (prefers-reduced-motion:reduce){.pe-root,.pe-modal-back{animation:none;}}
.pe-root:focus{outline:none;}

/* Combine */
.pe-sbtn.primary{background:var(--pe-accent);border-color:var(--pe-accent);color:#fff;}
.pe-sbtn.primary:hover{background:var(--pe-accent);filter:brightness(1.1);}
.pe-sbtn:disabled{cursor:default;opacity:.4;}
.pe-layers{display:flex;flex-direction:column;gap:5px;margin:0 0 12px;}
.pe-layer{align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--pe-line);border-radius:10px;cursor:pointer;display:flex;gap:8px;padding:5px 6px 5px 5px;transition:border-color 120ms ease,background 120ms ease;}
.pe-layer:hover{border-color:rgba(255,255,255,.18);}
.pe-layer.active{background:var(--pe-accent-soft);border-color:var(--pe-accent);}
.pe-layer canvas{background:#0f0f11;border-radius:6px;flex:none;height:40px;width:40px;}
.pe-layer span{flex:1;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pe-mini{align-items:center;background:none;border:0;border-radius:6px;color:var(--pe-dim);cursor:pointer;display:inline-flex;flex:none;height:26px;justify-content:center;width:26px;}
.pe-mini:hover:not(:disabled){background:rgba(255,255,255,.08);color:#fff;}
.pe-mini:disabled{cursor:default;opacity:.25;}
.pe-btn-block{margin-top:8px;width:100%;}

/* Flash preview layers */
.pe-stage canvas.pe-fx{display:none;pointer-events:none;}
.pe-stage canvas.pe-fx-m{mix-blend-mode:multiply;}
.pe-stage canvas.pe-fx-s{mix-blend-mode:screen;}

/* Vintage */
.pe-text{background:#0f0f11;border:1px solid var(--pe-line2);border-radius:8px;color:var(--pe-text);font-family:"Courier New",ui-monospace,monospace;font-size:13px;margin:0 0 8px;outline:none;padding:7px 10px;width:100%;}
.pe-text:focus{border-color:var(--pe-accent);}

.pe-stamp-row{display:flex;gap:8px;}
.pe-stamp-row .pe-text{color-scheme:dark;font-family:var(--font-body,inherit);}
.pe-stamp-row .pe-date{flex:1.6;}
.pe-stamp-row .pe-time{flex:1;}
.pe-chips-mono .pe-chip{font-family:"Courier New",ui-monospace,monospace;font-weight:700;white-space:pre;}

/* Retouch categories */
.pe-tabs{background:rgba(255,255,255,.04);border:1px solid var(--pe-line);border-radius:10px;display:grid;gap:2px;grid-template-columns:repeat(4,1fr);padding:3px;}
.pe-tabs .pe-chip{border:0;border-radius:7px;padding:7px 4px;}
.pe-tabs .pe-chip.active{background:var(--pe-accent-soft);}
.pe-mode-hint{margin:-4px 0 12px;min-height:2.6em;}