.footprint-region-card {
  display: grid;
  gap: 12px;
}

.footprint-region-card h3,
.footprint-region-card p {
  margin: 0;
}

.footprint-region-note {
  color: #5b6b68;
  font-size: 0.84rem;
  line-height: 1.45;
}

.footprint-region-summary {
  display: grid;
  gap: 6px;
}

.footprint-region-summary:empty {
  display: none;
}

.footprint-region-summary-row {
  align-items: center;
  background: #f1f7f5;
  border: 1px solid rgba(22, 93, 85, 0.14);
  border-radius: 8px;
  display: flex;
  font-size: 0.8rem;
  font-weight: 750;
  justify-content: space-between;
  padding: 7px 9px;
}

.footprint-region-summary-heading {
  align-items: baseline;
  color: #183153;
  display: flex;
  font-size: 0.8rem;
  justify-content: space-between;
  margin-top: 4px;
}

.footprint-region-summary-heading span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footprint-canvas-tool.footprint-tool-divider .footprint-tool-icon svg {
  color: #2563eb;
}

.footprint-canvas-tool.footprint-tool-divider.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.footprint-canvas-tool.footprint-tool-custom-label .footprint-tool-icon svg {
  color: #7c3aed;
}

.footprint-canvas-tool.footprint-tool-custom-label.active {
  background: #f5f3ff;
  border-color: #8b5cf6;
  color: #6d28d9;
}

.footprint-svg.is-divider-mode {
  cursor: crosshair;
}

.footprint-area-divider {
  cursor: pointer;
  fill: none;
  stroke: #2563eb;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
  stroke-width: 3;
}

.footprint-area-divider.selected {
  stroke: #1d4ed8;
  stroke-dasharray: none;
  stroke-width: 5;
}

.footprint-area-divider.invalid {
  stroke: #dc2626;
}

.footprint-area-divider-hit {
  cursor: pointer;
  fill: none;
  stroke: transparent;
  stroke-width: 18;
}

.footprint-area-divider-preview {
  fill: none;
  stroke: #3b82f6;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  stroke-width: 3;
}

.footprint-area-divider-anchor {
  fill: #ffffff;
  stroke: #2563eb;
  stroke-width: 3;
}

.footprint-region-label rect {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.footprint-region-label {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.footprint-region-label.is-dragging {
  cursor: grabbing;
}

.footprint-region-label text {
  fill: #183153;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.footprint-region-label .footprint-region-label-title {
  fill: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.footprint-custom-label {
  cursor: pointer;
}

.footprint-custom-label rect {
  fill: rgba(255, 255, 255, 0.97);
  stroke: rgba(124, 58, 237, 0.5);
  stroke-width: 1.5;
}

.footprint-custom-label text {
  fill: #5b21b6;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
}

.footprint-dimension-label-connector {
  stroke: rgba(37, 99, 235, 0.55);
  stroke-dasharray: 3 3;
  stroke-width: 1.2;
}

.footprint-sketch-dimension-label-connector {
  stroke: rgba(15, 118, 110, 0.82);
  stroke-dasharray: 4 3;
  stroke-width: 1.6;
}

.footprint-draggable-dimension-label {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.footprint-draggable-dimension-label.is-dragging {
  cursor: grabbing;
}

.footprint-movable-label {
  cursor: grab !important;
  touch-action: none;
  user-select: none;
}

.footprint-movable-label.is-dragging {
  cursor: grabbing !important;
}

.footprint-deduction-area-label {
  pointer-events: all;
}