.rte-shell {
    --rte-border: #dbe3ef;
    --rte-primary: #2563eb;
    --rte-surface: #fff;
    position: relative;
    border: 1px solid var(--rte-border);
    border-radius: 14px;
    background: var(--rte-surface);
    overflow: hidden;
    direction: rtl;
}

.rte-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 9px;
    background: #f8fafc;
    border-bottom: 1px solid var(--rte-border);
    position: sticky;
    top: 0;
    z-index: 4;
}

.rte-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-inline-end: 5px;
    margin-inline-end: 2px;
    border-inline-end: 1px solid #dbe3ef;
}

.rte-toolbar-group:last-child,
.rte-toolbar-end {
    border-inline-end: 0;
}

.rte-toolbar-end {
    margin-inline-start: auto;
}

.rte-tool,
.rte-select {
    min-width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #344054;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .16s ease;
}

.rte-select {
    min-width: 102px;
    padding: 0 9px;
    background: #fff;
    border-color: var(--rte-border);
    font-size: .8rem;
}

.rte-tool:hover,
.rte-tool:focus-visible,
.rte-tool.is-active {
    color: var(--rte-primary);
    background: #eaf1ff;
    border-color: #bfd1ff;
    outline: none;
}

.rte-tool:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.rte-tool-text {
    width: auto;
    padding: 0 7px;
    font-size: .72rem;
}

.rte-tool-danger:hover {
    color: #b42318;
    background: #fff0ee;
    border-color: #f7c2bc;
}

.rte-tool-slash {
    position: absolute;
    font-weight: 700;
    color: #d92d20;
    transform: rotate(-30deg);
}

.rte-mode-note {
    padding: 8px 14px;
    color: #854d0e;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    font-size: .78rem;
}

.rte-editor,
.rte-source {
    width: 100%;
    min-height: 440px;
    max-height: 70vh;
    padding: 24px;
    border: 0;
    outline: 0;
    overflow: auto;
    resize: vertical;
    background: #fff;
    color: #172033;
    font: 400 15px/2.05 inherit;
    text-align: right;
    direction: rtl;
}

.rte-source {
    display: none;
    direction: ltr;
    text-align: left;
    font: 13px/1.75 Consolas, "Courier New", monospace;
    color: #d6e4ff;
    background: #111827;
    tab-size: 2;
}

.rte-editor:empty::before {
    content: attr(data-placeholder);
    color: #98a2b3;
    pointer-events: none;
}

.rte-editor p {
    margin: 0 0 1em;
}

.rte-editor h2,
.rte-editor h3,
.rte-editor h4 {
    margin: 1.25em 0 .55em;
    line-height: 1.55;
}

.rte-editor blockquote {
    margin: 1em 0;
    padding: 12px 16px;
    border-right: 4px solid var(--rte-primary);
    border-radius: 8px;
    background: #f5f8ff;
}

.rte-editor pre {
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    padding: 16px;
    border-radius: 9px;
    color: #e5edf9;
    background: #172033;
    overflow: auto;
}

.rte-editor ul,
.rte-editor ol {
    padding-right: 1.5rem;
}

.rte-editor figure {
    max-width: 100%;
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
}

.rte-editor figure[data-rte-width="100"] { width: 100%; }
.rte-editor figure[data-rte-width="75"] { width: 75%; }
.rte-editor figure[data-rte-width="50"] { width: 50%; }
.rte-editor figure[data-rte-width="25"] { width: 25%; }
.rte-editor figure[data-rte-align="center"] { margin-inline: auto; }
.rte-editor figure[data-rte-align="right"] { margin-left: auto; margin-right: 0; }
.rte-editor figure[data-rte-align="left"] { margin-right: auto; margin-left: 0; }

.rte-editor figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 9px;
    cursor: pointer;
}

.rte-editor figure img.is-selected {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

.rte-editor [data-rte-table-scroll] {
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
    overflow-x: auto;
}

.rte-editor table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    table-layout: auto;
}

.rte-editor th,
.rte-editor td {
    min-width: 90px;
    padding: 10px;
    border: 1px solid #cfd8e6;
    vertical-align: top;
}

.rte-editor th {
    background: #eef4ff;
    font-weight: 700;
}

.rte-footer {
    min-height: 38px;
    padding: 8px 13px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #667085;
    background: #f8fafc;
    border-top: 1px solid var(--rte-border);
    font-size: .75rem;
}

.rte-shell.is-source .rte-source { display: block; }
.rte-shell.is-source .rte-editor { display: none; }
.rte-shell.is-source [data-rte-command],
.rte-shell.is-source [data-rte-action="link"],
.rte-shell.is-source [data-rte-action="unlink"],
.rte-shell.is-source [data-rte-action="image"],
.rte-shell.is-source [data-rte-action="table"] { opacity: .35; pointer-events: none; }

.rte-shell.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    border-radius: 0;
}

.rte-shell.is-fullscreen .rte-editor,
.rte-shell.is-fullscreen .rte-source {
    min-height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
}

body.rte-no-scroll {
    overflow: hidden;
}

.rte-modal[hidden] {
    display: none;
}

.rte-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.rte-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .65);
    backdrop-filter: blur(2px);
}

.rte-dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.rte-dialog-small {
    width: min(520px, 100%);
}

.rte-dialog-header,
.rte-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
}

.rte-dialog-header {
    border-bottom: 1px solid #e4e7ec;
}

.rte-dialog-header h6 {
    margin: 0 0 4px;
    color: #101828;
    font-size: 1rem;
}

.rte-dialog-header p {
    margin: 0;
    color: #667085;
    font-size: .76rem;
}

.rte-dialog-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
}

.rte-dialog-body {
    padding: 20px;
}

.rte-image-picker {
    min-height: 230px;
    border: 2px dashed #b7c4d8;
    border-radius: 12px;
    background: #f8fafc;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: pointer;
}

.rte-image-picker.is-dragging {
    border-color: var(--rte-primary);
    background: #eff6ff;
}

.rte-image-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.rte-picker-empty {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #475467;
}

.rte-picker-empty i {
    color: var(--rte-primary);
    font-size: 2.3rem;
}

.rte-picker-empty small {
    color: #98a2b3;
}

.rte-image-picker img {
    display: block;
    width: 100%;
    max-height: 330px;
    object-fit: contain;
}

.rte-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.rte-dialog-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #344054;
    font-size: .8rem;
}

.rte-dialog-grid label:first-child {
    grid-column: 1 / -1;
}

.rte-dialog-grid .rte-check-label {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
}

.rte-upload-progress,
.rte-image-info,
.rte-form-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .78rem;
}

.rte-upload-progress {
    color: #175cd3;
    background: #eff8ff;
}

.rte-progress-track {
    display: block;
    height: 4px;
    margin-top: 8px;
    border-radius: 20px;
    background: #cfe4ff;
    overflow: hidden;
}

.rte-progress-track span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: #2e90fa;
    animation: rte-progress 1s ease-in-out infinite alternate;
}

@keyframes rte-progress {
    to { transform: translateX(-150%); }
}

.rte-image-info {
    color: #027a48;
    background: #ecfdf3;
}

.rte-form-error {
    color: #b42318;
    background: #fef3f2;
}

.rte-dialog-actions {
    border-top: 1px solid #e4e7ec;
}

.rte-dialog-actions .submit-btn,
.rte-dialog-actions .draft-btn {
    min-height: 38px;
    padding: 8px 14px;
}

.rte-delete-media {
    border: 0;
    color: #b42318;
    background: transparent;
}

@media (max-width: 720px) {
    .rte-toolbar-end {
        margin-inline-start: 0;
    }

    .rte-editor,
    .rte-source {
        min-height: 360px;
        padding: 16px;
    }

    .rte-dialog-grid {
        grid-template-columns: 1fr;
    }

    .rte-dialog-grid label,
    .rte-dialog-grid label:first-child {
        grid-column: auto;
    }
}

/* نمایش عمومی محتوای مطلب */
.blog-rich-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
    line-height: 2.05;
}

.blog-rich-content img,
.blog-rich-content video,
.blog-rich-content canvas {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

.blog-rich-content figure {
    max-width: 100% !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.blog-rich-content figure[data-rte-width="100"] { width: 100% !important; }
.blog-rich-content figure[data-rte-width="75"] { width: 75% !important; }
.blog-rich-content figure[data-rte-width="50"] { width: 50% !important; }
.blog-rich-content figure[data-rte-width="25"] { width: 25% !important; }
.blog-rich-content figure[data-rte-align="center"] { margin-inline: auto; }
.blog-rich-content figure[data-rte-align="right"] { margin-left: auto; margin-right: 0; }
.blog-rich-content figure[data-rte-align="left"] { margin-right: auto; margin-left: 0; }
.blog-rich-content figure img { width: 100% !important; border-radius: 10px; }

.blog-rich-content [data-rte-table-scroll] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.4rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.blog-rich-content table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 520px;
    border-collapse: collapse;
}

.blog-rich-content th,
.blog-rich-content td {
    padding: 10px 12px;
    border: 1px solid #d7deea;
    vertical-align: top;
}

.blog-rich-content th {
    background: #f1f5f9;
}

.blog-rich-content pre {
    max-width: 100%;
    padding: 16px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    color: #e5edf9;
    background: #172033;
    border-radius: 9px;
}

.blog-rich-content blockquote {
    margin: 1.2rem 0;
    padding: 12px 16px;
    border-right: 4px solid var(--theme-primary, #2563eb);
    background: #f7f9fc;
}

@media (max-width: 600px) {
    .blog-rich-content figure[data-rte-width="75"],
    .blog-rich-content figure[data-rte-width="50"],
    .blog-rich-content figure[data-rte-width="25"] {
        width: 100% !important;
    }
}