.theme-markdown { --tool-color: #78b9ff; --card-glow: rgba(120, 185, 255, 0.15); }
.markdown-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.markdown-toolbar .field { flex: 1; min-width: 180px; }
.markdown-toolbar .toolbar { margin-left: auto; }
.markdown-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.markdown-panel .numbered-editor .editor { height: 65vh; min-height: 400px; }
.markdown-source-pane.is-dragging { border-color: var(--cyan); }
.markdown-preview {
  height: 65vh;
  min-height: 400px;
  padding: 26px;
  overflow: auto;
  color: #243247;
  background: #fff;
  color-scheme: light;
  font: 14px/1.85 var(--sans);
  overflow-wrap: anywhere;
}
.markdown-preview :first-child { margin-top: 0; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { margin: 1.3em 0 .65em; color: #0f172a; line-height: 1.4; }
.markdown-preview h1 { font-size: 28px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.markdown-preview h2 { font-size: 22px; }
.markdown-preview h3 { font-size: 18px; }
.markdown-preview p, .markdown-preview ul, .markdown-preview ol { margin: 0 0 1em; }
.markdown-preview li > p { margin-bottom: .5em; }
.markdown-preview ul, .markdown-preview ol { padding-left: 1.6em; }
.markdown-preview li + li { margin-top: .3em; }
.markdown-preview a { color: #2563eb; text-decoration: underline; }
.markdown-preview blockquote { margin: 1em 0; padding: 8px 14px; border-left: 4px solid #cbd5e1; color: #64748b; background: #f8fafc; }
.markdown-preview blockquote > :last-child { margin-bottom: 0; }
.markdown-preview pre { max-width: 100%; overflow: auto; margin: 1em 0; padding: 14px; border-radius: 8px; background: #f1f5f9; line-height: 1.6; }
.markdown-preview code { padding: 2px 4px; border-radius: 4px; background: #f1f5f9; font: .9em/1.6 var(--mono); }
.markdown-preview pre code { padding: 0; border-radius: 0; white-space: pre; }
.markdown-preview table { width: 100%; margin: 1em 0; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.markdown-preview th, .markdown-preview td { padding: 9px 10px; border: 1px solid #dbe3ed; text-align: left; vertical-align: top; }
.markdown-preview th { font-weight: 650; background: #f1f5f9; }
.markdown-preview td[align="center"], .markdown-preview th[align="center"] { text-align: center; }
.markdown-preview td[align="right"], .markdown-preview th[align="right"] { text-align: right; }
.markdown-preview hr { border: 0; border-top: 1px solid #e2e8f0; margin: 24px 0; }
.markdown-preview input[type="checkbox"] { margin-right: 5px; accent-color: #2563eb; }
.markdown-image-note, .markdown-empty { color: #64748b; }
html.markdown-preview-open { overflow: hidden; }
.markdown-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: var(--bg-elevated);
}
.markdown-fullscreen[open] { display: flex; flex-direction: column; }
.markdown-fullscreen::backdrop { background: var(--bg); }
.markdown-fullscreen > .editor-pane-head { flex: 0 0 auto; }
.markdown-fullscreen .markdown-preview { flex: 1; height: auto; min-height: 0; padding: 30px max(24px, calc((100vw - 960px) / 2)); }
@media (max-width: 960px) { .markdown-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .markdown-toolbar { align-items: stretch; }
  .markdown-toolbar .field, .markdown-toolbar .toolbar { flex-basis: 100%; }
  .markdown-toolbar .toolbar .btn { flex: 1; }
  .markdown-panel .numbered-editor .editor, .markdown-preview { height: 48vh; min-height: 290px; }
  .markdown-preview { padding: 18px; font-size: 13px; }
  .markdown-preview h1 { font-size: 24px; }
  .markdown-fullscreen .markdown-preview { padding: 22px 18px; }
}