.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }

        .material-symbols-outlined[data-weight="fill"] {
            font-variation-settings: 'FILL' 1;
        }

        .hover\:shadow-bloom:hover {
            box-shadow: 0 10px 40px -10px rgba(28, 28, 26, 0.25);
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .canvas-bg {
            background-color: theme('colors.surface-container-lowest');
            background-image:
                linear-gradient(theme('colors.surface-container-high') 1px, transparent 1px),
                linear-gradient(90deg, theme('colors.surface-container-high') 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .shadow-ambient {
            box-shadow: 0 10px 30px rgba(26, 28, 30, 0.15);
        }

        .size-card {
            flex-shrink: 0;
        }

        #size-cards-container {
            contain: layout;
        }

        #paper-workspace {
            min-width: fit-content;
            min-height: fit-content;
        }

        /* Print media */
        @media print {
            @page {
                margin: 0mm;
            }

            body {
                margin: 0 !important;
                padding: 0 !important;
                background: white !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            body * {
                visibility: hidden !important;
            }

            #step-print,
            #step-print>div,
            #paper-workspace {
                display: block !important;
                position: static !important;
                margin: 0 !important;
                padding: 0 !important;
                transform: none !important;
                width: auto !important;
                height: auto !important;
            }

            #paper-canvas,
            #paper-canvas * {
                visibility: visible !important;
            }

            #paper-canvas {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                transform: none !important;
                box-shadow: none !important;
                border: none !important;
                background: white !important;
                overflow: hidden !important;
            }

            #print-sidebar,
            #print-header,
            .photo-controls,
            .snap-guide,
            .snap-guide-v,
            .snap-guide-h,
            nav,
            aside {
                display: none !important;
                visibility: hidden !important;
            }

            #paper-canvas .draggable-photo.selected {
                outline: none !important;
            }

            #paper-canvas .draggable-photo {
                box-shadow: inherit;
            }
        }

        /* Draggable photos on print canvas */
        .draggable-photo {
            position: absolute;
            cursor: grab;
            user-select: none;
            box-sizing: content-box !important;
            background: white;
            transform-origin: center center;
        }

        #paper-canvas .draggable-photo {
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 2.5px rgba(0, 0, 0, 0.15);
        }

        .draggable-photo:active {
            cursor: grabbing;
        }

        .draggable-photo.selected {
            outline: 2px dashed #136dec;
        }

        .photo-controls {
            display: none;
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            padding: 4px;
            border-radius: 8px;
            gap: 4px;
            z-index: 50;
        }

        .draggable-photo.selected .photo-controls {
            display: flex;
        }

        .snap-guide {
            position: absolute;
            background-color: #136dec;
            opacity: 0.6;
            z-index: 40;
            pointer-events: none;
            display: none;
        }

        .snap-guide-v {
            width: 1px;
            height: 100%;
            top: 0;
        }

        .snap-guide-h {
            height: 1px;
            width: 100%;
            left: 0;
        }

        /* Crop confirmation */
        .crop-thumbnail {
            position: relative;
            border-radius: 8px;
            overflow: visible;
            transition: transform 0.15s ease;
        }

        .crop-thumbnail:hover {
            transform: scale(1.05);
        }

        .crop-thumbnail .crop-delete-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ef4444;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.15s ease;
            border: 1.5px solid white;
            z-index: 2;
            line-height: 1;
        }

        .crop-thumbnail:hover .crop-delete-btn {
            opacity: 1;
        }

        @keyframes confirmPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 1, 1, 0.4);
            }

            70% {
                box-shadow: 0 0 0 8px rgba(0, 1, 1, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 1, 1, 0);
            }
        }

        .confirm-pulse {
            animation: confirmPulse 1.5s ease-out infinite;
        }

        @keyframes cropAdded {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }

            60% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .crop-thumb-enter {
            animation: cropAdded 0.3s ease-out forwards;
        }

        /* Preloader */
        #preloader {
            position: fixed;
            inset: 0;
            background: #17212f;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        #preloader svg {
            width: 150px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 0 40px #090d13;
        }
        
        /* Gaya untuk kotak seleksi multi-drag */
.selection-box {
    position: absolute;
    border: 1px dashed #136dec;
    background: rgba(19, 109, 236, 0.15);
    pointer-events: none; /* Agar tidak memblokir event kursor */
    z-index: 999;
}