/* CreatesOnline Rich Text Editor — self-hosted, zero-dependency, theme-aware. */
.co-rte { border: 1px solid var(--border, #2a2f3a); border-radius: 12px; overflow: hidden; background: var(--bg, #10141c); }
.co-rte.co-rte--focus { border-color: #2563ff; }
.co-rte__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-rte__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; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.co-rte__btn:hover { background: rgba(255,255,255,.08); color: var(--fg, #e6e9ef); }
.co-rte__btn.is-active { background: rgba(37,99,255,.2); color: #8ab4f8; }
.co-rte__btn b, .co-rte__btn i { font-style: inherit; }
.co-rte__sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--border, #2a2f3a); }
.co-rte__select { background: var(--bg,#10141c); color: var(--fg,#e6e9ef); border: 1px solid var(--border,#2a2f3a); border-radius: 7px; height: 30px; font-size: .82rem; padding: 0 6px; }
.co-rte__area {
  min-height: 400px; max-height: 70vh; overflow-y: auto; padding: 16px 18px;
  color: var(--fg, #e6e9ef); line-height: 1.65; outline: none; font-size: .95rem;
}
.co-rte__area:empty::before { content: attr(data-placeholder); color: var(--fg-subtle, #5b6472); }
.co-rte__area h1 { font-size: 1.7rem; margin: .6em 0 .3em; }
.co-rte__area h2 { font-size: 1.4rem; margin: .6em 0 .3em; }
.co-rte__area h3 { font-size: 1.2rem; margin: .6em 0 .3em; }
.co-rte__area h4 { font-size: 1.05rem; margin: .6em 0 .3em; }
.co-rte__area p { margin: .5em 0; }
.co-rte__area ul, .co-rte__area ol { margin: .5em 0; padding-inline-start: 1.6em; }
.co-rte__area blockquote { margin: .6em 0; padding: .3em 1em; border-inline-start: 3px solid #2563ff; color: var(--fg-muted,#8b93a7); }
.co-rte__area 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, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.co-rte__area code { background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.co-rte__area img { max-width: 100%; height: auto; border-radius: 6px; }
.co-rte__area a { color: #6ea8ff; }
.co-rte__area hr { border: 0; border-top: 1px solid var(--border,#2a2f3a); margin: 1em 0; }
.co-rte__area table { border-collapse: collapse; width: 100%; margin: .6em 0; }
.co-rte__area th, .co-rte__area td { border: 1px solid var(--border,#2a2f3a); padding: 6px 10px; }
.co-rte__foot { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; border-top: 1px solid var(--border,#2a2f3a); background: var(--surface,#161a23); color: var(--fg-subtle,#5b6472); font-size: .74rem; }

/* Media picker dialog */
.co-rte-media { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 18px; }
.co-rte-media.open { display: flex; }
.co-rte-media__panel { width: min(920px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface,#161a23); border: 1px solid var(--border,#2a2f3a); border-radius: 14px; overflow: hidden; }
.co-rte-media__head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border,#2a2f3a); }
.co-rte-media__head input[type=search] { flex: 1; }
.co-rte-media__body { padding: 14px 16px; overflow-y: auto; }
.co-rte-media__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.co-rte-media__tile { border: 1px solid var(--border,#2a2f3a); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--bg,#10141c); }
.co-rte-media__tile:hover { border-color: #2563ff; }
.co-rte-media__tile img { width: 100%; height: 96px; object-fit: cover; display: block; }
.co-rte-media__tile span { display: block; padding: 5px 7px; font-size: .72rem; color: var(--fg-muted,#8b93a7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-rte-media__foot { padding: 12px 16px; border-top: 1px solid var(--border,#2a2f3a); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }