.seo-checker-container {
    border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; background-color: #fdfdfd; margin-top: 1rem; display: flex; flex-direction: column; gap: 1.5rem;
}

.important-disclaimer {
    background-color: #e7f3ff; color: #0056b3; border: 1px solid #b8daff; border-left: 5px solid #007bff; /* Info blue */ padding: 1rem 1.5rem; margin-bottom: 1.5rem; border-radius: 5px; font-size: 0.95em; line-height: 1.5;
}
.important-disclaimer strong { font-weight: bold; display: block; margin-bottom: 0.25rem; }
.important-disclaimer code { background-color: #d1ecf1; padding: 2px 4px; border-radius: 3px; font-size: 0.9em;}

.input-section label,
.results-section h3 {
    display: block; margin-bottom: 0.5rem; font-weight: bold; color: #555; font-size: 1.1em;
}
.results-section h3 {
    color: #0056b3; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; margin-bottom: 1rem;
}


#htmlSourceInput {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; font-family: monospace; resize: vertical; line-height: 1.5; min-height: 200px;
}

.action-button { text-align: center; margin: 1rem 0; }

/* Tool Buttons */
.btn-tool-action { /* Analyze Button */
    background-color: #28a745; color: white; padding: 12px 25px; font-size: 1.1rem;
}
.btn-tool-action:hover { background-color: #218838; color: white; }

/* Results Area */
.results-section {
    border: 1px solid #e0e0e0; padding: 1.5rem; border-radius: 5px; background-color: #f9f9f9; margin-top: 1rem;
}

#analysisResults ul {
    list-style: none; padding: 0; margin: 0;
}

#analysisResults li {
    border-bottom: 1px dashed #eee; padding: 0.8rem 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
#analysisResults li:last-child { border-bottom: none; }

#analysisResults .check-name {
    font-weight: bold; color: #333; flex-basis: 30%; flex-shrink: 0; /* Prevent name from shrinking too much */
}

#analysisResults .check-details {
    flex-grow: 1; text-align: left; /* Align details text left */ word-break: break-word; /* Wrap long content */
}

#analysisResults .status {
    font-weight: bold; padding: 3px 8px; border-radius: 15px; font-size: 0.85em; white-space: nowrap;
}

#analysisResults .status.ok { color: #155724; background-color: #d4edda; }
#analysisResults .status.warning { color: #856404; background-color: #fff3cd; }
#analysisResults .status.error { color: #721c24; background-color: #f8d7da; }

#analysisResults .details-text {
    display: block; font-size: 0.9em; color: #555; margin-top: 4px;
}
#analysisResults .details-text code { /* Style for code elements like title text */
    background-color: #e9ecef;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.95em;
    word-break: break-all; /* Break long titles */
}


/* Status Display */
.status-display { font-size: 0.9em; color: #0056b3; margin-top: 1rem; padding: 0.8rem; background-color: #e7f3ff; border: 1px solid #b8daff; border-radius: 4px; text-align: left; line-height: 1.4; }


/* Responsive */
@media (max-width: 600px) {
     #analysisResults li {
        flex-direction: column; /* Stack check name and details */
        align-items: flex-start; /* Align left */
        gap: 0.3rem;
     }
      #analysisResults .check-name {
        flex-basis: auto; /* Reset basis */
        margin-bottom: 5px;
     }
     #analysisResults .status {
        margin-top: 5px;
        align-self: flex-start; /* Keep status aligned left */
     }
}