.stage-canvas-shell,
.stage-view {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.stage-canvas-shell {
  position: relative;
  overflow: hidden;
  background: var(--md-background);
}

.stage-view {
  position: absolute;
  inset: 0;
}

.stage-view-3d {
  background: var(--md-surface-container-low);
}

.stage-view-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

.workbench-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
  touch-action: none;
  user-select: none;
}

.workbench-svg.is-panning {
  cursor: grabbing;
}

.workspace-bg {
  fill: var(--md-background);
}

.grid-minor {
  fill: none;
  stroke: color-mix(in srgb, var(--md-outline-variant) 58%, transparent);
  stroke-width: 0.75;
}

.grid-major {
  fill: none;
  stroke: color-mix(in srgb, var(--md-outline) 38%, transparent);
  stroke-width: 1;
}

.cs-component {
  cursor: grab;
  outline: none;
}

.cs-component:active {
  cursor: grabbing;
}

.cs-component:focus-visible .component-selection-outline {
  stroke-width: 2.5;
}

.component-label {
  fill: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.component-selection-outline {
  fill: none;
  stroke: var(--md-primary);
  stroke-width: 2;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.selection-handle {
  fill: var(--md-surface-container-lowest);
  stroke: var(--md-primary);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.component-name-chip {
  vector-effect: non-scaling-stroke;
}

.cs-pin {
  cursor: crosshair;
  outline: none;
}

.pin-hit-area {
  pointer-events: all;
}

.pin-visual {
  transition: fill var(--md-transition), stroke var(--md-transition), r var(--md-transition);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.cs-pin:hover .pin-visual,
.cs-pin:focus .pin-visual,
.cs-pin.is-wire-start .pin-visual {
  fill: #ffd166;
  stroke: var(--md-primary);
  stroke-width: 2;
}

.cs-pin.breadboard-hole:hover .pin-visual,
.cs-pin.breadboard-hole:focus .pin-visual,
.cs-pin.breadboard-hole.is-wire-start .pin-visual {
  fill: color-mix(in srgb, var(--md-primary) 26%, transparent);
  stroke: var(--md-primary);
  stroke-width: 1.5;
}

.pin-label {
  fill: var(--md-on-surface-variant);
  font-family: var(--md-font);
  font-size: 6px;
  font-weight: 600;
  pointer-events: none;
}

.wire-path,
.wire-shadow,
.wire-hit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wire-shadow {
  stroke: color-mix(in srgb, var(--md-on-surface) 24%, transparent);
  pointer-events: none;
}

.wire-path {
  cursor: pointer;
  pointer-events: none;
}

.wire-path.is-selected {
  stroke-width: 4.5 !important;
}

.wire-hit {
  stroke: transparent;
  cursor: pointer;
}

.preview-wire {
  fill: none;
  stroke: var(--md-primary);
  stroke-width: 3;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.stage-floating-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  padding: 4px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-xl);
  background: var(--md-surface-container-lowest);
}

.stage-tool {
  width: 36px;
  height: 36px;
}

.stage-status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-full);
  background: var(--md-surface-container-lowest);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.stage-status .material-symbols-rounded {
  color: var(--md-primary);
  font-size: 17px;
}

.scene-selection-label {
  position: absolute;
  z-index: 10;
  max-width: 220px;
  padding: 6px 10px;
  color: var(--md-inverse-on-surface);
  border-radius: var(--md-radius-full);
  background: var(--md-inverse-surface);
  font: 600 10px/1.3 var(--md-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.scene-pin-label {
  position: absolute;
  z-index: 11;
  max-width: 260px;
  padding: 5px 8px;
  color: var(--md-on-primary-container);
  border: 1px solid color-mix(in srgb, var(--md-primary) 30%, transparent);
  border-radius: var(--md-radius-small);
  background: color-mix(in srgb, var(--md-primary-container) 92%, transparent);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  font: 600 10px/1.3 var(--md-font);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.component-led-glow {
  transition: opacity 100ms linear;
}

.cs-pin.breadboard-hole.is-tie-related .pin-visual,
.cs-pin.breadboard-hole.is-tie-hover .pin-visual {
  fill: rgba(36, 174, 74, 0.16);
  stroke: #24ae4a;
  stroke-width: 1.35;
}

.cs-pin.breadboard-hole.is-wire-start .pin-visual {
  fill: var(--md-primary);
  stroke: var(--md-on-primary);
  stroke-width: 1.6;
}

.component-artwork {
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.14));
}

.wire-shadow,
.wire-path,
.wire-highlight {
  vector-effect: non-scaling-stroke;
}

.wire-path {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.16));
}

.wire-path.is-selected {
  stroke-width: 6.5 !important;
}

.wire-highlight {
  opacity: 0.78;
}

.preview-wire {
  filter: drop-shadow(0 2px 2px rgba(0, 74, 198, 0.2));
}

.workbench-pin-tooltip {
  position: absolute;
  z-index: 24;
  max-width: 280px;
  padding: 7px 10px;
  color: var(--md-inverse-on-surface);
  border-radius: var(--md-radius-full);
  background: var(--md-inverse-surface);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  font: 600 11px/1.35 var(--md-font);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.breadboard-snap-guide {
  vector-effect: non-scaling-stroke;
  animation: snapPulse 700ms ease-in-out infinite alternate;
}

@keyframes snapPulse {
  from { opacity: 0.5; transform-origin: center; }
  to { opacity: 1; }
}

.cs-pin.breadboard-hole .pin-hit-area {
  r: 6.4px;
}

.cs-pin.breadboard-hole:hover .pin-visual {
  fill: rgba(11, 108, 255, 0.2);
  stroke: #0b6cff;
  stroke-width: 1.5;
}