/* Dynamic Content Styling (For Editor Output) */
.prose {
    color: var(--text-dark, #334155) !important;
    font-family: 'Poppins', 'Inter', sans-serif !important;
    line-height: 1.7;
}

.prose ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.prose ul li {
    position: relative;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
}

.prose ul li::before {
    content: "\f0a4" !important;
    /* check icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: var(--primary-green, #10b981) !important;
    font-size: 14px !important;
}

.prose ol {
    padding-left: 20px !important;
}

.prose ol li::marker {
    color: var(--primary-green, #10b981) !important;
    font-weight: bold !important;
}

.prose table {
    width: 100% !important;
    margin: 30px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
}

.prose table thead {
    background: var(--light-green, #f0fdf4) !important;
    color: var(--primary-dark-green, #15803d) !important;
}

.prose table th {
    padding: 15px 20px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.prose table td {
    padding: 15px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    color: var(--text-dark, #0f172a) !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1.3;
}

.prose h1 { font-size: 2.25em !important; }
.prose h2 { font-size: 1.875em !important; }
.prose h3 { font-size: 1.5em !important; }

.prose a {
    color: var(--primary-green, #10b981) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.prose a:hover {
    color: var(--primary-dark-green, #059669) !important;
    border-bottom-color: var(--primary-dark-green, #059669) !important;
}