/* 布局：三栏主体、编辑器中栏、预览右栏、响应式 */

.main { display: flex; height: calc(100vh - 48px); }

/* 中栏：编辑器 */
.editor-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.editor-pane #vditor { flex: 1; border: none; border-radius: 0; }
.editor-pane .vditor { height: 100% !important; border: none !important; border-radius: 0 !important; }
.editor-pane .vditor-toolbar { border-radius: 0 !important; }

/* 色块编号：编辑器内可编辑的数字徽标（仅标题装饰为“色块”时出现） */
.heading-num-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.heading-num-badge { position: absolute; pointer-events: auto; box-sizing: border-box; border: none; outline: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; text-align: center; font-family: Georgia, serif; padding: 0; cursor: text; }
.heading-num-badge:focus { box-shadow: 0 0 0 2px rgba(99,102,241,0.4); }

/* 右栏：预览。578px 是公众号正文的实际渲染宽度 */
.preview-pane { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); min-width: 0; background: #f8fafc; }
.preview-pane .editor-label { padding: 8px 24px; font-size: 12px; color: #94a3b8; border-bottom: 1px solid var(--border); }
.preview-wrapper { flex: 1; overflow-y: auto; padding: 24px; display: flex; justify-content: center; }
.preview-content {
  width: 578px;
  max-width: 100%;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  height: fit-content;
}

/* 响应式 */
@media (max-width: 900px) {
  .panel { display: none; }
  /* 移动端手动展开：用 class 而非 inline style，避免残留的 inline display
     在窗口放大回桌面端后压过媒体查询、导致布局错乱 */
  .panel.panel-open { display: block; }
  .btn-mobile-only { display: inline-block; }
}
@media (max-width: 640px) {
  .main { flex-direction: column; }
  .editor-pane, .preview-pane { flex: none; height: 50%; }
  .preview-content { width: 100%; }
  .toolbar { padding: 0 8px; gap: 6px; }
  .toolbar-brand { font-size: 13px; }
  .toolbar-actions { gap: 4px; }
  .toolbar-actions .btn { padding: 5px 10px; font-size: 12px; }
  /* 移动端只保留复制相关操作 */
  #btnTogglePanel, #btnModules, #btnCustomModule, #btnReset, #btnClear { display: none !important; }
}