/* ===== 重置 & 全局 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #222; background: #f7f7f8; }

/* ===== Header ===== */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #fff; border-bottom: 1px solid #eee;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo-img { border-radius: 8px; }
.brand-text h1 { font-size: 18px; font-weight: 600; }
.brand-text .sub { font-size: 12px; color: #888; margin-top: 2px; }
.actions { display: flex; align-items: center; gap: 6px; }
.actions button {
  padding: 6px 14px; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 13px;
}
.actions button:hover { background: #f0f0f0; }
.actions button.primary { background: #6C5CE7; color: #fff; border-color: #6C5CE7; }
.actions button.primary:hover { background: #5a4bd1; }
.actions button:disabled { opacity: .5; cursor: not-allowed; }
.sep { width: 1px; height: 20px; background: #ddd; margin: 0 4px; }

/* ===== Main ===== */
main {
  display: flex; height: calc(100vh - 55px);
}
#editor-pane, #preview-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
#editor-pane { border-right: 1px solid #eee; }
textarea {
  flex: 1; width: 100%; padding: 16px; border: none; resize: none;
  font-family: "SF Mono", Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.6;
  outline: none; background: #fafafa;
}
.statusbar {
  padding: 6px 16px; font-size: 12px; color: #888;
  border-top: 1px solid #eee; display: flex; gap: 14px; background: #fff;
}

/* ===== Preview ===== */
#preview-pane { overflow: auto; background: #fff; }
.markdown-body { padding: 24px 32px; line-height: 1.8; font-size: 15px; }
.markdown-body h1 { font-size: 24px; margin: 24px 0 16px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.markdown-body h2 { font-size: 20px; margin: 20px 0 12px; }
.markdown-body h3 { font-size: 17px; margin: 16px 0 10px; }
.markdown-body p { margin: 10px 0; }
.markdown-body ul, .markdown-body ol { padding-left: 24px; margin: 10px 0; }
.markdown-body li { margin: 4px 0; }
.markdown-body code {
  background: #f4f4f5; padding: 2px 6px; border-radius: 3px;
  font-family: Consolas, "Courier New", monospace; font-size: .9em;
}
.markdown-body pre {
  background: #f6f8fa; padding: 16px; border-radius: 6px; overflow: auto; margin: 12px 0;
}
.markdown-body pre code { background: transparent; padding: 0; }
.markdown-body blockquote {
  border-left: 4px solid #ddd; padding: 0 16px; color: #666; margin: 12px 0;
}
.markdown-body table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.markdown-body th, .markdown-body td {
  border: 1px solid #ddd; padding: 8px 12px; text-align: left;
}
.markdown-body th { background: #f6f8fa; }
.markdown-body input[type="checkbox"] { margin-right: 6px; }

/* ===== Toast ===== */
#toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 10px 24px; border-radius: 6px;
  font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none;
}
#toast.show { opacity: 1; }

/* ===== Divider ===== */
#divider { width: 4px; cursor: col-resize; background: transparent; }
#divider:hover { background: #ddd; }

/* ===== Dark ===== */
body.dark { background: #1a1a2e; color: #eee; }
body.dark header { background: #16213e; border-color: #2a2a4a; }
body.dark textarea { background: #16213e; color: #eee; }
body.dark .statusbar { background: #16213e; border-color: #2a2a4a; }
body.dark .markdown-body { background: #1a1a2e; }
body.dark .markdown-body pre { background: #16213e; }
body.dark .markdown-body code { background: #2a2a4a; }
body.dark .actions button { background: #16213e; border-color: #2a2a4a; color: #eee; }

/* ===== KaTeX 块居中 ===== */
.katex-display { margin: 14px 0 !important; overflow-x: auto; }