{# 系统说明: docs/系统说明.md + h2 目录 #}
<div class="system-guide-page full">
    <div class="card system-guide-card">
        <div class="system-guide-head">
            <h2 style="margin:0">系统说明</h2>
            <p class="muted" style="margin:6px 0 0;font-size:.85rem">操作与逻辑按章节混排。默认不在顶栏显示；可在系统设置 → 导航显示中打开。</p>
        </div>
        <div class="system-guide-layout">
            {% if system_guide_toc %}
            <aside class="system-guide-toc" aria-label="章节目录">
                <div class="system-guide-toc-title">目录</div>
                <nav>
                    {% for item in system_guide_toc %}
                    <a href="#{{ item.id }}">{{ item.title }}</a>
                    {% endfor %}
                </nav>
            </aside>
            {% endif %}
            <article class="system-guide-body prose">
                {{ system_guide_html|safe }}
            </article>
        </div>
    </div>
</div>
<style>
.system-guide-page { grid-column: 1 / -1; }
.system-guide-card { padding: 16px 18px 28px; }
.system-guide-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 14px;
  align-items: start;
}
.system-guide-toc {
  position: sticky;
  top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(127,127,127,.25);
  border-radius: 8px;
  background: rgba(127,127,127,.06);
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.system-guide-toc-title {
  font-size: .78rem;
  font-weight: 600;
  opacity: .75;
  margin-bottom: 8px;
}
.system-guide-toc a {
  display: block;
  font-size: .84rem;
  line-height: 1.35;
  padding: 5px 0;
  text-decoration: none;
  color: inherit;
  opacity: .9;
}
.system-guide-toc a:hover { opacity: 1; text-decoration: underline; }
.system-guide-body { min-width: 0; line-height: 1.65; font-size: .92rem; }
.system-guide-body h1 { font-size: 1.35rem; margin: 0 0 12px; }
.system-guide-body h2 { font-size: 1.12rem; margin: 22px 0 10px; padding-top: 4px; scroll-margin-top: 12px; }
.system-guide-body h3 { font-size: 1rem; margin: 16px 0 8px; }
.system-guide-body p, .system-guide-body li { margin: 0 0 8px; }
.system-guide-body ul, .system-guide-body ol { padding-left: 1.35em; margin: 0 0 10px; }
.system-guide-body table { border-collapse: collapse; width: 100%; margin: 10px 0 14px; font-size: .86rem; }
.system-guide-body th, .system-guide-body td {
  border: 1px solid rgba(127,127,127,.35);
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
}
.system-guide-body code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .86em;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(127,127,127,.12);
}
.system-guide-body hr { border: 0; border-top: 1px solid rgba(127,127,127,.28); margin: 18px 0; }
@media (max-width: 820px) {
  .system-guide-layout { grid-template-columns: 1fr; }
  .system-guide-toc { position: static; max-height: none; }
  .system-guide-toc nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
}
</style>