html,
        body {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            background-color: #121212;
            color: #ffffff;
        }

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

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

        /* Custom Panel Gradient & Border */
        .glass-panel {
            background: #1E1E1E;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .pb-safe {
            padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
        }

        .pt-safe {
            padding-top: calc(env(safe-area-inset-top) + 8px);
        }

        .qr-enter {
            animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        /* Interactive Elements */
        .btn-active:active {
            transform: scale(0.96);
            transition: transform 0.1s;
        }

        .hover-effect:hover {
            background-color: rgba(79, 195, 247, 0.2);
            border-color: rgba(79, 195, 247, 0.4);
        }

        /* Input Styling Override */
        input,
        textarea,
        select {
            background-color: #1E1E1E !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: #4fc3f7 !important;
            box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.2);
        }

        input::placeholder,
        textarea::placeholder {
            color: #c0c0c0;
            opacity: 0.6;
        }

        /* Tab Transitions */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        /* Pickr Customization for Dark Theme */
        .pcr-app {
            background: #242424 !important;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .pcr-interaction input {
            background: #121212 !important;
            color: #fff !important;
        }

        /* Fix canvas-wrapper flex display when shown */
        #canvas-wrapper {
            display: none;
        }

        #canvas-wrapper.visible {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Download success state */
        @keyframes successPulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.03);
            }

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

        .btn-success {
            animation: successPulse 0.4s ease;
            background: linear-gradient(to right, #22c55e, #16a34a) !important;
        }

        /* Scan Link Button */
        .scan-link {
            background: rgba(79, 195, 247, 0.08);
            border: 1px solid rgba(79, 195, 247, 0.2);
            color: #4fc3f7;
            transition: all 0.2s ease;
        }

        .scan-link:hover {
            background: rgba(79, 195, 247, 0.15);
            border-color: rgba(79, 195, 247, 0.4);
        }