::-webkit-scrollbar {
            width: 0 !important; /* Hides vertical scrollbar by making its width zero */ 
            height: 0 !important; /* Hides horizontal scrollbar by making its height zero */
            display: none; /* Fallback for some specific cases or older versions */
        }

    /* For Firefox */
    html, body {
        scrollbar-width: none; /* Hides the standard scrollbar in Firefox */
    }

/* For Internet Explorer and Edge (older versions) */
    html, body {
        -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
    }
	    
    body {
        font-family: Arial, sans-serif;
        text-align: center;            
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
        color: #333;
        font-size: 1em;
        line-height: 1.6;
    }
	    
    .container {
        max-width: 800px;
        margin: 0px auto;
        padding: 20px;
        background-color: #fff;
        font-size: 1.25em;
	text-align: center;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
	    
        #predictionContent {
            display: none; /* Initially hidden */
        }
        h1, h2, h3 {
            text-align: center;
            color: #d76324;
        }
        p {
            margin-bottom: 1em;
        }

	a {
            color: #d76324;
	}	    

        /* Input group for label and input */
        .input-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        input[type="password"] {
            width: calc(100% - 20px); /* Account for padding */
            padding: 12px 10px;
            border: 2px solid #ced4da; /* Light grey border, can be adjusted for new palette */
            border-radius: 8px;
            font-size: 1em;
            margin: 20px auto;
            box-sizing: border-box; /* Include padding and border in element's total width and height */
        }

        /* Button styling */
        button {
            background-color: #959595;
            color: white;
            padding: 14px 25px;
            border: none;
	    font-size:1.25em !important;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        button:hover {
            background-color: #7A7A7A; /* Darker grey on hover */
        }

        /* Error message styling */
        .message {
            margin-top: 20px;
            font-weight: bold;
            color: #dc3545; /* Red for error messages */
        }

        /* Styling for the loading screen */
        #loadingScreen {
            display: none; /* Initially hidden */
            min-height: 200px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
        }

        /* Styling for the explanation screen */
        #explanationScreen {
            display: none; /* Initially hidden */
            min-height: 200px;
            justify-content: left;
            align-items: left;
	    text-align: left;
            flex-direction: column;
	}

        /* Basic spinner animation on the loading screen*/
        .spinner {
            border: 8px solid rgba(0, 0, 0, 0.1);
            border-top: 8px solid #d76324; /* Spinner color matching heading */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
            margin-top: 20px;
            margin-bottom: 20px;            
            display: flex;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            .container {
                padding: 25px;
            }
            h1, h2 {
                font-size: 1.8em;
            }
            button {
                padding: 12px 20px;
                font-size: 1em !important;
            }
            input[type="password"] {
                padding: 10px 8px;
            }
            .spinner {
                width: 40px;
                height: 40px;
                border-width: 6px;
            }
        }

        /* --- Box Styling --- */
        .interaction-box {
            text-align: center;
            margin: 80px 0; /* Vertical spacing between boxes and content */
            padding: 40px 20px;
            background-color: #e9e9e9; /* Grey box */
            border-radius: 8px;
            font-size: 1.5em;
            font-weight: bold;
            color: #555;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none; /* For Safari */
            -moz-user-select: none; /* For Firefox */
            touch-action: pan-y; /* Allow vertical scrolling, prevent horizontal or zoom on touch */
            position: relative;
        }

        /* --- White Gaps --- */
        .white-gap {
            height: 100vh;
            background-color: #fff;
            margin: 0;
            padding: 0;
        }

        /* --- Generic Content / Filler --- */
        .generic-content {
            margin-top: 50px;
            margin-bottom: 50px;
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 1em;
            border-radius: 5px;
            text-align: center;
        }

        .scan-finger-button {
            width: 100px; /* Fixed width for a perfect circle */
            height: 100px; /* Fixed height for a perfect circle */
            border-radius: 50%; /* Makes it round */
            padding: 0; /* Remove padding as there's no text */
            display: flex; /* Use flex to center any potential icon/inner elements */
            justify-content: center;
            align-items: center;
            font-size: 0; /* Hide any default text if present */
            background-color: #e0e0e0; /* Grey background */
            border: 5px solid #d76324; /* Orange border */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
        }

        .scan-finger-button:hover {
            background-color: #d0d0d0; /* Slightly darker grey on hover */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .scan-finger-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Scan progress text */
        #scanProgressText {
            margin-top: 15px;
            font-weight: bold;
            color: #d76324;
        }

        /* Progress bar styling */
        .progress-bar-container {
            width: 80%;
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 20px;
            height: 20px;
        }

        .progress-bar-fill {
            height: 100%;
            width: 0%; /* Initial width */
            background-color: #d76324;
            border-radius: 5px;
            transition: width 0.1s linear; /* Smooth transition for progress */
        }
	    
        /* Warning message styling */
        #warningMessage {
            color: #dc3545; /* Red color for warning */
            font-weight: bold;
            font-size: 1.2em;
            margin-top: 20px;
            visibility: none; /* Hidden by default */
        }

        .red {
           color: #dc3545;
	}
	    
        /* Blinking class for messages */
        .blink {
	    font-size: 1.5 em;
	    font-weight: bold;
            animation: blink 0.4s infinite alternate;
        }

        @keyframes blink {
            0% { opacity: 1; }
            100% { opacity: 0.2; }
        }



        /* Responsive adjustments */
        @media (max-width: 600px) {
            .scan-finger-button { /* Specific scan button styling on mobile */
                width: 80px;
                height: 80px;
            }
        }
        #loadingTextBox {
            height: 15vh;
	}

        /* Styles for the round button */
        .round-button {
            width: 50vw; /* Button width is half the viewport width */
            height: 50vw; /* Button height is half the viewport width to keep it round */
            max-width: 200px; /* Max width for desktop screens */
            max-height: 200px; /* Max height for desktop screens */
            border-radius: 50%; /* Make it perfectly round */
            background-color: #d76324; /* Indigo 600 from Tailwind palette */
            color: white; /* White text color */
            cursor: pointer; /* Indicate it's clickable */
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions for hover/active states and border color */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
            outline: none; /* Remove outline on focus */
            position: relative; /* Needed for positioning the spinner pseudo-element */
            overflow: hidden; /* Hide parts of the spinner that go outside the button if needed */

            /* Default state: dark grey border */
            border: 8px solid #4A4A4A; /* Dark grey border */
        }

        /* Styles for the button when it's active (pressed) */
        .round-button:active {
            background-color: #b74304; /* Darker indigo when pressed */
            transform: scale(0.98); /* Slightly shrink on press for visual feedback */
        }

        /* Spinner animation definition */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Spinner effect for the button when the 'spinning' class is applied */
        .round-button.spinning {
            border-top-color: #d1d5db; /* Dark grey top border */
            border-bottom-color: #4A4A4A; /* Dark grey bottom border */
            border-left-color: #4A4A4A; /* Light grey for left (Tailwind gray-300) */
            border-right-color: #4A4A4A; /* Light grey for right (Tailwind gray-300) */
            animation: spin 0.5s linear infinite; /* Apply the spin animation */
        }

        /* Container for the progress bar */
        .progress-container {
            width: 80vw; /* Progress bar width is 80% of viewport width */
            max-width: 320px; /* Max width for desktop screens (80% of 400px max container) */
            height: 30px; /* Fixed height for the progress bar container */
            background-color: #E0E7FF; /* Light indigo background */
            border-radius: 8px; /* Rounded corners for the container */
            overflow: hidden; /* Hide any overflow from the progress bar fill */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Inner shadow for depth */
            margin-bottom: 20px; /* Space between progress bar and button */
            margin-left: auto; /* Center the progress bar */
            margin-right: auto; /* Center the progress bar */
        }

        /* The actual progress bar fill */
        .progress-bar {
            height: 100%; /* Take full height of its container */
            width: 0%; /* Initial width is 0% */
            background-color: #b74304; /* Dark Orange */
            border-radius: 8px; /* Rounded corners for the fill */
            display: flex; /* Use flexbox to center text inside the bar */
            justify-content: center; /* Center text horizontally */
            align-items: center; /* Center text vertically */
            color: white; /* White text color */
            font-weight: bold; /* Bold text */
            transition: width 0.1s linear; /* Smooth transition for width changes */
            white-space: nowrap; /* Prevent text from wrapping */
            overflow: hidden; /* Hide text if it overflows */
        }