.pzc-wrapper { max-width: 320px; margin: 10px auto; font-family: inherit; user-select: none; }
body.pzc-dragging { user-select: none !important; -webkit-user-select: none !important; }
.pzc-stage { position: relative; width: 320px; height: 160px; max-width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; background: #f1f3f5; }
.pzc-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pzc-piece { position: absolute; top: 0; left: 0; width: 44px; height: 44px; user-select: none; -webkit-user-drag: none; touch-action: none; cursor: grab; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.pzc-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); font-size: 13px; color: #555; }
.pzc-track { position: relative; height: 40px; margin-top: 8px; background: #e9ecef; border-radius: 20px; border: 1px solid #dee2e6; overflow: hidden; }
.pzc-track-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #d1e7ff; }
.pzc-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #6c757d; pointer-events: none; }
.pzc-handle { position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: #132798; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 2; touch-action: none; }
.pzc-handle:active, .pzc-piece:active { cursor: grabbing; }
.pzc-track.pzc-ok .pzc-track-fill { background: #d4edda; }
.pzc-track.pzc-ok .pzc-handle { background: #28a745; }
.pzc-track.pzc-ko .pzc-handle { background: #dc3545; }