:root {
  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --bg-elev: #ffffff;
  --fg: #1f2328;
  --fg-muted: #59636e;
  --border: #d1d9e0;
  --border-soft: #e6eaef;
  --accent: #2f6feb;
  --accent-soft: rgba(47, 111, 235, 0.1);
  --code-bg: #f6f8fa;
  --shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
  --note: #0969da; --tip: #1a7f37; --important: #8250df; --warning: #9a6700; --caution: #cf222e;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --read-font: var(--font-sans);
  --read-size: 17px;
  --read-width: 760px;
  --bar-h: 52px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --bg-soft: #151b23; --bg-elev: #1c232c; --fg: #e6edf3; --fg-muted: #9198a1;
    --border: #3d444d; --border-soft: #262c34; --accent: #4493f8; --accent-soft: rgba(68, 147, 248, 0.15);
    --code-bg: #151b23; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --note: #4493f8; --tip: #3fb950; --important: #ab7df8; --warning: #d29922; --caution: #f85149;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117; --bg-soft: #151b23; --bg-elev: #1c232c; --fg: #e6edf3; --fg-muted: #9198a1;
  --border: #3d444d; --border-soft: #262c34; --accent: #4493f8; --accent-soft: rgba(68, 147, 248, 0.15);
  --code-bg: #151b23; --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --note: #4493f8; --tip: #3fb950; --important: #ab7df8; --warning: #d29922; --caution: #f85149;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  overflow: hidden;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Top bar ---------- */
.bar {
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.logo {
  font: 700 12px/1 var(--font-mono); letter-spacing: .04em;
  background: var(--accent); color: #fff; padding: 6px 7px; border-radius: 6px;
}
.doc-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modes {
  display: flex; background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 2px;
}
.modes button {
  border: 0; background: transparent; padding: 5px 12px; border-radius: 6px;
  color: var(--fg-muted); font-weight: 500;
}
.modes button[aria-selected="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.actions { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; }
.btn, .icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-soft); background: var(--bg);
  border-radius: 8px; height: 32px; padding: 0 10px; font-weight: 500;
  transition: background .15s, border-color .15s;
}
.icon-btn { width: 32px; padding: 0; justify-content: center; border-color: transparent; }
.btn:hover, .icon-btn:hover { background: var(--bg-soft); border-color: var(--border); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.ghost { border-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#theme-btn .moon { display: none; }
:root[data-theme="dark"] #theme-btn .sun { display: none; }
:root[data-theme="dark"] #theme-btn .moon { display: block; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px;
}
.menu > button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 10px; border-radius: 6px;
}
.menu > button:hover { background: var(--accent-soft); }
.menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 0; }
.menu-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; color: var(--fg-muted); }
.seg { display: flex; border: 1px solid var(--border-soft); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 4px 9px; font-size: 12px; }
.seg button + button { border-left: 1px solid var(--border-soft); }
.seg button.on, .seg button:hover { background: var(--accent-soft); color: var(--accent); }

.progress { position: fixed; top: var(--bar-h); left: 0; height: 2px; background: var(--accent); width: 0; z-index: 25; transition: width .08s linear; }

/* ---------- Layout ---------- */
.layout {
  height: calc(100% - var(--bar-h));
  display: grid;
  grid-template-columns: 0 1fr 1fr;
  transition: grid-template-columns .2s ease;
}
.layout.toc-open { grid-template-columns: 260px 1fr 1fr; }
.layout[data-mode="read"] { grid-template-columns: 0 0 1fr; }
.layout[data-mode="read"].toc-open { grid-template-columns: 260px 0 1fr; }
.layout[data-mode="edit"] { grid-template-columns: 0 1fr 0; }
.layout[data-mode="edit"].toc-open { grid-template-columns: 260px 1fr 0; }

.toc, .editor-pane, .preview-pane { min-width: 0; overflow: hidden; }
.toc { border-right: 1px solid var(--border-soft); background: var(--bg-soft); overflow-y: auto; }
.layout:not(.toc-open) .toc { visibility: hidden; border: 0; }
.toc-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 600; padding: 18px 18px 8px; }
#toc-list { padding: 0 10px 24px; }
#toc-list a {
  display: block; padding: 4px 8px; border-radius: 6px; color: var(--fg-muted);
  text-decoration: none; line-height: 1.35; font-size: 13px; border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toc-list a:hover { color: var(--fg); background: var(--accent-soft); }
#toc-list a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
#toc-list a[data-level="1"] { font-weight: 600; color: var(--fg); }
#toc-list a[data-level="3"] { padding-left: 20px; }
#toc-list a[data-level="4"], #toc-list a[data-level="5"], #toc-list a[data-level="6"] { padding-left: 32px; font-size: 12px; }
.toc-empty { color: var(--fg-muted); padding: 4px 8px; font-size: 13px; }

.editor-pane { border-right: 1px solid var(--border-soft); }
.layout[data-mode="edit"] .editor-pane { border-right: 0; }
#editor {
  width: 100%; height: 100%; resize: none; border: 0; outline: none;
  padding: 28px 32px; background: var(--bg-soft); color: var(--fg);
  font: 14px/1.7 var(--font-mono); tab-size: 2;
}
.layout[data-mode="edit"] #editor { padding: 40px max(32px, calc((100% - 860px) / 2)); }

.preview-pane { overflow-y: auto; scroll-behavior: smooth; }
.markdown-body {
  max-width: var(--read-width); margin: 0 auto; padding: 48px 32px 24px;
  font-family: var(--read-font); font-size: var(--read-size); line-height: 1.7;
}
.stats { max-width: var(--read-width); margin: 0 auto; padding: 16px 32px 64px; color: var(--fg-muted); font-size: 12px; border-top: 1px solid var(--border-soft); }

/* ---------- Markdown typography ---------- */
.markdown-body > :first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: var(--read-font); line-height: 1.25; margin: 1.8em 0 .6em; font-weight: 700; scroll-margin-top: 16px; position: relative;
}
.markdown-body h1 { font-size: 2.1em; letter-spacing: -.02em; padding-bottom: .3em; border-bottom: 1px solid var(--border-soft); }
.markdown-body h2 { font-size: 1.55em; letter-spacing: -.01em; padding-bottom: .3em; border-bottom: 1px solid var(--border-soft); }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1.05em; }
.markdown-body h5, .markdown-body h6 { font-size: .95em; color: var(--fg-muted); }
.markdown-body .anchor {
  position: absolute; left: -1.1em; padding-right: .3em; color: var(--fg-muted); text-decoration: none; opacity: 0; font-weight: 400;
}
.markdown-body :is(h1,h2,h3,h4,h5,h6):hover .anchor { opacity: 1; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body table, .markdown-body pre, .markdown-body details { margin: 0 0 1.1em; }
.markdown-body a { color: var(--accent); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; }
.markdown-body li + li { margin-top: .25em; }
.markdown-body li > ul, .markdown-body li > ol { margin: .25em 0 0; }
.markdown-body li.task { list-style: none; margin-left: -1.4em; }
.markdown-body li.task input { margin: 0 .5em 0 0; vertical-align: -.1em; accent-color: var(--accent); }
.markdown-body blockquote { margin-left: 0; padding: .1em 1em; color: var(--fg-muted); border-left: .25em solid var(--border); }
.markdown-body hr { border: 0; height: 1px; background: var(--border); margin: 2em 0; }
.markdown-body img { max-width: 100%; border-radius: 6px; }
.markdown-body code {
  font-family: var(--font-mono); font-size: .86em; background: var(--code-bg);
  padding: .15em .4em; border-radius: 5px; border: 1px solid var(--border-soft);
}
.markdown-body pre {
  position: relative; background: var(--code-bg); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 16px 18px; overflow-x: auto; line-height: 1.55;
}
.markdown-body pre code { background: none; border: 0; padding: 0; font-size: .82em; }
.markdown-body pre code.hljs { background: transparent; padding: 0; }
.copy-btn {
  position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); color: var(--fg-muted);
  opacity: 0; transition: opacity .15s;
}
.markdown-body pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.code-lang {
  position: absolute; top: 9px; right: 62px; font: 600 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-muted); opacity: .7; pointer-events: none;
}
.markdown-body pre:hover .code-lang { opacity: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 1.1em; }
.markdown-body table { border-collapse: collapse; font-size: .92em; margin: 0; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 7px 13px; }
.markdown-body th { background: var(--bg-soft); font-weight: 600; }
.markdown-body tr:nth-child(2n) td { background: color-mix(in srgb, var(--bg-soft) 50%, transparent); }
.markdown-body kbd {
  font: .8em var(--font-mono); padding: .15em .45em; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; background: var(--bg-soft);
}
.markdown-body details { border: 1px solid var(--border-soft); border-radius: 8px; padding: .5em 1em; }
.markdown-body summary { cursor: pointer; font-weight: 600; }
.markdown-body mark { background: #fff3a3; color: #1f2328; padding: 0 .15em; border-radius: 3px; }

/* GitHub-style alerts */
.markdown-body .alert { border-left: .25em solid var(--c); padding: .5em 1em; margin: 0 0 1.1em; border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--c) 6%, transparent); }
.markdown-body .alert > :last-child { margin-bottom: 0; }
.markdown-body .alert-title { color: var(--c); font-weight: 600; display: flex; align-items: center; gap: .4em; margin-bottom: .3em; }
.alert-note { --c: var(--note); } .alert-tip { --c: var(--tip); } .alert-important { --c: var(--important); }
.alert-warning { --c: var(--warning); } .alert-caution { --c: var(--caution); }

/* ---------- Overlays ---------- */
.drop-overlay {
  position: fixed; inset: 0; z-index: 50; display: none; place-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(3px);
}
.drop-overlay div { border: 2px dashed var(--accent); color: var(--accent); padding: 40px 56px; border-radius: 16px; font-size: 18px; font-weight: 600; background: var(--bg-elev); }
.drop-overlay.show { display: grid; }

dialog {
  border: 1px solid var(--border); border-radius: 14px; padding: 0; width: min(520px, calc(100% - 32px));
  background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog form { padding: 22px; }
dialog h2 { margin: 0 0 6px; font-size: 17px; }
.hint { margin: 0 0 14px; color: var(--fg-muted); font-size: 13px; }
#url-input {
  width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px;
  background: var(--bg); color: var(--fg); font: inherit;
}
#url-input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-weight: 500;
  transition: all .2s; pointer-events: none; z-index: 60; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .btn span { display: none; }
  .btn { width: 32px; padding: 0; justify-content: center; }
  .layout[data-mode="split"] { grid-template-columns: 0 0 1fr; }
  .modes button[data-mode="split"] { display: none; }
  .layout.toc-open { grid-template-columns: 0 0 1fr !important; }
  .layout[data-mode="edit"].toc-open, .layout[data-mode="edit"] { grid-template-columns: 0 1fr 0 !important; }
  .layout.toc-open .toc {
    position: fixed; top: var(--bar-h); left: 0; bottom: 0; width: min(280px, 85vw);
    z-index: 30; box-shadow: var(--shadow); visibility: visible;
  }
}
@media (max-width: 560px) {
  .bar { gap: 6px; padding: 0 8px; }
  .doc-title { display: none; }
  .modes button { padding: 5px 9px; }
  #share-btn { display: none; }
  .markdown-body { padding: 28px 16px 16px; }
  .stats { padding: 16px 16px 48px; }
  #editor, .layout[data-mode="edit"] #editor { padding: 20px 16px; }
  .markdown-body .anchor { display: none; }
}

/* ---------- Print ---------- */
@media print {
  body { overflow: visible; }
  .bar, .toc, .editor-pane, .progress, .stats, .copy-btn, .code-lang, .toast { display: none !important; }
  .layout { display: block; height: auto; }
  .preview-pane { overflow: visible; }
  .markdown-body { max-width: none; padding: 0; font-size: 11pt; }
  .markdown-body pre { white-space: pre-wrap; break-inside: avoid; }
}