/* 文枢CMS · 自建轻量 Markdown 编辑器样式（零依赖） */

.mde {
    --mde-min-h: 320px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    font-family: inherit;
}
.mde * { box-sizing: border-box; }

/* 工具栏 */
.mde-toolbar {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: 7px 9px; border-bottom: 1px solid var(--line-soft);
    background: var(--bg-2, #f8fafc); position: sticky; top: 0; z-index: 5;
}
.mde-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent;
    color: var(--ink-3, #475569); font-size: 13px; cursor: pointer; transition: .14s;
}
.mde-btn:hover { background: #fff; color: var(--brand, #4f46e5); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.mde-btn:active { transform: translateY(1px); }
.mde-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
.mde-grow { flex: 1; }

/* 主体：左右分栏 */
.mde-body { display: flex; align-items: stretch; min-height: var(--mde-min-h); }
.mde-pane { flex: 1; min-width: 0; }
.mde-edit { border-right: 1px solid var(--line-soft); }
.mde-src {
    width: 100%; height: 100%; min-height: var(--mde-min-h);
    border: 0; outline: none; resize: none; padding: 16px 18px;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 13.5px; line-height: 1.75; color: var(--ink, #1e293b); background: transparent;
}
.mde-src.mde-drop { background: var(--brand-50, #eef2ff); }
.mde-preview { background: #fff; overflow: auto; max-height: 720px; }
.md-preview-body { padding: 16px 18px; font-size: 14px; line-height: 1.8; color: var(--ink, #1e293b); }
.mde-empty { color: var(--muted-2, #94a3b8); }

/* 隐藏预览 / 关闭预览模式 */
.mde-preview-off .mde-preview { display: none; }
.mde-no-preview .mde-edit { border-right: 0; }

/* 底部状态条 */
.mde-foot {
    display: flex; align-items: center; gap: 12px; padding: 7px 12px;
    border-top: 1px solid var(--line-soft); background: var(--bg-2, #f8fafc);
    font-size: 12px; color: var(--muted, #64748b);
}
.mde-stat { font-variant-numeric: tabular-nums; }
.mde-tip { margin-left: auto; color: var(--muted-2, #94a3b8); }

/* 全屏 */
.mde-full {
    position: fixed; inset: 0; z-index: 9999; border-radius: 0;
    display: flex; flex-direction: column;
}
.mde-full .mde-body { flex: 1; min-height: 0; }
.mde-full .mde-src, .mde-full .mde-preview { min-height: 0; height: 100%; max-height: none; }
body.mde-lock { overflow: hidden; }

/* 预览区 Markdown 排版 */
.mde .md h1, .mde .md h2, .mde .md h3, .mde .md h4 { margin: 18px 0 10px; line-height: 1.35; font-weight: 700; }
.mde .md h1 { font-size: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.mde .md h2 { font-size: 19px; }
.mde .md h3 { font-size: 16px; }
.mde .md p { margin: 10px 0; }
.mde .md ul, .mde .md ol { margin: 10px 0; padding-left: 24px; }
.mde .md li { margin: 4px 0; }
.mde .md blockquote {
    margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--brand, #4f46e5);
    background: var(--brand-50, #eef2ff); border-radius: 0 8px 8px 0; color: var(--ink-2, #334155);
}
.mde .md code {
    background: var(--bg-2, #f1f5f9); padding: 2px 6px; border-radius: 5px;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.8px; color: #b91c1c;
}
.mde .md .md-pre {
    background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: 10px;
    overflow: auto; margin: 12px 0; font-size: 12.8px; line-height: 1.65;
}
.mde .md .md-pre code { background: transparent; color: inherit; padding: 0; }
.mde .md img, .mde .md .md-video { max-width: 100%; border-radius: 10px; margin: 10px 0; }
.mde .md .md-video { display: block; width: 100%; background: #000; }
.mde .md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.mde .md a { color: var(--brand, #4f46e5); text-decoration: underline; }
.mde .md .md-table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
.mde .md .md-table th, .mde .md .md-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.mde .md .md-table th { background: var(--bg-2, #f8fafc); font-weight: 600; }

/* 小屏：上下堆叠 */
@media (max-width: 820px) {
    .mde-body { flex-direction: column; }
    .mde-edit { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    .mde-preview { max-height: 360px; }
}