h2 {
            font-size: 1.4rem; /* Larger article heading */
            font-weight: 600;
            margin-bottom: 25px;
            color: var(--text-dark);
            text-align: center;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for inputs */
            gap: 20px 30px; /* Space between grid items */
            margin-bottom: 30px;
        }

        .form-group {
            position: relative;
            display: flex; /* Use flex for label and tooltip */
            flex-direction: column;
        }

        .form-group label {
            font-weight: 500;
            margin-bottom: 6px; /* Less margin */
            display: flex; /* Use flex for label and tooltip */
            align-items: center;
            color: var(--text-medium);
            font-size: 0.75rem;
        }

        .form-group label .tooltip {
             margin-left: 8px; /* Space between label text and tooltip */
             position: relative; /* Position tooltip relative to the label */
             top: 0; /* Reset top/right */
             right: 0;
        }

        input, select {
            width: 100%;
            padding: 12px 15px; /* Slightly less padding */
            border: 1px solid var(--border);
            border-radius: 10px; /* Slightly less round */
            font-size: 0.65rem;
            font-family: inherit;
            background-color: var(--card-bg);
            color: var(--text-dark);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            -webkit-appearance: none; /* Remove default appearance */
            -moz-appearance: none;
            appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield; /* Remove spinner in Firefox */
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none; /* Remove spinner in Chrome/Safari */
            margin: 0;
        }


        input:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1); /* Adjusted shadow color */
        }

         select {
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238e8e93'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 12px center;
             background-size: 1em auto;
             padding-right: 30px; /* Make space for the arrow */
         }

        input::placeholder {
            color: var(--text-light);
            opacity: 1; /* Ensure placeholder is visible */
        }

        .button-group {
            display: flex;
            gap: 15px; /* More space between buttons */
            margin-top: 25px; /* More space above buttons */
             justify-content: center; /* Center buttons */
        }

        button {
            background: var(--primary);
            color: white;
            padding: 14px 28px; /* More padding */
            border: none;
            line-height: 1.5rem;
            border-radius: 10px;
            font-size: 1.05rem; /* Slightly larger font */
            font-weight: 700; /* Bolder */
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
            flex: 1;
            min-width: 150px; /* Minimum width */
            max-width: 200px; /* Maximum width */
            box-shadow: 0 4px 10px rgb(255 0 143 / 0.2); /* Button shadow */
        }

        button:hover {
            background: var(--primary-dark);
             box-shadow: 0 4px 10px rgb(255 0 143 / 0.2);
        }

        button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
        }

         button:disabled {
             background: var(--text-light);
             cursor: not-allowed;
             box-shadow: none;
             transform: none;
         }

        button.secondary {
            background: var(--card-bg);
            color: var(--primary);
            border: 1px solid var(--border);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        button.secondary:hover:not(:disabled) {
            background: var(--background);
             border-color: var(--primary-light);
             color: var(--primary-dark);
            box-shadow: 0 5px 12px rgba(0,0,0,0.1);
        }
         button.secondary:active:not(:disabled) {
             transform: translateY(1px);
             box-shadow: 0 2px 8px rgba(0,0,0,0.05);
         }


        .result {
            margin-top: 30px;
            padding: 25px; /* More padding */
            background: var(--info-bg);
            border-radius: 12px;
            border-left: 5px solid var(--info-border); /* Thicker border */
            font-size: 14px;
            line-height: 1.7;
            animation: fadeIn 0.4s ease;
            color: var(--text-dark);
            word-break: break-word; /* Prevent overflow */
        }

         .result h3 {
             font-size: 1.3rem;
             margin-bottom: 15px;
             color: var(--primary-dark);
             font-weight: 600;
         }

        .result strong {
            color: var(--primary);
            font-weight: 700; /* Bolder */
        }

         .result p {
             margin-bottom: 10px;
             display: flex; /* Use flex for label and value */
             justify-content: space-between;
             padding-bottom: 8px;
             border-bottom: 1px dashed rgba(0, 113, 227, 0.1); /* Subtle separator */
         }

         .result p:last-child {
             margin-bottom: 0;
             border-bottom: none;
             font-size: 1.1rem;
             font-weight: 800;
             color: var(--primary-dark);
             padding-top: 10px;
         }

         .result p span:first-child {
             color: var(--text-medium); /* Color for the label part */
         }

         .result .error {
             color: var(--danger);
             font-weight: 600;
         }


        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); } /* More pronounced animation */
            to { opacity: 1; transform: translateY(0); }
        }

        .article {
             margin-top: 40px; /* Space above article */
            padding: 30px;
            border-radius: 18px;
             /* Use container styles */
        }

        .article h3 {
            font-size: 1.4rem;
            margin-bottom: 20px;
            color: var(--text-dark);
            font-weight: 700;
        }

        .article ul {
            list-style-type: none; /* Removes the bullet point */
            padding-left: 0; 
            margin-bottom: 20px;
        }

        .article li {
            margin-bottom: 15px; /* More space between list items */
            position: relative;
            padding-left: 30px; /* More padding */
             color: var(--text-medium);
        }

        .article li::before {
            content: '•'; /* Use a simple bullet */
            position: absolute;
            left: 0;
            color: var(--primary); /* Use primary color for bullet */
            font-weight: bold;
             font-size: 1.2rem;
             top: -2px;
        }

         .article p {
             margin-bottom: 18px; /* More space below paragraphs */
             color: var(--text-medium);
         }

        .highlight-box {
            background: var(--info-bg);
            padding: 20px;
            border-radius: 12px;
            margin: 25px 0;
            border-left: 4px solid var(--info-border);
             color: var(--text-medium);
             font-style: italic;
        }
         .highlight-box strong {
             color: var(--primary-dark);
         }


        footer {
            text-align: center;
            margin-top: 60px; /* More space above footer */
            color: var(--text-light);
            font-size: 0.9rem;
            padding: 0 15px; /* Add horizontal padding */
        }

        /* Tooltip styles */
        .tooltip {
            display: inline-flex; /* Use flex to vertically align content */
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: var(--text-light);
            color: white;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 600;
            cursor: help;
            transition: background 0.2s ease;
        }

        .tooltip:hover {
            background: var(--text-medium);
        }

        .tooltip-text {
            visibility: hidden;
            width: 220px; /* Slightly wider */
            background-color: var(--text-dark);
            color: #fff;
            text-align: center;
            border-radius: 8px; /* More rounded corners */
            padding: 12px; /* More padding */
            position: absolute;
            z-index: 10; /* Higher z-index */
            bottom: 150%; /* Position above the trigger */
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            font-size: 0.85rem;
            font-weight: normal;
            pointer-events: none; /* Allow clicks through tooltip */
             box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

         .tooltip-text::after {
             content: '';
             position: absolute;
             top: 100%;
             left: 50%;
             margin-left: -8px; /* Center the arrow */
             border-width: 8px;
             border-style: solid;
             border-color: var(--text-dark) transparent transparent transparent;
         }

        /* Responsive tooltip adjustment */
         @media (max-width: 600px) {
             .tooltip-text {
                 left: auto; /* Reset left positioning */
                 right: -10px; /* Position relative to the right edge */
                 transform: none; /* Reset transform */
                 width: 180px;
                 bottom: 125%; /* Adjust position */
             }
             .tooltip-text::after {
                 left: auto;
                 right: 18px; /* Position arrow relative to the right edge */
                 margin-left: 0;
             }
         }


        /* Loading animation */
        .loading {
            display: inline-block;
            width: 16px; /* Smaller loader */
            height: 16px;
            border: 3px solid rgba(255,255,255,0.4); /* Lighter border */
            border-radius: 50%;
            border-top-color: white;
            animation: spin 0.8s ease-in-out infinite; /* Slightly faster */
            margin-left: 8px; /* Less margin */
            vertical-align: middle;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }