.sticker-surface { pointer-events: none; }
.surface-sticker { --placement-rotation: var(--sticker-turn); position: absolute; display: block; width: var(--sticker-width); height: var(--sticker-height); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--sticker-turn)); }
.surface-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 2px 1px #0007); pointer-events: none; }
.surface-sticker img.is-negative { filter: invert(1) drop-shadow(1px 2px 1px #0007); }
.surface-sticker-face { position: relative; display: block; width: 100%; height: 100%; }
.surface-sticker-face > .object-finishes { -webkit-mask: var(--picture-mask) center / contain no-repeat; mask: var(--picture-mask) center / contain no-repeat; }
.sticker-surface .surface-sticker > a { display: block; width: 100%; height: 100%; pointer-events: auto; }
.sticker-surface .surface-sticker > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none; touch-action: none; pointer-events: auto; cursor: grab; }
.sticker-surface.is-editing .surface-sticker.is-active { z-index: 1; }
.sticker-surface.is-editing .surface-sticker.is-active > [data-sticker-move], .surface-sticker > [data-sticker-move]:focus-visible { outline: 2px dashed #b77ae8; outline-offset: 4px; }
.sticker-surface [hidden], .sticker-editor [hidden] { display: none !important; }
.sticker-editor { padding-top: 20px; margin-top: 20px; border-top: 1px solid #dacfe3; min-width: 0; }
.sticker-editor > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sticker-editor header strong { font-size: 1.12rem; }
.sticker-editor header p { font-size: .83rem; color: #85738f; margin: 7px 0; }
.sticker-editor button { font: inherit; }
.sticker-tools { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 1px solid #e4dce9; }
.sticker-tools > span { font-size: .85rem; color: #776380; font-weight: 700; }
.sticker-tools > div { display: flex; align-items: center; gap: 10px; }
.sticker-tools output { min-width: 3.6em; padding: 6px 0; color: #704794; font: 750 .82rem ui-monospace, monospace; }
.sticker-tools button { padding: 6px 10px; font-size: .75rem; }
.sticker-tools small { color: #887395; font-size: .72rem; }
/* The stickers to pick from are the universal card picker (collection-workspace.css), under the tools. */
.sticker-editor [data-sticker-workspace] { display: flex; flex-direction: column; min-height: 0; }
.sticker-editor [data-sticker-palette] { display: flex; flex-direction: column; min-height: 0; padding-top: 14px; }
.sticker-editor .picker-grid .picker-card { touch-action: none; cursor: grab; }
.sticker-editor footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 18px; font-size: .8rem; }
.sticker-editor footer > div { display: flex; gap: 8px; }
.sticker-editor [data-sticker-save] { background: #ffd166; }
.sticker-editor [data-sticker-status] { color: #a43766; font-size: .8rem; }
.sticker-editor [data-sticker-status]:empty { display: none; }
@media (max-width: 760px) {
    .sticker-tools { padding: 9px 0; gap: 8px; }
    .sticker-editor footer { margin-top: 12px; }
}
@media (pointer: coarse) { .sticker-editor .picker-grid .picker-card { touch-action: pan-y; cursor: pointer; } }