/* --- SPKB-like layout: sidebar + stacked sections --- */
html { scroll-behavior: smooth; }

/* two-column layout */
.detail-grid-spkb{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;                 /* 中间空隙更大 */
  align-items: start;
}

/* main content centered like SPKB */
.detail-main-spkb{
  min-width: 0;
  max-width: 920px;          /* 主内容不要铺满全屏 */
  width: 100%;
  justify-self: start;       /* 也可以改成 center，看你想更居中还是更靠左 */
}

/* Sidebar box */
.detail-toc-spkb{
  position: sticky;
  top: 88px;                 /* 按你的 navbar 高度调 */
  align-self: start;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px;
}

.toc-title{
  font-weight: 600;
  margin: 4px 8px 8px;
}

/* Make TOC look like SPKB */
.detail-toc-spkb .list-group-item{
  border: 0;
  border-radius: 10px;
  margin: 2px 0;
  padding: 8px 10px;
}

.toc-subitem{
  padding-left: 22px !important;
  position: relative;
}
.toc-subitem::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  transform: translateY(-50%);
}

.toc-link.active{
  background: rgba(13,110,253,.12); /* Bootstrap primary 的淡高亮 */
  font-weight: 600;
}

/* Section spacing + framed blocks */
.section-card{
  margin-bottom: 26px;       /* 上下间隔更大（你要的） */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
}

.section-title{
  font-weight: 600;
  margin-bottom: 12px;
}

.section-subtitle{
  font-weight: 600;
  margin-bottom: 10px;
}

/* Keep anchors from hiding under sticky header */
.anchor-card{
  scroll-margin-top: 96px;
}

/* viewer */
.viewer-wrap{
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
.viewer{
  width: 100%;
  height: 520px;
}

/* long sequence */
.mono{
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 992px){
  .detail-grid-spkb{
    grid-template-columns: 1fr;
  }
  .detail-toc-spkb{
    position: relative;
    top: auto;
  }
  .detail-main-spkb{
    max-width: 100%;
  }
  .viewer{
    height: 420px;
  }
}
html { scroll-behavior: smooth; }

/* Layout: sidebar + stacked content */
.detail-grid-spkb{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;              /* 中间间隔更大 */
  align-items: start;
}

/* Sidebar */
.detail-toc-spkb{
  position: sticky;
  top: 88px;              /* 按navbar高度调 */
  align-self: start;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 14px;
}

.toc-title{
  font-weight: 700;
  font-size: 16px;        /* 目录标题更大 */
  margin: 2px 8px 10px;
}

/* 目录字体更大 */
.detail-toc-spkb .list-group-item{
  border: 0;
  border-radius: 10px;
  margin: 3px 0;
  padding: 10px 12px;
  font-size: 15.5px;
}

.toc-subitem{
  padding-left: 26px !important;
  position: relative;
}
.toc-subitem::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  transform: translateY(-50%);
}

/* active 高亮更明显一点 */
.toc-link.active{
  background: rgba(13,110,253,.14);
  font-weight: 700;
}

/* 右侧整体字体更大 */
.detail-main-spkb{
  min-width: 0;
  max-width: 980px;
  width: 100%;
  font-size: 15.5px;
}

/* 每块模块用框框+更大间距 */
.section-card{
  margin-bottom: 26px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
}

.section-title{
  font-weight: 700;
  font-size: 16px;       /* 右侧标题更大 */
  margin-bottom: 12px;
}

.section-subtitle{
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 10px;
}

/* 避免跳转被navbar挡住 */
.anchor-card{
  scroll-margin-top: 96px;
}

/* viewer */
.viewer-wrap{
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
}
.viewer{
  width: 100%;
  height: 560px;
}

/* long sequences */
.mono{
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* table cosmetics */
.table th{ white-space: nowrap; }
.w-40{ width: 40%; }

/* Responsive */
@media (max-width: 992px){
  .detail-grid-spkb{ grid-template-columns: 1fr; }
  .detail-toc-spkb{ position: relative; top: auto; }
  .detail-main-spkb{ max-width: 100%; }
  .viewer{ height: 420px; }
}