.editorwrap{padding: 18px}
.editorgrid{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
@media (max-width: 1200px){.editorgrid{grid-template-columns: 1fr}}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
#mdArea{height: 56vh; min-height: 360px; line-height: 1.5}
.preview{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface2);
  padding: 14px 14px;
  overflow:auto;
  min-height: 360px;
}
.preview h1,.preview h2,.preview h3{margin-top: 18px}
.preview pre{
  background:#111827;color:#f9fafb;
  padding: 12px;
  border-radius: 10px;
  overflow:auto;
}
.preview code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 6px;
}
.preview blockquote{
  border-left: 4px solid rgba(37,99,235,.35);
  margin: 10px 0;
  padding: 6px 12px;
  color: var(--muted);
  background: #fff;
  border-radius: 10px;
}
.preview table{border-collapse:collapse;width:100%}
.preview td,.preview th{border:1px solid #c8c6c4;padding:8px}
.modalback{
  position:fixed;inset:0;
  background: rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  padding: 20px;
  z-index: 50;
}
.modal{
  width: 520px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.modaltitle{padding: 14px 16px;border-bottom: 1px solid var(--border);font-weight:800}
.modalbody{padding: 14px 16px}
.modalactions{padding: 14px 16px;border-top: 1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}