.side-panels .reference-layer-controls.animation-layer-controls {
  grid-column: 2; grid-row: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.animation-offset-field { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 11px; }
.animation-offset-field .reference-offset-input { min-width: 0; }
.animation-layer-item { touch-action: pan-y; margin-left: calc(var(--animation-layer-depth, 0) * 14px); }
.side-panels .reference-layer-item.animation-group-item { border-color: rgba(102,213,151,.8); }
.side-panels .reference-layer-item.animation-group-item.active { border-color: #7bdfa7; background: rgba(102,213,151,.12); box-shadow: 0 0 0 1px rgba(102,213,151,.22); }
.animation-group-item .animation-layer-name { position: relative; padding-left: 22px; }
.animation-group-arrow { position: absolute; left: 7px; color: #9be7b9; }
.animation-inherited-hidden { opacity: .6; }
.animation-layer-add-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.animation-layer-add-actions button { width: 100%; min-width: 0; min-height: 38px; white-space: nowrap; }
.side-panels .reference-layer-item.animation-layer-item {
  width: calc(100% - var(--animation-layer-depth, 0) * 14px);
  grid-template-columns: 26px minmax(0, 1fr) 32px; grid-template-rows: 32px 32px;
  gap: 6px; min-height: 86px; align-items: stretch;
}
.animation-layer-actions, .animation-layer-flips { grid-row: 1 / 3; display: grid; grid-template-rows: 32px 32px; gap: 6px; align-items: center; }
.animation-layer-actions { grid-column: 1; }
.animation-layer-flips { grid-column: 3; }
.side-panels .animation-layer-actions .lock-button { width: 26px; min-width: 26px; height: 32px; min-height: 32px; justify-self: center; }
.side-panels .animation-layer-item .reference-flip-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
.animation-layer-heading { grid-column: 2; grid-row: 1; display: flex; gap: 6px; margin-left: 16px; min-width: 0; }
.side-panels .animation-layer-item .animation-layer-name,
.side-panels .animation-layer-item .animation-layer-rename-input {
  flex: 1 1 0; min-width: 0;
  height: 32px; min-height: 32px; padding: 0 8px; align-self: stretch;
}
.animation-layer-name { cursor: grab; user-select: none; touch-action: none; }
.animation-layer-item.dragging-animation { opacity: .45; }
.animation-layer-item.animation-drop-before { box-shadow: 0 -3px 0 var(--accent); }
.animation-layer-item.animation-drop-after { box-shadow: 0 3px 0 var(--accent); }
.animation-layer-item.animation-drop-inside { box-shadow: inset 0 0 0 2px #7bdfa7; }
.animation-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-bottom: 12px; }
.side-panels .animation-tools .tool-icon-button { width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; }
.animation-tools .tool-button.active { color: #071018; background: var(--warning); border-color: transparent; }
.animation-selection-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.animation-selection-actions .small-button { flex: 1; }
.side-panels #animationColorStrip { flex: 0 0 auto; display: flex; gap: 6px; padding: 0; }
.side-panels #animationColorStrip .swatch-button { width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; }
.side-panels #animationColorStrip .swatch-chip { width: 22px; height: 22px; }
.animation-group [hidden] { display: none !important; }
.animation-clipboard-button .tool-icon-image { width: 16px; height: 16px; }
.canvas-shell.animation-move-cursor,
.canvas-shell.animation-move-cursor.dragging { cursor: move; }
.canvas-shell.animation-lasso-cursor,
.canvas-shell.animation-lasso-cursor.dragging { cursor: url('icons/cursor-lasso.svg') 7 23, crosshair; }
.canvas-shell.animation-rectangle-cursor,
.canvas-shell.animation-rectangle-cursor.dragging { cursor: crosshair; }
.canvas-shell.animation-dropper-cursor { cursor: url('icons/cursor-dropper.svg') 3 28, crosshair; }
.canvas-shell.animation-selection-moving.dragging { cursor: move; }
.canvas-shell.panning.dragging { cursor: grabbing; }
.canvas-shell > canvas.animation-selection-overlay {
  position: absolute; inset: 0; z-index: 320; display: none;
  width: 100%; height: 100%; max-width: none; max-height: none;
  pointer-events: none; background: transparent; image-rendering: pixelated; transform: none;
}