.canvas-overlay-mask-root {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.canvas-overlay-mask-root.is-interactive {
  pointer-events: auto;
}

.canvas-overlay-mask-layer {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  cursor: move;
}

.canvas-overlay-mask-visual {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.canvas-overlay-mask-root:not(.is-interactive) .canvas-overlay-mask-layer {
  cursor: default;
  pointer-events: none;
}

.canvas-overlay-mask-transform {
  position: absolute;
  inset: 0;
  border: 1px solid #00afe9;
  border-radius: inherit;
  box-sizing: border-box;
  filter: none;
  pointer-events: none;
}

.canvas-overlay-mask-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #00afe9;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  pointer-events: auto;
}

.canvas-overlay-mask-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; transform: translate(-50%, -50%); }
.canvas-overlay-mask-handle.is-n { left: 50%; top: 0; cursor: ns-resize; transform: translate(-50%, -50%); }
.canvas-overlay-mask-handle.is-ne { right: 0; top: 0; cursor: nesw-resize; transform: translate(50%, -50%); }
.canvas-overlay-mask-handle.is-e { right: 0; top: 50%; cursor: ew-resize; transform: translate(50%, -50%); }
.canvas-overlay-mask-handle.is-se { right: 0; bottom: 0; cursor: nwse-resize; transform: translate(50%, 50%); }
.canvas-overlay-mask-handle.is-s { left: 50%; bottom: 0; cursor: ns-resize; transform: translate(-50%, 50%); }
.canvas-overlay-mask-handle.is-sw { left: 0; bottom: 0; cursor: nesw-resize; transform: translate(-50%, 50%); }
.canvas-overlay-mask-handle.is-w { left: 0; top: 50%; cursor: ew-resize; transform: translate(-50%, -50%); }

.workbench-side.is-overlay-mask-editing > :not(.canvas-overlay-mask-inspector) {
  display: none !important;
}

.canvas-overlay-mask-inspector {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(33 43 67 / 8%);
}

.canvas-overlay-mask-inspector-actions {
  display: flex;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8edf5;
}

.canvas-overlay-mask-inspector-actions button {
  width: 44px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  color: #344054;
  background: #fff;
  font-size: 22px;
}

.canvas-overlay-mask-inspector-actions svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.canvas-overlay-mask-section {
  padding: 18px 0;
  border-bottom: 1px solid #e8edf5;
}

.canvas-overlay-mask-section:last-child { border-bottom: 0; }

.canvas-overlay-mask-section h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 15px;
  line-height: 22px;
}

.canvas-overlay-mask-choice-grid {
  display: grid;
  gap: 8px;
}

.canvas-overlay-mask-choice-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.canvas-overlay-mask-choice-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.canvas-overlay-mask-choice-grid button,
.canvas-overlay-mask-color-row input,
.canvas-overlay-mask-number-list input {
  min-width: 0;
  height: 40px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  color: #344054;
  background: #fff;
  font: inherit;
  text-align: center;
}

.canvas-overlay-mask-choice-grid button.is-active {
  border-color: #00afe9;
  color: #009ed3;
  background: #e9f9fe;
}

.canvas-overlay-mask-color-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
}

.canvas-overlay-mask-color-swatch {
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #dce4ef;
  border-radius: 8px;
}

.canvas-overlay-mask-color-swatch input {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 0;
}

.canvas-overlay-mask-number-list {
  display: grid;
  gap: 10px;
}

.canvas-overlay-mask-number-list label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
  color: #344054;
  font-size: 14px;
}

.canvas-overlay-mask-inspector button:disabled,
.canvas-overlay-mask-inspector input:disabled {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
  opacity: .8;
}

@media (max-width: 980px) {
  .canvas-overlay-mask-choice-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}