/* Base styles for the app, consistent with CalcAdda design */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f3f3; /* Updated background color */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding-top: 0;
            transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
        }
        /* Header styling, now sticky at the top for consistent navigation */
         header {
            position: sticky; /* Sticky header for better scroll behavior */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
            background: linear-gradient(to right, #1e3a8a, #172554); /* Darker, richer blue gradient */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
        }

        /* Main content wrapper to center and limit width */
        .main-content-wrapper {
            max-width: 1280px; /* Equivalent to max-w-7xl in Tailwind for larger content area */
            margin-left: auto;
            margin-right: auto;
            padding: 1.5rem; /* p-6 */
            padding-top: 6rem; /* Add space below the fixed header */
            padding-bottom: 2rem; /* py-8 */
            width: 100%;
        }

        /* Common card styling for sections */
        .section-card {
            background-color: #ffffff;
            padding: 2.5rem;
            border-radius: 1.25rem; /* Even more rounded corners */
            /* Updated box-shadow for a softer, more defined look */
            box-shadow: -8px -8px 15px #ffffff, 8px 8px 15px #d3d7db;
            margin-bottom: 2.5rem;
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .section-card:hover {
            transform: translateY(-7px); /* More pronounced lift effect on hover */
            /* Adjusted hover shadow for consistency with new base shadow */
            box-shadow: -12px -12px 20px #ffffff, 12px 12px 20px #c1c5c9;
        }

        /* Styling for featured calculator links (colorful grid items) */
        .featured-calculator-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem; /* Adjusted padding */
            border-radius: 0.75rem; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            transition: all 0.2s ease-in-out;
            color: white; /* Text color for featured links */
            text-align: center;
        }
        .featured-calculator-link:hover {
            transform: scale(1.05); /* Slight scale on hover */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
        }

        /* Styling for category list links (main category buttons) */
        .category-list-link {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem; /* Adjusted padding */
            border-radius: 0.5rem; /* Rounded corners */
            transition: background-color 0.2s ease, color 0.2s ease;
            color: #4a5568; /* Default text color */
            cursor: pointer; /* Indicate clickable */
        }
        .category-list-link:hover {
            background-color: #edf2f7; /* Light hover background */
            color: #2b6cb0; /* Blue text on hover */
        }

        /* Styling for submenu links */
        .submenu-link {
            padding: 0.5rem 0.75rem; /* Smaller padding for submenu items */
            border-radius: 0.375rem; /* Slightly less rounded */
            transition: background-color 0.2s ease, color 0.2s ease;
            color: #4a5568; /* Default text color */
            font-size: 0.95rem; /* Slightly smaller font */
        }
        .submenu-link:hover {
            background-color: #e2e8f0; /* Lighter hover background */
            color: #2b6cb0; /* Blue text on hover */
        }

        /* Heading shadow for consistency */
        .heading-shadow {
            text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.18); /* More pronounced shadow */
        }

        /* Dark mode styles */
        html.dark body {
            background: linear-gradient(to bottom right, #1a202c, #0f172a); /* Darker, subtle gradient */
            color: #e2e8f0;
        }

        html.dark header {
             background: linear-gradient(to right, #0f172a, #020617); /* Even darker header in dark mode */
             border-bottom-color: rgba(255, 255, 255, 0.05);
        }

        html.dark .section-card {
            background-color: #2d3748; /* Darker background for main container */
            color: #e2e8f0;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(0, 0, 0, 0.3);
            border-color: #4a5568;
        }
        html.dark .section-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 15px 30px -8px rgba(0, 0, 0, 0.4);
        }

        html.dark h1,
        html.dark h2,
        html.dark h3 {
            color: #f7fafc;
        }

        html.dark .text-gray-900 {
            color: #f7fafc;
        }
        html.dark .text-gray-800 {
            color: #e2e8f0;
        }
        html.dark .text-gray-600 {
            color: #a0aec0;
        }
        html.dark .text-gray-500 {
            color: #a0aec0;
        }

        /* Dark mode for calculator links */
        html.dark .calculator-link {
            background-color: #4a5568;
            color: #f7fafc; /* Light text for links */
            border-color: #6b7280;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        }

        html.dark .calculator-link:hover {
            background-color: #6b7280;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
            color: #f7fafc; /* Keep text light on hover */
        }

        /* Adjust header search input and theme toggle for dark mode */
        html.dark #search-input {
            background-color: #4a5568;
            color: #e2e8f0;
            border-color: #6b7280;
        }
        html.dark #search-input::placeholder {
            color: #a0aec0;
        }
        html.dark #search-input:focus {
            background-color: #6b7280;
            color: #f7fafc;
        }

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

        /* Specific text colors for section headings in dark mode */
        html.dark .text-blue-700 { color: #90cdf4; }
        html.dark .text-green-700 { color: #68d391; }
        html.dark .text-purple-700 { color: #b794f4; }
        html.dark .text-yellow-600 { color: #f6e05e; }
        html.dark .text-red-600 { color: #fc8181; }
        html.dark .text-indigo-600 { color: #7f9cf5; }
        html.dark .text-pink-600 { color: #f687b3; }

        /* Dark mode for category list links and submenu links */
        html.dark .category-list-link {
            color: #f7fafc; /* White text in dark mode */
        }
        html.dark .category-list-link:hover {
            background-color: #4a5568; /* Darker hover background */
            color: #90cdf4; /* Lighter blue on hover for contrast */
        }
        html.dark .submenu-link {
            color: #f7fafc; /* White text in dark mode */
        }
        html.dark .submenu-link:hover {
            background-color: #4a5568; /* Darker hover background */
            color: #90cdf4; /* Lighter blue on hover for contrast */
        }

        /* Share button styles */
        .share-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.25rem;
            border-radius: 0.625rem;
            font-weight: 600;
            transition: all 0.2s ease-in-out;
            color: white;
            cursor: pointer;
            text-decoration: none;
            gap: 0.5rem; /* Space between icon and text */
        }

        .share-button.whatsapp { background-color: #25D366; }
        .share-button.whatsapp:hover { background-color: #1DA851; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .share-button.facebook { background-color: #1877F2; }
        .share-button.facebook:hover { background-color: #145CB3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .share-button.twitter { background-color: #1DA1F2; }
        .share-button.twitter:hover { background-color: #1788CC; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .share-button.linkedin { background-color: #0A66C2; }
        .share-button.linkedin:hover { background-color: #074B92; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .share-button.copy-link {
            background-color: #6B7280; /* Gray-500 */
            color: white;
        }
        .share-button.copy-link:hover {
            background-color: #4B5563; /* Gray-700 */
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        /* Dark mode for share buttons */
        html.dark .share-button.whatsapp { background-color: #25D366; } /* Keep bright for visibility */
        html.dark .share-button.facebook { background-color: #1877F2; }
        html.dark .share-button.twitter { background-color: #1DA1F2; }
        html.dark .share-button.linkedin { background-color: #0A66C2; }
        html.dark .share-button.copy-link {
            background-color: #4A5568; /* Darker gray for dark mode */
            color: #E2E8F0;
        }
        html.dark .share-button.copy-link:hover {
            background-color: #6B7280;
        }

        /* Modal Styles (for copy link confirmation) */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .modal-overlay.visible {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: #ffffff;
            padding: 2.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 400px;
            width: 90%;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }
        .modal-overlay.visible .modal-content {
            transform: translateY(0);
        }
        .modal-content h3 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 1rem;
        }
        .modal-content p {
            font-size: 1.1rem;
            color: #4a5568;
            margin-bottom: 1.5rem;
        }
        .modal-content button {
            background-color: #2563eb;
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.2s ease;
            cursor: pointer;
        }
        .modal-content button:hover {
            background-color: #1d4ed8;
        }

        /* Dark mode for modal */
        html.dark .modal-content {
            background-color: #2d3748;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }
        html.dark .modal-content h3 {
            color: #f7fafc;
        }
        html.dark .modal-content p {
            color: #cbd5e0;
        }
        html.dark .modal-content button {
            background-color: #4299e1;
        }
        html.dark .modal-content button:hover {
            background-color: #63b3ed;
        }