/* Canvas TapNow theme - annotation, layer split, eraser, and outpaint visual states. */

/* Annotation, layer split, eraser, and outpaint visual states */
.canvas-page .canvas-annotation-node.selected::before {
  border-color: rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.canvas-page .canvas-annotation-toolbar select,
.canvas-page .canvas-annotation-toolbar input,
.canvas-page .canvas-annotation-toolbar button,
.canvas-page .canvas-annotation-size-control,
.canvas-page .canvas-annotation-align {
  border-color: rgba(255, 255, 255, 0.1);
  background: #262626;
  color: var(--canvas-text-soft);
}

.canvas-page .canvas-annotation-size-control button:hover,
.canvas-page .canvas-annotation-icon-button:hover,
.canvas-page .canvas-annotation-color-trigger:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--canvas-text);
}

.canvas-page .canvas-annotation-icon-button.is-active {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.1);
  color: var(--canvas-text);
}

.canvas-page .canvas-layer-split-media,
.canvas-page .canvas-node.is-layer-split-placeholder,
.canvas-page .canvas-node.is-layer-split-placeholder .canvas-asset-task-placeholder {
  border-color: rgba(255, 255, 255, 0.2);
  background: #0f0f0f;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

.canvas-page .canvas-layer-split-role {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(38, 38, 38, 0.86);
  color: var(--canvas-text);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.canvas-page .canvas-node.is-layer-split-placeholder .canvas-strands-label {
  color: var(--canvas-text-soft);
}

.canvas-page .canvas-image-eraser-canvas {
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.canvas-page .canvas-image-eraser-tools input[type="range"] {
  accent-color: var(--canvas-accent);
}

.canvas-page .canvas-image-outpaint-frame {
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.72);
}

.canvas-page .canvas-image-outpaint-original {
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.42);
}

.canvas-page .canvas-image-outpaint-pad {
  background-color: rgba(255, 255, 255, 0.09);
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.24) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0, 0, 0, 0.24) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.24) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.24) 75%);
}

.canvas-page .canvas-image-outpaint-handle {
  border-color: rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: #262626;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

.canvas-page .canvas-image-outpaint-layer.is-left-max .canvas-image-outpaint-handle.is-left,
.canvas-page .canvas-image-outpaint-layer.is-top-max .canvas-image-outpaint-handle.is-top,
.canvas-page .canvas-image-outpaint-layer.is-right-max .canvas-image-outpaint-handle.is-right,
.canvas-page .canvas-image-outpaint-layer.is-bottom-max .canvas-image-outpaint-handle.is-bottom {
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1), 0 8px 18px rgba(0, 0, 0, 0.32);
}

.canvas-page .canvas-image-outpaint-main b {
  background: rgba(255, 255, 255, 0.1);
  color: #d4d4d4;
}