/* ---------- Rendered markdown (E1, E14) ---------- */
.md { font-size: 16px; line-height: 1.7; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 14px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { line-height: 1.3; margin: 26px 0 10px; font-weight: 650; letter-spacing: -.01em; }
.md h1 { font-size: 1.6em; }
.md h2 { font-size: 1.35em; }
.md h3 { font-size: 1.15em; }
.md h4, .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 1.5em; }
.md li { margin: 4px 0; }
.md li > p { margin: 0 0 6px; }
.md li::marker { color: var(--text-3); }
.md li:has(> .task-box), .md li:has(> p > .task-box) { list-style: none; margin-left: -1.3em; }
.md .task-box { color: var(--text-3); }
.md .task-box.checked { color: var(--success); }
.md a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.md a:hover { text-decoration-thickness: 2px; }
.md strong { font-weight: 650; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.md blockquote {
  margin: 0 0 14px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border-strong); color: var(--text-2);
}
.md img.md-img { max-width: 100%; height: auto; border-radius: 12px; cursor: zoom-in; }
.md :not(pre) > code {
  font: .875em/1.4 var(--mono);
  background: var(--bg-soft);
  padding: .15em .4em; border-radius: 6px;
  overflow-wrap: anywhere;
}
.md details { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; }
.md details > summary { cursor: pointer; font-weight: 500; }
.md kbd { font: .85em var(--mono); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; }
.md sup a, .md .footnotes { font-size: .85em; }
.md .footnotes { color: var(--text-2); border-top: 1px solid var(--border); margin-top: 20px; padding-top: 8px; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.md th, .md td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.md th { background: var(--bg-soft); font-weight: 600; white-space: nowrap; }
.md tr:last-child td { border-bottom: 0; }
.md td + td, .md th + th { border-left: 1px solid var(--border); }

/* ---------- Code blocks (E3, E4) ---------- */
.code-block {
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid var(--border);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 4px 14px;
  background: var(--code-head);
  font-size: 12.5px; color: var(--text-2);
  position: sticky; top: 0;
}
.code-lang { font-family: var(--mono); text-transform: lowercase; }
.code-actions { display: flex; gap: 2px; }
.code-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 7px;
  font-size: 12.5px; color: var(--text-2);
  transition: background .15s, color .15s;
}
.code-btn:hover { background: var(--bg-hover); color: var(--text); }
.code-btn.done { color: var(--success); }
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code-block code { font: 13.5px/1.6 var(--mono); background: none !important; padding: 0 !important; tab-size: 4; }
.code-block.wrap pre { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 560px) { .code-btn span { display: none; } }

/* Mermaid (E12) */
.mermaid-view { padding: 16px; display: flex; justify-content: center; overflow-x: auto; background: var(--bg); }
.mermaid-view svg { max-width: 100%; height: auto; }
.code-block.show-diagram pre { display: none; }
.code-block.show-diagram.show-source pre { display: block; }

/* ---------- Math (E6, E7) ---------- */
.math { cursor: copy; }
.math-display { display: block; overflow-x: auto; overflow-y: hidden; margin: 0 0 14px; padding: 4px 0; text-align: center; }
.math-raw { font-family: var(--mono); font-size: .9em; color: var(--text-2); cursor: default; }
.md .katex { font-size: 1.08em; }
.md .katex-display { margin: 0; }