/* 🌟 Base Variables - Customers can override these in their own CSS! */
    :root {
        --mr-primary: #4f46e5;
        --mr-primary-text: #ffffff;
        --mr-bg: transparent;
        --mr-border: #d1d5db;
        --mr-muted: #6b7280;
    }

    /* 🌟 Form & Inputs */
    .mr-wrapper { font-family: inherit; color: var(--mr-text, inherit); }

    .mr-input {
        flex: 1;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--mr-border);
        border-radius: 0.375rem;
        font-size: 0.875rem;
        background-color: var(--mr-bg);
        color: var(--mr-text, inherit);
        font-family: inherit;
    }

    .mr-btn {
        cursor: pointer;
        background-color: var(--mr-primary);
        color: var(--mr-primary-text);
        border: none;
        padding: 0.5rem 1.25rem;
        border-radius: 0.375rem;
        font-weight: 600;
        font-size: 0.875rem;
        transition: opacity 0.2s ease;
    }
    .mr-btn:hover { opacity: 0.9; }
    .mr-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .mr-markdown-hint {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--mr-muted);
    }

    /* 🌟 Comments List */
    .comment-item {
        padding: 1rem;
        border-radius: 0.5rem;
        background-color: var(--mr-bg);
        border: 1px solid var(--mr-border);
        color: var(--mr-text, inherit);
        margin-bottom: 1rem;
    }
    .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }

    .comment-author { font-weight: 700; color: var(--mr-text, inherit); }
    .comment-date { font-size: 0.75rem; color: var(--mr-muted); }
    .comment-content { font-size: 0.875rem; color: var(--mr-text, inherit); line-height: 1.5; }
    .comment-content p { margin-top: 0; margin-bottom: 0.75rem; }
    .comment-content p:last-child { margin-bottom: 0; }

    /* 🌟 Markdown Elements */
    .comment-content strong, .comment-content b { font-weight: 700; color: var(--mr-text, inherit); }
    .comment-content em, .comment-content i { font-style: italic; }
    .comment-content s, .comment-content del { text-decoration: line-through; }

    .comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
        font-weight: 600;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
        color: var(--mr-text, inherit);
        line-height: 1.25;
    }
    .comment-content h1 { font-size: 1.5rem; }
    .comment-content h2 { font-size: 1.25rem; }
    .comment-content h3 { font-size: 1.125rem; }

    .comment-content a { color: var(--mr-primary); text-decoration: underline; text-underline-offset: 2px; }
    .comment-content a:hover { opacity: 0.8; }
    .comment-content code { background-color: rgba(150, 150, 150, 0.15); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.85em; }
    .comment-content pre { background-color: rgba(150, 150, 150, 0.1); padding: 0.75rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 0.75rem; }
    .comment-content pre code { background-color: transparent; padding: 0; }
    .comment-content ul { padding-left: 1.5rem; margin-bottom: 0.75rem; list-style-type: disc; }
    .comment-content ol { padding-left: 1.5rem; margin-bottom: 0.75rem; list-style-type: decimal; }
    .comment-content blockquote { border-left: 3px solid rgba(150, 150, 150, 0.3); padding-left: 0.75rem; margin-left: 0; color: var(--mr-muted); font-style: italic; }

    /* 🌟 GFM Table Elements */
    .comment-content table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
    .comment-content th, .comment-content td { border: 1px solid var(--mr-border); padding: 0.5rem; text-align: left; }
    .comment-content th { background-color: rgba(150, 150, 150, 0.1); font-weight: 600; }

    .comment-success-msg { padding: 1rem; background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 0.5rem; font-size: 0.875rem; margin-top: 1rem; font-weight: 500; }
    .no-comments { color: var(--mr-muted); font-size: 0.875rem; font-style: italic; }

    /* 🌟 Threaded Replies */
    .mr-thread-container { display: flex; flex-direction: column; gap: 0.5rem; }

    .comment-reply {
        margin-left: 2rem;
        border-left: 2px solid var(--mr-border);
        padding-left: 1.5rem;
        position: relative;
    }

    .comment-reply::before {
        content: "";
        position: absolute;
        top: 2rem;
        left: 0;
        width: 1rem;
        height: 2px;
        background-color: var(--mr-border);
    }

    .mr-reply-btn {
        background: transparent;
        border: none;
        color: var(--mr-muted);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0;
        margin-top: 0.5rem;
        transition: color 0.2s ease;
    }

    .mr-reply-btn:hover { color: var(--mr-primary); }
    .mr-form-slot { margin-top: 1rem; margin-bottom: 1.5rem; }

    /* 🌟 Admin Badge */
    .mr-admin-badge {
        background-color: var(--mr-primary);
        color: var(--mr-primary-text);
        font-size: 0.65rem;
        padding: 0.125rem 0.375rem;
        border-radius: 9999px;
        margin-left: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        vertical-align: middle;
    }