/* Using a wrapper inside body for styling context */
        #app-wrapper {
            background-color: #f8f9fa;
            color: #333;
            font-size: 16px; /* Base font size */
            line-height: 1.6;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            max-width: 960px;
            margin: 2rem auto;
            padding: 1.5rem;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden; /* Contain floats/margins */
        }

        /* Header */
        header#app-header {
            text-align: center;
            margin-bottom: 2rem;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 1rem;
        }

        header#app-header h1 {
            font-size: 2rem;
            color: #2c3e50;
            font-weight: 600;
        }

        header#app-header p {
            font-size: 1rem;
            color: #555;
        }

        /* Input Form Section */
        section#input-area {
            margin-bottom: 2rem;
        }

        form#tech-lookup-form {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping on small screens */
            gap: 0.8rem;
            align-items: flex-end; /* Align items nicely */
        }

        form#tech-lookup-form .input-group {
            flex-grow: 1; /* Allow input to take available space */
            min-width: 250px; /* Minimum width before wrapping */
        }


        form#tech-lookup-form label {
            display: block; /* Label on its own line */
            font-weight: 600;
            color: #333;
            margin-bottom: 0.25rem; /* Small gap below label */
        }

        form#tech-lookup-form input[type="url"] {
            width: 100%; /* Make input take full width of its container */
            padding: 0.75rem 1rem;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        form#tech-lookup-form input[type="url"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
            outline: none;
        }

        form#tech-lookup-form button[type="submit"] {
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            height: calc(1.5rem + 1.5rem + 2px); /* Match input height (padding + font) roughly */
             line-height: 1.6; /* Adjust line height to vertically center text */
        }

        form#tech-lookup-form button[type="submit"]:hover {
            background-color: #0056b3;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        form#tech-lookup-form button[type="submit"]:active {
            background-color: #004085;
        }

        /* Status Indicators (Loading/Error) */
        #status-indicators {
            margin-bottom: 1.5rem;
            text-align: center;
        }

        #loading-indicator,
        #error-message {
            display: none; /* Hidden by default */
            padding: 0.8rem 1rem;
            border-radius: 4px;
            font-weight: 500;
            margin-top: 1rem; /* Add some space above */
        }

        #loading-indicator {
            background-color: #eef6ff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        /* Basic Spinner Animation */
        #loading-indicator::before {
             content: '';
             display: inline-block;
             width: 1em;
             height: 1em;
             border: 2px solid currentColor;
             border-right-color: transparent;
             border-radius: 50%;
             animation: spinner 0.75s linear infinite;
             margin-right: 0.5em;
             vertical-align: -0.15em; /* Align spinner better with text */
        }
        @keyframes spinner {
             to { transform: rotate(360deg); }
        }


        #error-message {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        /* Results Area */
        section#results-display {
            display: none; /* Hidden until results are ready */
            border-top: 1px solid #e0e0e0;
            padding-top: 1.5rem;
        }

        section#results-display h2#results-title {
             font-size: 1.5rem;
             color: #333;
             margin-bottom: 1.5rem;
             padding-bottom: 0.5rem;
             border-bottom: 2px solid #007bff;
             display: inline-block; /* So border only spans text */
        }

        /* Individual Result Categories */
        article.result-category {
            background-color: #fdfdfd;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            margin-bottom: 1.5rem;
            padding: 1.2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: none; /* Hide categories by default, JS will show them if they have content */
        }

        article.result-category h3 {
            font-size: 1.2rem;
            color: #0056b3;
            margin-bottom: 0.8rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
        }

        ul.result-list {
            list-style: none; /* Remove default bullets */
            padding-left: 0;
            margin-top: 0.5rem;
        }

        ul.result-list li {
            background-color: #f0f8ff; /* Slightly different background */
            border: 1px solid #d1e7ff;
            color: #0c5460;
            padding: 0.6rem 0.9rem;
            margin-bottom: 0.6rem;
            border-radius: 4px;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            word-break: break-word; /* Prevent long URLs from breaking layout */
        }

        /* Simple checkmark icon */
        ul.result-list li::before {
            content: '✓';
            color: #198754;
            font-weight: bold;
            font-size: 1.1em;
            min-width: 1em; /* Ensure space for icon */
        }

        /* Style specific list items differently if needed */
        ul#email-list li { /* Example for MX records list */
             background-color: #fef8e3;
             border-color: #fceec9;
             color: #664d03;
        }
        ul#email-list li::before {
            content: '✉'; /* Mail icon */
            color: #664d03;
        }
        ul#email-list li:first-child { /* Style the header line */
             font-weight: bold;
             background-color: #fcf3cf;
        }
         ul#email-list li:first-child::before {
             content: ''; /* No icon for header */
             min-width: 0;
             margin-right: -0.6rem; /* Adjust spacing */
         }
         ul#email-list li:last-child[class="suggestion"] { /* Style the suggestion line */
             font-style: italic;
             background-color: #eaf6ff;
             border-color: #cbe6ff;
             color:#004085;
         }
          ul#email-list li:last-child[class="suggestion"]::before {
             content: '💡'; /* Lightbulb icon */
             color:#004085;
         }


        p.no-results {
            font-style: italic;
            color: #6c757d;
            margin-top: 0.5rem;
            padding: 0.5rem 0;
            display: none; /* Hidden by default, JS shows if needed */
        }

         /* Footer */
         /*footer#app-footer {*/
         /*    margin-top: 2.5rem;*/
         /*    padding-top: 1rem;*/
         /*    text-align: center;*/
         /*    font-size: 0.9rem;*/
         /*    color: #6c757d;*/
         /*    border-top: 1px solid #e0e0e0;*/
         /*}*/

        /* Responsive Design */
        @media (max-width: 768px) {
            #app-wrapper {
                margin: 1rem;
                padding: 1rem;
            }

            header#app-header h1 {
                font-size: 1.8rem;
            }

            form#tech-lookup-form {
                flex-direction: column; /* Stack form elements vertically */
                align-items: stretch; /* Make elements full width */
            }
            form#tech-lookup-form .input-group {
                 min-width: auto; /* Remove min-width */
            }

            form#tech-lookup-form input[type="url"],
            form#tech-lookup-form button[type="submit"] {
                font-size: 1rem; /* Keep font size consistent */
                width: 100%;
            }
            form#tech-lookup-form button[type="submit"]{
                 height: auto; /* Let button height adjust */
                 line-height: 1.6; /* Reset line height */
            }
        }
         @media (max-width: 480px) {
              html { font-size: 15px; } /* Slightly smaller base font */
              header#app-header h1 { font-size: 1.6rem; }
              ul.result-list li { font-size: 0.9rem; padding: 0.5rem 0.8rem;}
         }