/* ============================================================
   应用层：渲染产物的落地样式
   ------------------------------------------------------------
   原则：这里只补「骨架层/内容层没覆盖到的语义」，
   颜色一律走令牌，不写死色值，保证四套主题自动生效。
   ============================================================ */

/* ---------- 宽屏：表格吃满、正文仍收窄 ----------
   6–7 列的速查总表挤在 72ch 里会疯狂折行并被迫横向滚动。
   做法：放开容器宽度，只把"纯文字"块钳回 72ch ——
   表格与九项表按可用宽度铺开，阅读舒适度不受影响。 */
@media (min-width: 1280px) {
  .content-inner {
    max-width: 1140px;
  }

  .content-main {
    max-width: none;
  }

  .md-p,
  .md-list,
  .doc-meta-body p,
  .entry-meta > p {
    max-width: 72ch;
  }
}

/* ---------- 文档 pane 切换 ---------- */
.doc-pane {
  display: none;
}

.doc-pane.is-active {
  display: block;
}

.toc-pane {
  display: none;
}

.toc-pane.is-active {
  display: block;
}

/* ---------- 加载 / 错误 ---------- */
.doc-loading {
  padding: var(--sp-10) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-4);
}

.doc-error {
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  border: 1px solid var(--c-warn-border);
  border-radius: var(--r-md);
  background: var(--c-warn-bg);
}

.doc-error h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}

.doc-error-msg {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  word-break: break-all;
}

.doc-error-hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  line-height: 1.7;
}

.doc-error-hint code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-accent-2);
}

/* ---------- 文档头 ---------- */
.doc-head {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

.doc-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.24;
  margin-bottom: var(--sp-4);
}

.doc-meta {
  margin-bottom: 0;
}

/* ---------- 通用正文块 ---------- */
.md-p {
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--c-text-2);
}

.md-p strong {
  color: var(--c-text);
  font-weight: 600;
}

.md-list {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-5);
  list-style: disc;
  font-size: var(--fs-sm);
  line-height: 1.74;
  color: var(--c-text-2);
}

.md-list li {
  margin: var(--sp-1) 0;
}

.md-h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-h3);
  color: var(--c-text);
}

.md-h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-body);
  color: var(--c-text-2);
}

/* ---------- 条目内的补充说明 ---------- */
.entry-note {
  align-self: center;
  font-size: var(--fs-micro);
  color: var(--c-text-4);
  max-width: 100%;
}

/* 「—」数据级（不适用 / 已排除） */
.grade-na {
  color: var(--c-text-4);
}

/* ---------- 文档说明（元信息条 + 规则卡片） ---------- */
.doc-brief {
  margin-top: var(--sp-4);
}

/* 元信息：收起卡片后依然可见，随时能看到"多久没更新" */
.brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.brief-meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.brief-meta-key {
  flex: none;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-4);
}

.brief-meta-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

/* ---------- 卡片区 ---------- */
.brief-cards {
  margin-top: var(--sp-3);
}

.brief-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-4);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.brief-toggle::-webkit-details-marker {
  display: none;
}

.brief-toggle:hover {
  color: var(--c-text-2);
}

.brief-toggle-text::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--c-accent);
  transition: transform var(--dur-mid) var(--ease-out);
}

.brief-cards[open] .brief-toggle-text::before {
  transform: rotate(90deg);
}

.brief-toggle-hint {
  margin-left: auto;
  color: var(--c-accent);
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

@media (min-width: 1280px) {
  .brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
  }
}

.brief-card {
  min-width: 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 2px solid var(--c-border-strong);
}

.brief-card.is-warn {
  border-left-color: var(--c-grade-b);
  background: linear-gradient(90deg, var(--c-warn-bg), transparent 72%);
}

.brief-card-label {
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
}

.brief-card.is-warn .brief-card-label {
  color: var(--c-grade-b);
}

.brief-card-body {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-3);
}

/* ---------- 数据分级图例 ---------- */
.brief-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.brief-legend-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

.brief-legend-text b {
  font-family: var(--font-mono);
  color: var(--c-text);
}

.brief-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.brief-dot.is-a {
  background: var(--c-grade-a);
}

.brief-dot.is-b {
  background: var(--c-grade-b);
}

.brief-dot.is-c {
  background: var(--c-grade-c);
}

/* ---------- 信源分级表 ---------- */
.brief-table-wrap {
  margin-top: var(--sp-2);
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}

.brief-table {
  width: 100%;
  min-width: 420px;
  font-size: var(--fs-xs);
}

.brief-table th,
.brief-table td {
  padding: 5px var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  color: var(--c-text-3);
}

.brief-table th {
  background: var(--c-surface-2);
  font-weight: 600;
  color: var(--c-text-2);
  white-space: nowrap;
}

.brief-table tbody tr:last-child td {
  border-bottom: 0;
}

.brief-table .is-code {
  font-family: var(--font-mono);
  color: var(--c-text);
  white-space: nowrap;
}

.brief-untitled {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

/* 引用块内嵌表格（P1–P4 分级表等） */
.entry-meta .quote-table,
.callout .quote-table {
  width: 100%;
  margin: var(--sp-2) 0;
  font-size: var(--fs-xs);
}

.quote-table th,
.quote-table td {
  padding: 4px 8px;
  border: 1px solid var(--c-border-strong);
  text-align: left;
  vertical-align: top;
}

.quote-table th {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-weight: 600;
}

.callout .quote-table th {
  background: transparent;
}

/* ---------- 待核清单容器 ---------- */
.pending-wrap {
  margin: var(--sp-6) 0 var(--sp-10);
}

/* ---------- 速查总表：可点击行 ---------- */
.summary-table tbody tr.is-jump {
  cursor: pointer;
}

/* 窄屏下收起速查总表的长文本列，只留「# / 物种 / 学名 / 数据级」四列。
   为什么不是让表格横向滚动：这张表是"找物种"的索引，
   把「数据级」滚出视野等于把最关键的一列藏起来。
   ⚠️ min-width 必须同时归零，否则 720px 的硬下限会继续逼出横向滚动。 */
@media (max-width: 1279px) {
  .summary-table [data-col*="结论"],
  .summary-table [data-col*="生态型"],
  .summary-table [data-col*="生活型"] {
    display: none;
  }

  .summary-table {
    min-width: 0;
  }
}

/* 「类 / #」这类极短列不折行，否则「石龙子」会被挤成竖排单字 */
.summary-table th:nth-child(1),
.summary-table td:nth-child(1),
.summary-table th:nth-child(2),
.summary-table td:nth-child(2) {
  white-space: nowrap;
}

.summary-table tbody tr.is-jump:hover td {
  background: var(--c-accent-soft);
}

/* ---------- 回到顶部（button 版） ---------- */
button.to-top {
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   双搜索
   ------------------------------------------------------------
   两套 UI 刻意长得不一样：
   物种卡 = 纯文本行（文档 › 组 › 名称），**无片段**
   全文卡 = 字段标签 + 高亮片段
   ============================================================ */

/* ---------- 物种搜索结果（侧栏内，替代目录） ---------- */
.species-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-10);
}

.search-count {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-4);
  text-transform: uppercase;
}

.search-empty-tip {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-4);
}

.sp-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.sp-card:hover,
.sp-card:focus-visible {
  background: var(--c-hover);
  outline: none;
}

.sp-path {
  font-size: var(--fs-micro);
  color: var(--c-text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.sp-main b {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.sp-sci {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-micro);
  color: var(--c-text-3);
}

.sp-main .grade {
  font-size: 9px;
  padding: 0 5px;
}

/* ---------- 全文搜索面板 ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh var(--sp-4) var(--sp-4);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  animation: overlay-in 140ms var(--ease-out);
}

.search-overlay[hidden] {
  display: none;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-panel {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: 74vh;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-bg-elev);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: panel-in 180ms var(--ease-out);
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.search-panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.search-panel-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--c-text-4);
}

.search-panel-head input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-size: var(--fs-body);
}

.search-panel-head input::placeholder {
  color: var(--c-text-4);
}

.search-panel-head input:focus {
  outline: none;
}

.search-panel-meta {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-4);
  border-bottom: 1px solid var(--c-border);
}

.search-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-2);
}

/* ---------- 全文结果卡 ---------- */
.ft-card {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.ft-card:hover,
.ft-card:focus-visible {
  background: var(--c-hover);
  outline: none;
}

.ft-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.ft-doc {
  padding: 0 5px;
  border-radius: var(--r-xs);
  border: 1px solid var(--c-border);
  font-size: var(--fs-micro);
  color: var(--c-text-3);
}

.ft-entry {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.ft-field {
  margin-left: auto;
  max-width: 38%;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft);
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  color: var(--c-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-snippet {
  font-size: var(--fs-xs);
  line-height: 1.68;
  color: var(--c-text-3);
  word-break: break-word;
}

.ft-snippet mark {
  padding: 0 2px;
  border-radius: var(--r-xs);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
}

/* 面板打开时锁住背后滚动（body 本身 overflow:hidden，这里只是防止误触） */
body.is-searching .content {
  overflow: hidden;
}

/* ---------- 轻提示（实时更新等） ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-8);
  z-index: var(--z-modal);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-bg-elev);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.toast[hidden] {
  display: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast[data-kind="live"]::before {
  content: "●";
  margin-right: 6px;
  font-size: 9px;
  vertical-align: middle;
  color: var(--c-grade-a);
}

/* ============================================================
   Admin 编辑
   ============================================================ */

/* ---------- 条目「编辑」入口 ---------- */
.entry-edit {
  margin-left: auto;
  align-self: center;
  padding: 2px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-micro);
  color: var(--c-text-3);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.entry-edit:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* ---------- 编辑态 ---------- */
.entry.is-editing {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent-soft), var(--shadow-2);
}

.entry.is-editing:hover {
  transform: none;
}

/* 行名锁定：视觉上明确"这格不能改" */
.nine-table td.is-locked {
  color: var(--c-text-3);
  cursor: not-allowed;
}

.nine-table td.is-locked::after {
  content: "🔒";
  margin-left: 4px;
  font-size: 9px;
  opacity: 0.45;
}

.cell-editor {
  width: 100%;
  min-height: 58px;
  padding: var(--sp-2);
  /* 用强调色描边：深色主题下细白边几乎不可见，用户看不出"这格能改" */
  border: 1px solid color-mix(in srgb, var(--c-accent) 32%, transparent);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.66;
  resize: vertical;
}

.cell-editor:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.cell-editor.is-error {
  border-color: var(--c-grade-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-grade-c) 22%, transparent);
}

.nine-table td.is-error {
  background: color-mix(in srgb, var(--c-grade-c) 10%, transparent);
}

/* ---------- 编辑工具条 ---------- */
.entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border-strong);
}

.entry-toolbar-hint {
  flex: 1 1 260px;
  font-size: var(--fs-micro);
  color: var(--c-text-4);
}

.entry-toolbar-error {
  flex: 1 1 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-warn-border);
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-2);
  white-space: pre-wrap;
}

.entry-toolbar-error[hidden] {
  display: none;
}

.icon-btn.is-primary {
  color: var(--c-accent-contrast);
  border-color: transparent;
  background: var(--c-accent);
}

.icon-btn.is-primary:hover {
  color: var(--c-accent-contrast);
  filter: brightness(1.08);
}

.icon-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---------- 解锁弹窗 ---------- */
.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  animation: overlay-in 140ms var(--ease-out);
}

.admin-overlay[hidden] {
  display: none;
}

.admin-dialog {
  width: min(420px, 100%);
  padding: var(--sp-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-bg-elev);
  box-shadow: var(--shadow-2);
  animation: panel-in 180ms var(--ease-out);
}

.admin-title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h3);
}

.admin-desc {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}

.admin-desc strong {
  color: var(--c-text-2);
}

.admin-input {
  width: 100%;
  height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.admin-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.admin-error {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-warn-border);
  border-radius: var(--r-sm);
  background: var(--c-warn-bg);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

.admin-error[hidden] {
  display: none;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ============================================================
   碎片文档视图
   ------------------------------------------------------------
   进入后整块替换主阅读器：左侧「文档 tab + 二级目录」，右侧正文。
   不使用九项表那套语义组件 —— 碎片文档是普通长文。
   ============================================================ */

/* 进入碎片视图：主侧栏让位，整块交给“碎片目录 + 正文”两栏 */
.app.is-snippets {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topbar"
    "content";
}

.app.is-snippets .sidebar {
  display: none;
}

.app.is-snippets .content-inner {
  display: none;
}

.app.is-snippets .content {
  overflow: hidden;
}

.snippet-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.snippet-shell[hidden] {
  display: none;
}

/* ---------- 左栏 ---------- */
.snippet-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--c-border);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.snippet-back {
  flex: none;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-4);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.snippet-back:hover {
  color: var(--c-accent);
  background: var(--c-hover);
}

.snippet-tabs {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}

.snippet-tab {
  padding: 7px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.snippet-tab:hover {
  color: var(--c-text);
  background: var(--c-hover);
}

.snippet-tab.is-active {
  color: var(--c-text);
  background: var(--c-accent-soft);
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.snippet-toc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-2) var(--sp-10);
}

/* ---------- 右栏 ---------- */
.snippet-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-10) var(--sp-16);
}

.snippet-body {
  /* 78ch 会让 5–6 列的表格被迫横向滚动；760px 是"中文行长可读 + 表格放得下"的折中 */
  max-width: 760px;
  margin: 0 auto;
}

/* 碎片文档不追求表格的固定列宽，允许自动压缩换行 */
.snippet-body .sub-table {
  min-width: 0;
}

.snippet-body .snip-h1 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-display);
}

.snippet-body .snip-h2 {
  margin: var(--sp-10) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-h2);
  scroll-margin-top: var(--sp-6);
}

.snippet-body .snip-h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-h3);
}

.snippet-body p {
  margin: var(--sp-3) 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}

.snippet-body strong {
  color: var(--c-text);
}

.snippet-body ul,
.snippet-body ol {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}

.snippet-body ul {
  list-style: disc;
}

.snippet-body ol {
  list-style: decimal;
}

.snippet-body li {
  margin: 4px 0;
}

.snippet-body blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-accent-soft);
}

.snippet-body blockquote p {
  margin: 0;
}

.snippet-body hr {
  margin: var(--sp-8) 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.snippet-body code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--c-accent-2);
}

.snippet-body .snip-code {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-elev);
  overflow-x: auto;
}

.snippet-body .snip-code code {
  padding: 0;
  background: none;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
}

.snippet-body .sub-table-wrap {
  margin: var(--sp-4) 0;
}

.snip-empty,
.snip-loading {
  padding: var(--sp-10) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-4);
}

.snip-empty-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-4);
}

/* ---------- 碎片视图响应式 ---------- */
@media (max-width: 900px) {
  .snippet-shell {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .snippet-main {
    padding: var(--sp-6) var(--sp-6) var(--sp-12);
  }
}

@media (max-width: 767px) {
  .snippet-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .snippet-side {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }

  /* 手机放不下第三栏：藏掉目录，只留文档 tab，正文占满 */
  .snippet-toc {
    display: none;
  }

  .snippet-tabs {
    flex-direction: row;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .snippet-tabs::-webkit-scrollbar {
    display: none;
  }

  .snippet-tab {
    flex: none;
    white-space: nowrap;
    box-shadow: none;
  }

  .snippet-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--c-accent);
  }

  .snippet-back {
    padding: var(--sp-2) var(--sp-3);
  }

  .snippet-main {
    padding: var(--sp-4) var(--sp-4) var(--sp-12);
  }
}

/* ---------- 顶栏按钮显隐 ---------- */
/* 用 .topbar > 提高特异性：.icon-btn 自带 display:inline-flex，
   同权重下谁后加载谁生效，很容易被布局层抢回去 */
.topbar > .topbar-menu {
  display: none;
}

/* 顶栏按钮文字从 900px 起就收起：768 时三组「碎片/编辑/全文」标题一起会把顶栏顶出去 */
@media (max-width: 900px) {
  .topbar .btn-label,
  .topbar #btnAdmin [data-admin-label] {
    display: none;
  }

  .topbar .icon-btn {
    padding: 0;
    width: 32px;
    min-width: 32px;
  }
}

@media (max-width: 767px) {
  .topbar > .topbar-menu {
    display: inline-flex;
  }

  .topbar > .topbar-rail-toggle {
    display: none;
  }
}

/* 420 以下：品牌标与主题切换也要让位，否则顶栏仍会溢出 */
@media (max-width: 420px) {
  .topbar .brand {
    display: none;
  }

  .topbar .theme-picker {
    display: none;
  }
}

/* 手机：学名整列收起，只留「# / 物种 / 数据级」——宽度实在不够 */
@media (max-width: 520px) {
  .summary-table [data-col*="学名"] {
    display: none;
  }
}

/* 顶栏挤不下「主题名 + T1」两段文字，与按钮标签同一个断点收起，只留色块与箭头 */
@media (max-width: 900px) {
  .theme-picker .theme-current-name,
  .theme-picker .theme-current-tag {
    display: none;
  }

  .theme-trigger {
    padding: 0 var(--sp-2);
  }
}

/* 收起态下隐藏品牌与 Tab 文案的密度问题，交给 layout.css 处理 */
.app.is-collapsed .doc-pane {
  /* 目录收起后正文自动变宽，无需额外处理 */
}