/* 建立 Markdown 编辑器专属设计隔离域 */
.md-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #10b981; --p-text: #0f172a; width: 100%; max-width: 1200px; margin: 0 auto; background: var(--p-bg); border-radius: 24px; padding: 32px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: 0.3s; }
.md-header { font-size: 1.5rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.md-badge { background: #d1fae5; color: #047857; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; }
.md-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 16px; border-bottom: 1px solid var(--p-border); margin-bottom: 20px; }

/* 综合控制控制栏样式 */
.md-toolbar { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid var(--p-border); border-bottom: none; border-radius: 12px 12px 0 0; padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
.md-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; }
.md-status-text { font-size: 0.85rem; color: #94a3b8; font-weight: 500; display: flex; align-items: center; gap: 4px; }

.md-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 900px) { .md-layout { grid-template-columns: 1fr; } .md-toolbar { border-bottom: 1px solid var(--p-border); border-radius: 12px; margin-bottom: 12px; } }

.md-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.md-panel-title { font-weight: 600; color: var(--p-text); display: flex; justify-content: space-between; align-items: center; min-height: 36px; }

/* 容器化编辑器域 */
.md-editor-container { border: 2px solid var(--p-border); border-radius: 12px; background: #f8fafc; overflow: hidden; display: flex; flex-direction: column; transition: 0.2s; }
.md-editor-container:focus-within { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); background: #ffffff; }

.md-textarea { width: 100%; height: 500px; padding: 16px; background: transparent; border: none; color: var(--p-text); outline: none; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.95rem; line-height: 1.65; flex: 1; }

/* 智能状态条 */
.md-stats-bar { background: #f1f5f9; border-top: 1px solid var(--p-border); padding: 6px 16px; font-size: 0.8rem; color: #64748b; display: flex; gap: 16px; }
.md-stat-item strong { color: var(--p-text); font-weight: 600; }

/* 渲染预览区与 GitHub 级排版润色 */
.md-preview-box { width: 100%; height: 533px; padding: 24px; background: #ffffff; border: 2px solid var(--p-border); border-radius: 12px; overflow-y: auto; color: var(--p-text); transition: 0.2s; line-height: 1.6; }
.md-preview-box > *:first-child { margin-top: 0 !important; }

.md-preview-box h1, .md-preview-box h2, .md-preview-box h3 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; color: var(--p-text); }
.md-preview-box h1 { font-size: 1.65em; border-bottom: 1px solid var(--p-border); padding-bottom: 0.3em; }
.md-preview-box h2 { font-size: 1.4em; border-bottom: 1px solid var(--p-border); padding-bottom: 0.3em; }
.md-preview-box h3 { font-size: 1.2em; }
.md-preview-box p, .md-preview-box blockquote, .md-preview-box ul, .md-preview-box ol { margin-bottom: 16px; }
.md-preview-box blockquote { padding: 0 1em; color: #64748b; border-left: 0.25em solid #cbd5e1; margin-left: 0; margin-right: 0; background: #f8fafc; padding: 8px 16px; border-radius: 0 8px 8px 0; }
.md-preview-box code { padding: 0.2em 0.4em; font-size: 85%; background-color: rgba(148, 163, 184, 0.15); border-radius: 6px; font-family: ui-monospace, monospace; color: #ef4444; }
.md-preview-box pre { padding: 16px; overflow: auto; font-size: 85%; background-color: #f1f5f9; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--p-border); }
.md-preview-box pre code { background-color: transparent; padding: 0; color: inherit; font-size: inherit; }
.md-preview-box table { border-collapse: collapse; width: 100%; margin-bottom: 16px; font-size: 0.9rem; }
.md-preview-box table th, .md-preview-box table td { padding: 8px 12px; border: 1px solid var(--p-border); text-align: left; }
.md-preview-box table th { background-color: #f8fafc; font-weight: 600; }
.md-preview-box table tr:nth-child(2n) { background-color: #f8fafc; }

/* 基础交互按键系统 */
.md-btn { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.md-btn-primary { background: var(--p-primary); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.md-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.md-btn-secondary { background: #ffffff; color: #475569; border: 1px solid #cbd5e1; }
.md-btn-secondary:hover { background: #f1f5f9; color: var(--p-primary); border-color: #cbd5e1; }

/* 强力接管全站黑夜模式切换 */
[data-theme="dark"] .md-tool-wrapper { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .md-toolbar { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .md-editor-container { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .md-textarea { color: #f8fafc; }
[data-theme="dark"] .md-stats-bar { background: #1e293b; border-top-color: #334155; color: #94a3b8; }
[data-theme="dark"] .md-preview-box { background: #0f172a !important; border-color: #334155 !important; color: #cbd5e1; }
[data-theme="dark"] .md-preview-box h1, [data-theme="dark"] .md-preview-box h2 { border-bottom-color: #334155; }
[data-theme="dark"] .md-preview-box blockquote { color: #94a3b8; background-color: #1e293b; border-left-color: #475569; }
[data-theme="dark"] .md-preview-box code { color: #f43f5e; background-color: rgba(244, 63, 94, 0.1); }
[data-theme="dark"] .md-preview-box pre { background-color: #1e293b; border-color: #334155; }
[data-theme="dark"] .md-preview-box table th { background-color: #1e293b; }
[data-theme="dark"] .md-preview-box table tr:nth-child(2n) { background-color: #1e293b; }
[data-theme="dark"] .md-btn-secondary { background: #0f172a; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .md-btn-secondary:hover { background: #334155; color: #60a5fa; }