/* 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 */
        }

        /* Specific styles for calculator pages */
        .card {
            background-color: #ffffff;
            padding: 2.5rem;
            border-radius: 1.25rem;
            box-shadow: -8px -8px 15px #ffffff, 8px 8px 15px #d3d7db; /* New shadow for cards */
            margin-bottom: 2.5rem;
            margin-top: 2.5rem;
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 95%; /* Ensure card takes up most width */
            max-width: 960px; /* Limit max width */
            margin-left: auto; /* Center the card */
            margin-right: auto; /* Center the card */
        }

        .card:hover {
            transform: translateY(-7px);
            box-shadow: -12px -12px 20px #ffffff, 12px 12px 20px #c1c5c9; /* New hover shadow */
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.625rem;
            font-weight: 600;
            transition: all 0.2s ease-in-out;
            text-align: center;
            cursor: pointer;
        }

        .btn-primary {
            background-color: #2563eb; /* Blue-700 */
            color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            background-color: #1d4ed8; /* Blue-800 */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: #e2e8f0; /* Gray-200 */
            color: #2d3748; /* Gray-800 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .btn-secondary:hover {
            background-color: #cbd5e0; /* Gray-300 */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        input[type="number"], select {
            padding: 0.75rem 1rem;
            border: 1px solid #cbd5e0; /* Gray-300 */
            border-radius: 0.5rem;
            background-color: #f7fafc; /* White-ish background */
            color: #2d3748; /* Gray-800 */
            font-size: 1rem;
            transition: all 0.2s ease-in-out;
        }

        input[type="number"]:focus, select:focus {
            outline: none;
            border-color: #2563eb; /* Blue-700 */
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); /* Focus ring */
            background-color: #ffffff;
        }

        .result-box {
            background-color: #f0f4f8; /* Light blue-gray for results */
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 0.8); /* Subtle inner shadow */
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            width: 95%; /* Ensure result box takes up most width */
            max-width: 960px; /* Limit max width */
            margin-top: 2.5rem; /* Space between input card and result card */
            margin-left: auto; /* Center the result box */
            margin-right: auto; /* Center the result box */
        }

        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px dashed #e2e8f0; /* Dashed separator */
        }
        .result-item:last-child {
            border-bottom: none;
        }
        .result-item strong {
            color: #2d3748; /* Darker text for labels */
        }
        .result-item span {
            color: #2563eb; /* Blue for results */
            font-weight: 600;
        }

        /* Dark mode specific styles for calculator */
        html.dark .card {
            background-color: #2d3748;
            box-shadow: -8px -8px 15px #3a455a, 8px 8px 15px #1a202c; /* Darker shadow for dark mode */
            border-color: #4a5568;
        }
        html.dark .card:hover {
            box-shadow: -12px -12px 20px #4a5568, 12px 12px 20px #0f172a;
        }

        html.dark .btn-primary {
            background-color: #4299e1; /* Blue-400 */
            color: #f7fafc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        html.dark .btn-primary:hover {
            background-color: #63b3ed; /* Blue-300 */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
        }

        html.dark .btn-secondary {
            background-color: #4a5568; /* Gray-700 */
            color: #e2e8f0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        html.dark .btn-secondary:hover {
            background-color: #6b7280; /* Gray-600 */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
        }

        html.dark input[type="number"], html.dark select {
            background-color: #4a5568;
            color: #e2e8f0;
            border-color: #6b7280;
        }
        html.dark input[type="number"]:focus, html.dark select:focus {
            border-color: #63b3ed;
            box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.3);
            background-color: #4a5568;
        }

        html.dark .result-box {
            background-color: #1a202c; /* Darker background for results in dark mode */
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
        }
        html.dark .result-item strong {
            color: #cbd5e0; /* Lighter text for labels */
        }
        html.dark .result-item span {
            color: #90cdf4; /* Lighter blue for results */
        }
        html.dark .result-item {
            border-bottom-color: #4a5568; /* Darker dashed separator */
        }

        /* Dark mode specific text color for labels (user's request) */
        html.dark label {
            color: #f7fafc; /* White text for labels in dark mode */
        }
        /* Dark mode specific text color for heading in result box */
        html.dark .result-box h2 {
            color: #90cdf4; /* Lighter blue for result heading in dark mode */
        }
        /* Dark mode specific text for the disclaimer */
        html.dark .text-gray-600 {
            color: #a0aec0; /* Lighter gray for disclaimer text */
        }