body {
            font-family: 'Inter', sans-serif;
        }

        /* The user's original CSS is preserved below for the core functionality and effects */
        .color-tool {
            background: #FFFFFF;
            max-width: 600px;
            align-items: center; 
            justify-content: center; 
            width: 100%;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            text-align: center;
        }

        .color-tool h2 {
            font-weight: bold;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .form-group label {
            font-weight: 600;
            display: block;
            margin-bottom: 6px;
        }

        .radio-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        select, input[type="color"] {
            width: 100%;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: #ffffff;
        }
        
        input[type="color"] {
            height: 40px;
            padding: 4px;
        }
        
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            background: #ffffff;
            border-radius: 5px;
            outline: none;
            opacity: 0.7;
            transition: opacity .2s;
        }

        input[type="range"]:hover {
            opacity: 1;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #4A90E2;
            cursor: pointer;
            border-radius: 50%;
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #4A90E2;
            cursor: pointer;
            border-radius: 50%;
        }

        #previewBox {
            width: 100%;
            height: 120px;
            border-radius: 12px;
            border: 2px solid #ddd;
            margin-top: 15px;
            transition: background-color 0.3s ease;
        }
        #matteSliderContainer, #glossSliderSection {
    margin-top: 10px;
}

        /* ======== FINISH EFFECTS ======== */
        .matte {
            box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
            filter: saturate(0.9) contrast(0.9) brightness(0.95);
        }
        .semi-matte {
            box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
            filter: saturate(0.95) contrast(0.95) brightness(0.98);
        }



            .metallic {
                /* Base color for the metal, a bit darker for more contrast with highlights */
                background-color: #4a4d50;
                position: relative;
                overflow: hidden;
                /* More complex layered shadows for a deeper 3D effect */
                box-shadow: 
                    inset 0 0 15px rgba(0, 0, 0, 0.6), /* Deeper inner shadow for a more pronounced bevel */
                    inset 0 0 8px rgba(255, 255, 255, 0.3), /* Brighter inner highlight */
                    0 6px 12px rgba(0, 0, 0, 0.5); /* Stronger outer shadow */
            }
            .metallic::before {
                content: "";
                position: absolute;
                inset: -50px; /* Expand the pseudo-element for a larger, smoother reflection sweep */
                /* Multiple complex gradients for hyper-realistic lighting */
                background-image:
                    /* The main, sweeping light source with a softer edge */
                    linear-gradient(90deg,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.6) 40%,
                        rgba(255, 255, 255, 0.8) 50%,
                        rgba(255, 255, 255, 0.6) 60%,
                        rgba(255, 255, 255, 0) 100%
                    ),
                    /* A subtle, blurred light spot for a more natural reflection */
                    radial-gradient(
                        circle at 50% -200px,
                        rgba(255, 255, 255, 0.3),
                        rgba(0, 0, 0, 0) 70%
                    );
                background-size: 300% 300%, 100% 100%;
                background-position: 100% 0, 0 0;
                mix-blend-mode: overlay;
                filter: blur(2px); /* Apply a slight blur to soften the highlights */
                animation: realistic-shimmer 8s infinite ease-in-out;
            }
            /* Keyframes for the fluid animation */
            @keyframes realistic-shimmer {
                0% {
                    background-position: 100% 0;
                }
                50% {
                    background-position: 0% 0;
                }
                100% {
                    background-position: 100% 0;
                }
            }


            .glossy, .semi-glossy {
                /* Base for all glossy finishes */
                background-color: #f0f0f0; /* A neutral light grey base */
                position: relative;
                overflow: hidden;
                box-shadow: 
                    inset 0 0 10px rgba(0, 0, 0, 0.1), /* Subtle inner shadow for depth */
                    0 4px 6px rgba(0, 0, 0, 0.2);     /* Soft outer shadow to lift it */
            }

            /* Specific styles for the high-gloss finish */
            .glossy {
                box-shadow: 
                    inset 0 0 15px rgba(0, 0, 0, 0.2), 
                    0 8px 16px rgba(0, 0, 0, 0.4);
            }

            /* Specific styles for the semi-glossy finish */
            .semi-glossy {
                box-shadow: 
                    inset 0 0 8px rgba(0, 0, 0, 0.1), 
                    0 4px 8px rgba(0, 0, 0, 0.2);
            }

            /* Shared pseudo-element for the light reflection effect */
            .glossy::before, .semi-glossy::before {
                content: "";
                position: absolute;
                inset: -50px; /* Expands the gradient area for a smoother reflection sweep */
                background: linear-gradient(
                    45deg,
                    rgba(255, 255, 255, var(--gloss-opacity)) 0%,
                    rgba(255, 255, 255, calc(var(--gloss-opacity) * 0.4)) 35%,
                    rgba(255, 255, 255, 0) 60%
                );
                mix-blend-mode: screen; /* Makes the highlight a screen effect on top of the base color */
                filter: blur(20px); /* Blurs the reflection for a softer, more realistic look */
            }

            /* Setting the gloss opacity for each class */
            .glossy::before {
                --gloss-opacity: 0.8; /* Higher value for more intense gloss */
            }

            .semi-glossy::before {
                --gloss-opacity: 0.4; /* Lower value for a more subtle sheen */
            }


        .texture, .fine-texture, .sand-texture, .bold-texture, .hammer-tone {
            filter: contrast(1.05) brightness(0.95);
            box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
            background-size: cover; 
        }
        .texture {
            background-image: url("https://www.transparenttextures.com/patterns/noisy.png");
        }
        .fine-texture {
            background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
        }
        .sand-texture {
            background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png");
        }
        .bold-texture {
            background-image: url("https://www.transparenttextures.com/patterns/white-leather.png");
        }
        .hammer-tone {
            background-image: url("https://www.transparenttextures.com/patterns/noisy.png");
        }
        .buy-button {
            background-color: #4A90E2;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            border: none;
            width: 100%;
        }
        .buy-button:hover {
            background-color: #357ABD;
        }
        .error-message {
            color: #EF4444;
            text-align: center;
            font-weight: 600;
            margin-top: -10px;
            margin-bottom: 20px;
            font-size: 0.875rem;
        }



                .color-tool {
            width: 100%;
        }

        #previewBox {
            width: 316px;
            height: 300px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            position: relative; /* This is crucial for positioning the name inside */
            overflow: hidden; /* Ensures the text doesn't spill out */
        }
        .company-name {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.4); /* Faded white for a subtle effect */
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Adds a shadow for depth */
    z-index: 10; /* Ensures the name is on top of the color */
    pointer-events: none; /* Prevents the text from interfering with clicks */

    
}
        
        /* Media Query for larger screens (e.g., tablets and desktops) */
        @media (min-width: 768px) {
            .color-tool {
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: 1200px;
                margin: 0 auto;
            }
            .picker-controls {
                flex: 1;
                margin-right: 40px;
            }
        }

        /* Optional: Add a top margin for the preview box on small screens to separate it */
        @media (max-width: 767.98px) {
            #previewBox {
                margin-top: 20px;
            }
        }