.label-peel { position:relative; width:100%; color:#102b50; min-width:0; }
.label-peel__variants { display:flex; gap:8px; margin:0 0 12px; }
.label-peel .label-peel__variants button { flex:1 1 0; min-width:0; padding:10px 8px; min-height:44px; font-weight:500; }
.label-peel .label-peel__variants button[aria-pressed=true] { color:#fff; background:#102b50; border-color:#102b50; }
.label-peel__shape { display:inline-block; width:16px; height:16px; flex:none; background:currentColor; opacity:.8; }
.label-peel__shape--square { border-radius:2px; }
.label-peel__shape--round { border-radius:50%; }
.label-peel__shape--irregular { clip-path:polygon(50% 0,65% 10%,84% 8%,88% 27%,100% 40%,90% 61%,90% 78%,69% 86%,50% 100%,31% 86%,10% 78%,10% 61%,0 40%,12% 27%,16% 8%,35% 10%); }
.label-peel__status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.label-peel__stage { position:relative; width:100%; aspect-ratio:1.04; min-height:360px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 48%,#f6f9fd,#edf3fa 62%,#fff 95%); border-radius:18px; }
.label-peel__stage canvas { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; touch-action:pan-y; transition:opacity .18s; }
.label-peel.is-ready .label-peel__stage canvas { opacity:1; cursor:grab; }
.label-peel.is-dragging .label-peel__stage canvas { cursor:grabbing; }
.label-peel__fallback { position:absolute; width:64%; height:64%; left:18%; top:18%; object-fit:contain; filter:drop-shadow(0 18px 14px #17324a28); }
.label-peel.is-ready .label-peel__fallback { opacity:0; pointer-events:none; }
.label-peel__material { position:absolute; left:47%; top:85%; opacity:0; transform:translateY(4px); transition:opacity .3s,transform .3s; pointer-events:none; font-size:.75rem; line-height:1.4; color:#536b85; }
.label-peel.is-peeled .label-peel__material { opacity:1; transform:none; }
.label-peel button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid #bdcde1; border-radius:6px; padding:12px 16px; min-height:46px; background:#fff; color:#102b50; font:inherit; font-weight:600; font-size:.875rem; line-height:1.4; cursor:pointer; transition:background .2s,border-color .2s; }
.label-peel button:hover,.label-peel button[aria-pressed=true] { background:#eaf1fb; border-color:#91add0; }
.label-peel :focus-visible { outline:3px solid #195bd7; outline-offset:3px; }
.label-peel__error { position:absolute; bottom:15px; left:15px; right:15px; padding:16px; background:#fffffff2; text-align:center; border:1px solid #d9e3ef; border-radius:8px; }
.label-peel__error[hidden] { display:none; }
.label-peel__error p { font-size:.875rem; margin:0 0 8px; }
@media (max-width:540px) {
  .label-peel__stage { aspect-ratio:.91; min-height:310px; border-radius:12px; }
  .label-peel__material { left:47%; top:85%; }
}
@media (max-width:350px) { .label-peel__stage { min-height:275px; } .label-peel__shape { display:none; } .label-peel__variants { gap:5px; } }
@media (prefers-reduced-motion:reduce) { .label-peel * { transition:none !important; } }