* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f4f7;
    color: #222;
}

.app-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 16px 40px;
}

h1 {
    margin-top: 0;
    font-size: 1.9rem;
    text-align: center;
}

.subtitle {
    text-align: center;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 24px;
}

.panel {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 18px 24px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.field {
    margin-bottom: 16px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

input[type="number"],
input[type="text"],
select,
input[type="file"] {
    width: 100%;
    padding: 7px 9px;
    font-size: 0.95rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}

input[type="file"] {
    padding: 4px 0;
}

#dropZone {
    margin-top: 10px;
    padding: 18px;
    border: 2px dashed #bbb;
    border-radius: 6px;
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    background: #fafafa;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

    #dropZone.dragover {
        border-color: #0078d4;
        background-color: #eef6ff;
    }

.hint {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
}

.status {
    margin-top: 14px;
    font-size: 0.9rem;
}

    .status.error {
        color: #b00020;
    }

    .status.ok {
        color: #0b7a0b;
    }

.results {
    margin-top: 12px;
}

.result-item {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f8f8fc;
    border-radius: 4px;
    font-size: 0.9rem;
}

    .result-item a {
        color: #0078d4;
        text-decoration: none;
        font-weight: 600;
    }

        .result-item a:hover {
            text-decoration: underline;
        }

code {
    background: #f0f0f5;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.85rem;
}
.ast{
    font-family:Verdana, Geneva, Tahoma, sans-serif
}

/* ================= BLOG CONTENT STYLING ================= */

/* 1. Force ALL headers to be bold and spaced out */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    font-weight: 700 !important; /* Force them to be BOLD */
    color: #000000; /* Force them to be BLACK (or dark grey #2c3e50) */
    margin-top: 2.5rem; /* Big space above headers */
    margin-bottom: 1rem; /* Space below headers */
    line-height: 1.2;
}

/* Update these specific sections in your CSS */

.blog-content h2 {
    font-size: 1.75rem; /* Was likely 2.5rem by default - this is much cleaner */
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.blog-content h3 {
    font-size: 1.4rem; /* Big enough to stand out, small enough to fit in */
}

.blog-content h4 {
    font-size: 1.5rem;
}

/* The fix for your specific issue: Make H5 look significant */
.blog-content h5 {
    font-size: 1.3rem;
    text-transform: uppercase; /* Optional: Makes H5 stand out as a sub-label */
    letter-spacing: 0.5px;
}

/* 3. Fix the paragraph text size and spacing */
.blog-content p {
    font-size: 1.1rem; /* Makes the body text slightly larger/easier to read */
    line-height: 1.8; /* Improves readability */
    margin-bottom: 1.5rem;
    color: #333;
}

/* 4. Fix Lists */
.blog-content ul,
.blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
    font-size: 1.1rem; /* Match body text size */
}