/* Ingredient Converter Styles */
        /* Custom styles for the app - consistent with other tools */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5; /* Light gray background */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Align content from the start */
            align-items: center;
            box-sizing: border-box; /* Include padding in element's total width and height */
            padding-top: 0; /* Remove body padding-top as header is fixed and card has margin-top */
        }
        header {
            position: fixed; /* Make header fixed */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999; /* Ensure header is on top */
        }
        .card {
            background-color: #ffffff;
            border-radius: 0.75rem; /* Consistent with section-card */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Consistent with section-card */
            max-width: 40rem; /* Adjusted for a focused calculator layout */
            width: 100%;
            padding: 2.5rem; /* p-10 or p-8 */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for transform and shadow */
            margin-top: 6rem; /* Add space below the fixed header */
            border: 1px solid #e2e8f0; /* subtle border consistent with section-card */
        }
        .card:hover {
            transform: translateY(-5px); /* Lift effect on hover */
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.08);
        }

        /* General styling for number and date inputs, and select elements (consistent) */
        input[type="number"], input[type="text"], input[type="date"], select {
            appearance: none;
            -webkit-appearance: none;
            background-color: #e2e8f0; /* Softer gray background */
            border: 1px solid #cbd5e0;
            border-radius: 0.75rem; /* More rounded input */
            padding: 0.85rem 1.25rem;
            line-height: 1.5;
            color: #2d3748;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            font-size: 1rem; /* Default font size for inputs/selects */
        }
        input[type="number"]:focus, input[type="text"]:focus, input[type="date"]:focus, select:focus {
            outline: none;
            border-color: #4c51bf; /* Deeper blue on focus */
            box-shadow: 0 0 0 4px rgba(76, 81, 191, 0.25);
        }

        /* Button styling (consistent - though not used in this specific app, kept for consistency) */
        .btn {
            padding: 0.85rem 1.75rem;
            border-radius: 0.75rem;
            font-weight: 700; /* Bolder text */
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle button shadow */
        }
        .btn-primary {
            background-color: #4c51bf; /* Deeper blue-purple */
            color: #ffffff;
        }
        .btn-primary:hover {
            background-color: #3b408c;
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }
        .btn-secondary {
            background-color: #e2e8f0; /* Light gray */
            color: #4a5568;
        }
        .btn-secondary:hover {
            background-color: #cbd5e0;
            transform: translateY(-2px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
        }

        /* Result box styling (consistent) */
        .result-box {
            background-color: #f0f8ff; /* Very light blue */
            border: 1px solid #bfdbfe;
            border-radius: 1.25rem; /* More rounded */
            padding: 1.75rem;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Slower animation */
            width: 100%; /* Take full width of its container */
        }
        .result-box h2 {
            color: #2b6cb0; /* Stronger blue */
            font-size: 1.75rem; /* Larger heading */
        }
        .result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0;
            border-bottom: 1px dashed #dbeafe;
        }
        .result-item:last-child {
            border-bottom: none;
        }
        .result-item strong {
            color: #2d3748;
            font-weight: 600;
        }
        .result-item span {
            color: #1a202c;
            font-weight: 500;
        }

        /* Custom Modal Styling (consistent) */
        .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.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 90%;
            width: 400px;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }
        .modal-overlay.show .modal-content {
            transform: translateY(0);
        }
        .modal-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #ef4444; /* Red for error */
            margin-bottom: 1rem;
        }
        .modal-content p {
            color: #374151;
            margin-bottom: 1.5rem;
        }
        .modal-content button {
            background-color: #4c51bf;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .modal-content button:hover {
            background-color: #3b408c;
        }

        /* Specific styles for Ingredient Converter sections */
        .converter-section {
            background-color: #f8fafc; /* Light background for sections */
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem; /* Consistent with input border-radius */
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow for sections */
        }
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        label {
            font-weight: 600;
            color: #2d3748; /* Primary text color */
            transition: color 0.3s ease-in-out;
        }
        .result {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1a202c; /* Result text color */
            background-color: #e0e7ff; /* Light blue background for result */
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            text-align: center;
            margin-top: 0.5rem;
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
            border: 1px solid #bfdbfe; /* Border for result box */
        }
        .title {
            font-size: 2.25rem; /* Larger title */
            font-weight: 800;
            color: #2d3748; /* Primary text color */
            text-align: center;
            margin-bottom: 1rem;
            transition: color 0.3s ease-in-out;
        }
        .description {
            font-size: 1rem;
            color: #718096; /* Secondary text color */
            text-align: center;
            margin-bottom: 1.5rem;
            transition: color 0.3s ease-in-out;
        }

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

        html.dark .card {
            background-color: #2d3748; /* Darker background for main container */
            color: #e2e8f0; /* Light text color */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
            border-color: #4a5568; /* Darker border */
        }

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

        html.dark .text-gray-700,
        html.dark label {
            color: #e2e8f0; /* For labels */
        }
        html.dark .text-gray-800 {
            color: #e2e8f0;
        }
        html.dark .text-gray-600,
        html.dark .description {
            color: #a0aec0;
        }

        /* Dark mode for inputs */
        html.dark input[type="number"],
        html.dark input[type="text"],
        html.dark input[type="date"],
        html.dark select {
            background-color: #4a5568;
            color: #f7fafc;
            border-color: #6b7280;
        }
        html.dark input[type="number"]:focus,
        html.dark input[type="text"]:focus,
        html.dark input[type="date"]:focus,
        html.dark select:focus {
            border-color: #63b3ed; /* Lighter blue on focus for dark mode */
            box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.25);
        }

        /* Dark mode for buttons (if any were present, for consistency) */
        html.dark .btn-primary {
            background-color: #667eea; /* Lighter primary for dark mode */
        }
        html.dark .btn-primary:hover {
            background-color: #5a67d8;
        }
        html.dark .btn-secondary {
            background-color: #4a5568; /* Darker secondary for dark mode */
            color: #f7fafc;
        }
        html.dark .btn-secondary:hover {
            background-color: #6b7280;
        }

        /* Dark mode for converter sections */
        html.dark .converter-section {
            background-color: #4a5568;
            border-color: #6b7280;
        }

        /* Dark mode for result displays */
        html.dark .result {
            background-color: #4c51bf; /* Darker blue for result */
            color: #e0e7ff; /* Lighter blue for result text */
            border-color: #667eea;
        }

        /* 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: #fc8181; /* Lighter red for error in dark mode */
        }
        html.dark .modal-content p {
            color: #e2e8f0;
        }
        html.dark .modal-content button {
            background-color: #667eea;
        }
        html.dark .modal-content button:hover {
            background-color: #5a67d8;
        }