/* ── 教程页面布局（改编自 cn1/public/style/style-blog.css）── */

html { scroll-padding-top: calc(var(--nav-height) + 12px); }

.pgbody {
  width: 100%;
}

/* 左侧固定菜单 */
.left-menu {
  width: 30%;
  float: left;
  /* padding: 10px 0; */
}
.tutorial-menu {
  position: fixed;
  top: var(--nav-height);
  width: 25%;
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  border-right: 1px solid var(--c-border);
  background: var(--c-bg-grey);
}

/* 右侧内容区 */
@media (min-width: 768px) {
  .content-right {
    margin-left: 25%;
    /* border-left: 1px solid var(--c-border); */
    padding: 24px 40px 48px;
  }
}
@media (max-width: 767px) {
  .left-menu { width: 100%; float: none; }
  .content-right { margin: 0; padding: 16px; }
  .tutorial-menu { width: 100%; position: relative; height: auto; }
}

/* 搜索区 */
.sidebar-search {
  display: flex;
  align-items: center;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
#kws {
  flex: 1;
  width: calc(100% - 36px);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  outline: none;
}
#kws:focus { border-color: var(--c-primary); }
#tree-qry {
  background: none;
  border: none;
  color: var(--c-primary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
}
#tree-qry:hover { color: var(--c-primary-dark); }

/* 搜索结果 */
#search-result {
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-border);
  display: none;
  z-index: 1000;
  position: absolute;
  top: 48px;
  left: 0;
  padding: 8px;
  list-style: none;
  box-shadow: var(--shadow);
}
#search-result li { line-height: 32px; list-style: none; padding: 4px 0; }
#search-result a { display: block; font-size: 13px; }

/* 目录树 */
#tree {
  max-height: calc(100vh - var(--nav-height) - 56px);
  overflow-y: auto;
}
/* 自定义树形菜单 */
.tut-tree, .tut-tree ul { list-style: none; padding: 0; margin: 0; }
.tut-node {
  display: flex;
  align-items: baseline;
  padding: 12px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
  gap: 4px;
}
.tut-node:hover { background: rgba(230,48,39,.06); color: var(--c-primary); }
.tut-node.tut-selected { background: #fde8e7; color: var(--c-primary); font-weight: 500; }
.tut-toggle {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--c-text-muted);
  user-select: none;
}
.tut-node-label { flex: 1; }
.tut-node a { color: inherit; }
.tut-children { padding-left: 14px; }

/* 移动端侧边栏展开按钮 */
#menu-expand-button {
  display: none;
  width: 100%;
  padding: 10px 16px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}
@media (max-width: 767px) {
  #menu-expand-button { display: block; }
  #left-menu { display: none; }
  #left-menu.open { display: block; }
}

/* 上/下一节按钮 */
.page-button {
  display: inline-block;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius);
  padding: 5px 20px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 20px;
  transition: background var(--transition), color var(--transition);
}
.page-button:hover {
  background: var(--c-primary);
  color: #fff;
}

/* 文章内容区 */
.blog-page-content h1 {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--c-navy);
  padding: 8px 0 16px;
  border-bottom: 2px solid var(--c-primary);
  margin-bottom: 20px;
}
.blog-page-content h2 {
  font-size: 1.3em;
  font-weight: 700;
  color: var(--c-navy);
  padding: 8px 0 8px;
  border-left: 3px solid var(--c-primary);
  padding-left: 10px;
}
.blog-page-content h3 { font-size: 1.1em; }
.blog-page-content .subtitle-left { font-size: 1.2em; font-weight: bold; }
.blog-page-content .hide { display: none; }
.blog-page-content .box100 { clear: none; }
.blog-page-content img { max-width: 90%; padding-left: 16px; }
.blog-page-content table { border-collapse: collapse; }
.blog-page-content table, .blog-page-content th, .blog-page-content td {
  border: 1px solid var(--c-border);
  padding: 4px 8px;
}

/* 视频框 */
.video-box {
  width: 80%;
  max-width: 700px;
  margin-bottom: 20px;
  background: var(--c-navy);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-box.hide { display: none; }
@media (max-width: 767px) { .video-box { width: 100%; } }

/* 视频懒加载占位符 */
.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--c-navy);
}
.video-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(230,48,39,.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;
  transition: background var(--transition), transform var(--transition);
  pointer-events: none;
}
.video-placeholder:hover .video-play-btn {
  background: var(--c-primary);
  transform: scale(1.1);
}

/* 页内目录（blog-header）*/
.blog-header {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0;
  background: var(--c-bg-grey);
  display: block;

  /* background: linear-gradient(135deg, rgba(230,48,39,.3), rgba(58,140,204,.3));
  border: 1px solid rgba(230,48,39,.15); */
  /* border-radius: 14px; padding: 22px 26px; margin-bottom: 22px;   */
}
/* 宽屏：固定在右侧 */
@media (min-width: 768px) {
  .blog-header {
    position: fixed;
    top: calc(var(--nav-height) + 32px);
    right: 32px;
    width: 240px;
    z-index: 50;
  }
}
/* 窄屏（手机）：内嵌在正文中 */
@media (max-width: 767px) {
  .blog-header { position: static; width: 100%; margin-bottom: 16px; }
  .blog-hh { width: 100%; }
}
.blog-header ul { padding: 8px 16px 0 4px; }
.blog-header li {
  line-height: 32px;
  list-style: none;
  padding-left: 0;
}
.blog-header li:hover { color: var(--c-primary); }
.blog-header .header1 { padding-left: 0; }
.blog-header .header2 { padding-left: 16px; }
.blog-header .header3 { padding-left: 32px; }
.blog-header a { text-decoration: none; color: inherit; font-size: 13px; }
.blog-header a:hover { color: var(--c-primary); }

/* 正文 */
.blog { line-height: 1.9; }
.blog img { max-width: 100%; }

li { list-style: inherit; }