/* Badge module (v1.11.0) -- designer canvas, selection handles, small avatars. */
.bd-canvas-area { background: #e9edf3; border-radius: .5rem; padding: 20px; overflow: auto; min-height: 320px; }
.bd-stage { position: relative; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.bd-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(13,110,253,.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(13,110,253,.22) 1px, transparent 1px); }
.bd-sel { position: absolute; border: 1.5px solid #0d6efd; cursor: move; box-sizing: border-box; display: none; }
.bd-h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid #0d6efd; box-sizing: border-box; margin: -5px 0 0 -5px; }
.bd-h-nw { left: 0; top: 0; cursor: nwse-resize; } .bd-h-n { left: 50%; top: 0; cursor: ns-resize; }
.bd-h-ne { left: 100%; top: 0; cursor: nesw-resize; } .bd-h-e { left: 100%; top: 50%; cursor: ew-resize; }
.bd-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .bd-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.bd-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .bd-h-w { left: 0; top: 50%; cursor: ew-resize; }
#bd-layers { max-height: 200px; overflow: auto; }
.bd-props-row { margin-bottom: .5rem; }
.bd-props-row label { font-size: .75rem; color: #6b7280; margin-bottom: 0; }
.badge-avatar { width: 32px; height: 42px; object-fit: cover; border-radius: 4px; background: #e5e7eb; display: inline-block; vertical-align: middle; }
.badge-avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #e5e7eb; vertical-align: middle; }
.badge-photo-frame { width: 180px; aspect-ratio: 3 / 4; background: #e5e7eb; border-radius: .5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.badge-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
#ph-canvas { width: 300px; height: 400px; max-width: 100%; touch-action: none; cursor: grab; background: #fff; border: 1px solid #ccc; border-radius: .25rem; }
#ph-video { width: 100%; max-width: 480px; background: #000; border-radius: .25rem; }
.badge-preview-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }