@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        :root {
            --sat: env(safe-area-inset-top, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
        }

        html, body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            min-height: 100dvh;
            background-color: #f1f5f9;
        }

        body {
            padding-top: var(--sat);
            padding-bottom: calc(5rem + var(--sab));
        }
        
        nav {
            padding-bottom: var(--sab);
        }

        /* KHUSUS iOS SAFARI: Mencegah Auto Zoom saat input di-tap */
        @supports (-webkit-touch-callout: none) {
            input[type="text"],
            input[type="number"],
            select,
            textarea {
                font-size: 16px !important;
            }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Smooth iOS Touch Scrolling */
        .overflow-y-auto, .overflow-x-auto {
            -webkit-overflow-scrolling: touch;
        }
        
        @media print {
            @page {
                size: portrait;
                margin: 8mm;
            }
            html, body {
                background: #ffffff !important;
                margin: 0 !important;
                padding: 0 !important;
                height: auto !important;
                overflow: visible !important;
            }
            body > header,
            body > main,
            body > nav,
            #toast,
            .no-print {
                display: none !important;
            }
            #qrModal {
                display: block !important;
                position: relative !important;
                inset: auto !important;
                left: 0 !important;
                top: 0 !important;
                width: 100% !important;
                height: auto !important;
                background: transparent !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                backdrop-filter: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            #qrModal > div {
                max-width: 95mm !important;
                width: 95mm !important;
                margin: 0 auto !important;
                box-shadow: none !important;
                border: none !important;
                transform: none !important;
                max-height: none !important;
                border-radius: 0 !important;
                background: transparent !important;
                padding: 0 !important;
                overflow: visible !important;
            }
            #printableStickerArea {
                visibility: visible !important;
                display: block !important;
                margin: 0 auto !important;
                width: 100% !important;
                border: 2px solid #0f172a !important;
                border-radius: 16px !important;
                padding: 14px !important;
                box-shadow: none !important;
                background: #ffffff !important;
                page-break-inside: avoid !important;
                break-inside: avoid !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            #printableStickerArea * {
                visibility: visible !important;
            }
            #modalQrCode canvas, 
            #modalQrCode img {
                display: block !important;
                margin: 0 auto !important;
                max-width: 130px !important;
                max-height: 130px !important;
            }
            #modal1DBarcode {
                display: block !important;
                margin: 0 auto !important;
                max-width: 100% !important;
                height: 40px !important;
            }
        }