/* ════ Mask Editor Modal — Canva-style popup ════
   .mask-modal is now a dimmed backdrop that centers .mask-popup, instead of
   taking over the full viewport with the brush UI. The popup is sized to a
   max of 1200x800px and shrinks responsively. */
.mask-modal{position:fixed;inset:0;z-index:9999;background:rgba(4,8,20,.6);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.mask-modal.open{display:flex}
.mask-popup{
  display:flex;
  flex-direction:row;
  width:90%;
  height:85%;
  max-width:1200px;
  max-height:800px;
  background:var(--n-bg);
  border:1px solid var(--n-border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}

/* ── Sidebar Panel ── */
.mask-sidebar{width:200px;flex-shrink:0;background:var(--n-bg-card);border-right:1px solid var(--n-border);display:flex;flex-direction:column;padding:0;overflow:hidden}
.mask-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--n-border)}
.mask-sidebar-title{font-size:13px;font-weight:600;color:var(--n-text)}
.mask-close-btn{background:none;border:none;color:var(--n-text-dim);font-size:20px;cursor:pointer;padding:0;line-height:1;transition:color .15s}
.mask-close-btn:hover{color:var(--n-text)}

.mask-sidebar-section{padding:14px 16px;border-bottom:1px solid var(--n-border-subtle,rgba(255,255,255,.06))}
.mask-label{display:block;font-size:10px;font-weight:500;color:var(--n-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}

/* Mode toggle (Erase / Restore) */
.mask-mode-toggle{display:flex;gap:0;border-radius:var(--n-radius-sm);overflow:hidden;border:1px solid var(--n-border)}
.mask-mode-btn{flex:1;background:var(--n-bg-elevated);border:none;color:var(--n-text-dim);font-size:11px;padding:7px 0;cursor:pointer;font-family:inherit;transition:all .2s;font-weight:500}
.mask-mode-btn:first-child{border-right:1px solid var(--n-border)}
.mask-mode-btn:hover{background:var(--n-bg-hover);color:var(--n-text)}
.mask-mode-btn.active{background:var(--n-primary);color:#fff;border-color:var(--n-primary)}

/* Brush size */
.mask-size-row{display:flex;align-items:center;gap:8px}
.mask-size-row input[type="range"]{flex:1;height:3px;accent-color:var(--n-primary);cursor:pointer}
.mask-size-num{width:42px;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);color:var(--n-text);font-size:11px;padding:4px 6px;text-align:center;font-family:inherit}
.mask-size-num:focus{border-color:var(--n-primary);outline:none}

/* Show original toggle switch */
.mask-toggle-wrap{display:flex;align-items:center;cursor:pointer}
.mask-toggle-wrap input{display:none}
.mask-toggle-track{position:relative;width:36px;height:20px;background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:10px;transition:all .2s}
.mask-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--n-text-dim);border-radius:50%;transition:all .2s}
.mask-toggle-wrap input:checked+.mask-toggle-track{background:var(--n-primary);border-color:var(--n-primary)}
.mask-toggle-wrap input:checked+.mask-toggle-track .mask-toggle-thumb{left:18px;background:#fff}

/* Zoom */
.mask-zoom-row{display:flex;align-items:center;gap:6px}
.mask-zbtn{background:var(--n-bg-elevated);border:1px solid var(--n-border);color:var(--n-text);font-size:12px;width:28px;height:28px;border-radius:var(--n-radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .15s;padding:0}
.mask-zbtn:hover{background:var(--n-bg-hover);border-color:var(--n-border-hover)}
.mask-zoom-val{font-size:11px;color:var(--n-text-dim);min-width:36px;text-align:center}

/* Bottom actions */
.mask-sidebar-actions{margin-top:auto;padding:16px;display:flex;gap:8px;border-top:1px solid var(--n-border)}
.mask-action-btn{flex:1;padding:9px 0;border-radius:var(--n-radius-sm);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--n-border);transition:all .2s}
.mask-action-btn.secondary{background:var(--n-bg-elevated);color:var(--n-text)}
.mask-action-btn.secondary:hover{background:var(--n-bg-hover)}
.mask-action-btn.primary{background:var(--n-primary);border-color:var(--n-primary);color:#fff}
.mask-action-btn.primary:hover{background:var(--n-primary-hover);box-shadow:0 0 12px var(--n-primary-glow)}

/* ── Canvas Area ── */
.mask-canvas-wrap{position:relative;flex:1;overflow:hidden;cursor:none;display:flex;align-items:center;justify-content:center;background:#1a1a2e}
.mask-canvas-wrap canvas{display:block}