/* CreatesOnline Markdown editor — self-hosted, zero-dependency, theme-aware. */
.co-md { border: 1px solid var(--border, #2a2f3a); border-radius: 12px; overflow: hidden; background: var(--bg, #10141c); }
.co-md.co-md--focus { border-color: #2563ff; }
.co-md__toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--border, #2a2f3a); background: var(--surface, #161a23);
}
.co-md__btn { background: transparent; border: 0; color: var(--fg-muted, #8b93a7); min-width: 30px; height: 30px; padding: 0 7px; border-radius: 7px; cursor: pointer; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
.co-md__btn:hover { background: rgba(255,255,255,.08); color: var(--fg, #e6e9ef); }
.co-md__sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--border, #2a2f3a); }
.co-md__modes { margin-inline-start: auto; display: inline-flex; border: 1px solid var(--border,#2a2f3a); border-radius: 8px; overflow: hidden; }
.co-md__modes button { background: transparent; border: 0; color: var(--fg-muted,#8b93a7); padding: 5px 10px; cursor: pointer; font-size: .78rem; }
.co-md__modes button.active { background: rgba(37,99,255,.2); color: #8ab4f8; }
.co-md__panes { display: grid; grid-template-columns: 1fr 1fr; }
.co-md[data-mode="edit"] .co-md__panes { grid-template-columns: 1fr; }
.co-md[data-mode="edit"] .co-md__preview { display: none; }
.co-md[data-mode="preview"] .co-md__panes { grid-template-columns: 1fr; }
.co-md[data-mode="preview"] .co-md__editor { display: none; }
.co-md__editor { border: 0; resize: vertical; width: 100%; min-height: 400px; padding: 14px 16px; background: transparent; color: var(--fg,#e6e9ef); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; line-height: 1.6; outline: none; }
.co-md__preview { min-height: 400px; max-height: 70vh; overflow-y: auto; padding: 14px 18px; border-inline-start: 1px solid var(--border,#2a2f3a); color: var(--fg,#e6e9ef); line-height: 1.65; }
.co-md[data-mode="preview"] .co-md__preview, .co-md[data-mode="edit"] .co-md__preview { border-inline-start: 0; }
.co-md__preview h1 { font-size: 1.7rem; } .co-md__preview h2 { font-size: 1.4rem; } .co-md__preview h3 { font-size: 1.2rem; }
.co-md__preview pre { background: rgba(0,0,0,.35); border: 1px solid var(--border,#2a2f3a); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, monospace; font-size: .85rem; }
.co-md__preview code { background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, monospace; }
.co-md__preview blockquote { border-inline-start: 3px solid #2563ff; margin: .6em 0; padding: .2em 1em; color: var(--fg-muted,#8b93a7); }
.co-md__preview img { max-width: 100%; height: auto; border-radius: 6px; }
.co-md__preview a { color: #6ea8ff; }
.co-md__preview ul, .co-md__preview ol { padding-inline-start: 1.5em; }
.co-md__foot { display: flex; justify-content: space-between; padding: 5px 10px; border-top: 1px solid var(--border,#2a2f3a); background: var(--surface,#161a23); color: var(--fg-subtle,#5b6472); font-size: .74rem; }
.co-md.co-md--full { position: fixed; inset: 3vh 3vw; z-index: 1500; box-shadow: 0 20px 60px rgba(0,0,0,.5); }