/* Custom styles for the app */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5; /* Light gray background */
            /* Removed padding from body to eliminate gap around header */
        }
        /* Ensure the main container is centered and has a max-width */
        .main-container {
            max-width: 1024px; /* Equivalent to max-w-5xl in Tailwind */
            margin-left: auto;
            margin-right: auto;
        }
        textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue focus ring */
        }
        .highlight-correct {
            background-color: #d1fae5; /* Light green */
        }
        .highlight-incorrect {
            background-color: #fee2e2; /* Light red */
        }
        .word-correct {
            color: #10b981; /* Green text */
        }
        .word-incorrect {
            color: #ef4444; /* Red text */
            text-decoration: underline;
        }
        /* Hide scrollbar for the paragraph display */
        .paragraph-display::-webkit-scrollbar {
            display: none;
        }
        .paragraph-display {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Dark mode styles */
        html.dark body {
            background-color: #1a202c; /* Dark background for body */
            color: #e2e8f0; /* Light text color */
        }

        html.dark .main-container {
            background-color: #2d3748; /* Darker background for main container */
            color: #e2e8f0; /* Light text color */
        }

        html.dark h1,
        html.dark h2,
        html.dark h3 {
            color: #f7fafc; /* Lighter headings */
        }

        html.dark .paragraph-display {
            background-color: #4a5568; /* Darker background for paragraph display */
            color: #e2e8f0; /* Light text color */
            border-color: #6b7280; /* Lighter border */
        }

        html.dark textarea {
            background-color: #4a5568; /* Darker background for textarea */
            color: #e2e8f0; /* Light text color */
            border-color: #6b7280; /* Lighter border */
        }

        /* Adjust text color for specific elements if needed in dark mode */
        html.dark .text-gray-700 {
            color: #e2e8f0;
        }
        html.dark .text-gray-800 {
            color: #f7fafc;
        }
        html.dark .text-gray-500 {
            color: #a0aec0;
        }

        /* Adjust button colors if they need to change in dark mode */
        html.dark .bg-blue-600 {
            background-color: #4299e1; /* A lighter blue for dark mode */
        }
        html.dark .hover\:bg-blue-700:hover {
            background-color: #3182ce;
        }

        html.dark .bg-purple-600 {
            background-color: #9f7aea; /* A lighter purple for dark mode */
        }
        html.dark .hover\:bg-purple-700:hover {
            background-color: #805ad5;
        }

        html.dark .bg-green-600 {
            background-color: #48bb78; /* A lighter green for dark mode */
        }
        html.dark .hover\:bg-green-700:hover {
            background-color: #38a169;
        }

        html.dark .bg-red-600 {
            background-color: #fc8181; /* A lighter red for dark mode */
        }
        html.dark .hover\:bg-red-700:hover {
            background-color: #e53e3e;
        }

        html.dark .bg-indigo-600 {
            background-color: #7f9cf5; /* Lighter indigo */
        }
        html.dark .hover\:bg-indigo-700:hover {
            background-color: #667eea;
        }

        html.dark .bg-yellow-600 {
            background-color: #f6e05e; /* Lighter yellow */
        }
        html.dark .hover\:bg-yellow-700:hover {
            background-color: #ecc94b;
        }

        html.dark .bg-teal-600 {
            background-color: #4fd1c5; /* Lighter teal */
        }
        html.dark .hover\:bg-teal-700:hover {
            background-color: #38b2ac;
        }

        /* Adjust header search input and theme toggle for dark mode */
        html.dark #search-input {
            background-color: #4a5568;
            color: #e2e8f0;
            /* placeholder-color is not a direct CSS property, Tailwind handles it */
        }
        html.dark #search-input::placeholder {
            color: #a0aec0;
        }

        html.dark #theme-toggle {
            background-color: #4a5568;
        }
        html.dark #theme-toggle:hover {
            background-color: #6b7280;
        }

        /* Adjust text colors for results span in dark mode */
        html.dark #wpmResult,
        html.dark #accuracyResult {
            color: #90cdf4; /* Lighter blue */
        }
        html.dark #correctWordsResult {
            color: #68d391; /* Lighter green */
        }
        html.dark #incorrectWordsResult {
            color: #fc8181; /* Lighter red */
        }