@charset "UTF-8";
/* 隐藏元素 */
 .d-none {
   display: none;
 }
 /* 移动端菜单按钮 */
 .mobile-menu-toggle {
   display: none;
   position: fixed;
   top: 10px;
   left: 10px;
   z-index: 100;
   width: 40px;
   height: 40px;
   background-color: #0066cc;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   align-items: center;
   justify-content: center;
 }

 /* 容器样式 */
 .content-container {
   display: flex;
   padding: 0 25px;
   column-gap: 80px;
   height: calc(100% - 40px);
 }
 /* a标签通用样式 */
 .content-container a {
   text-decoration: none;
 }
 /* ul通用样式 */
 .content-container ul {
   list-style: none;
 }

 .content-container .main {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0%
}

 .content-container .side-menu__item-label-wrapper {
   display: flex;
 }
 /* 目录 */
 .content-container .side-menu__navlink {
   --active-color: rgb(29, 74, 153);
   display: flex;
   align-items: center;
   column-gap: 4px;
   font-size: 16px;
   line-height: 2;
   color: rgb(67, 75, 81);
   font-weight: bold;
   cursor: pointer;
   transition: color 300ms linear, padding 0.2s ease;
   padding: 4px 8px;
   border-radius: 4px;
   position: relative;
 }
 
.side-menu-select{
	color:rgb(29, 74, 153);
} 

 /* 导航项悬停效果 */
 .content-container .side-menu__navlink:hover {
   background-color: rgba(29, 74, 153, 0.05);
   padding-left: 12px;
 }

 /* 导航项点击波纹效果 */
 .content-container .side-menu__navlink::after {
   content: '';
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
   animation: ripple 0.6s linear;
   background-color: rgba(29, 74, 153, 0.2);
 }

 @keyframes ripple {
   to {
     transform: scale(2.5);
     opacity: 0;
   }
 }

 .content-container .side-menu__submenu .side-menu__navlink {
   font-size: 14px;
   color: rgb(80, 91, 97);
   font-weight: normal;
 }

 .content-container
   .side-menu__submenu
   .side-menu__navlink.side-menu__navlink--active {
   color:  rgb(29, 74, 153);
   background-color: rgba(29, 74, 153, 0.08);
 }

 /* 目录展开/收缩指示器 */
 .content-container .side-menu__navlink-expand-indicator {
   width: 16px;
   height: 16px;
   fill: currentColor;
  /* transition: transform 300ms linear; */
 }

 .content-container .side-menu__submenu {
   padding-left: 20px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 500ms cubic-bezier(0, 1, 0, 1);
 }

 /* 目录展开/收缩指示器 - 展开状态 */
 .content-container
   .side-menu__item-checkbox:checked
   + .side-menu__item-label-wrapper
   .side-menu__navlink-expand-indicator {
   transform: rotateX(180deg);
 }

 .content-container
   .side-menu__item--has-children:has(
     > .side-menu__submenu
       > .side-menu__item
       > .side-menu__item-label-wrapper
       > .side-menu__navlink--active
   )
   > .side-menu__item-label-wrapper
   .side-menu__navlink {
   color:  rgb(29, 74, 153);
 }

 .content-container
   .side-menu__item-checkbox:checked
   + .side-menu__item-label-wrapper
   + .side-menu__submenu {
   max-height: 1000px;
   transition: max-height 500ms ease-in-out;
 }

 .content-container .main {
   display: flex;
   flex-direction: column;
   row-gap: 25px;
   overflow-y: auto;
   padding-right: 15px;
 }

 .content-container .main__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
 }

 .content-container .main__header-buttons {
   display: flex;
   align-items: center;
   column-gap: 15px;
 }

 .content-container .main__header-button {
   display: flex;
   align-items: center;
   height: 36px;
   font-size: 14px;
   padding: 0 24px;
   background-color: #0066cc;
   color: #fff;
   border: 1px solid transparent;
   border-radius: 18px;
   cursor: pointer;
   box-shadow: 0 2px 0 rgba(5, 175, 255, 0.1);
   transition: all 0.2s ease;
   position: relative;
   overflow: hidden;
 }

 /* 按钮悬停效果 */
 .content-container .main__header-button:hover {
   background-color: #2384d9;
   box-shadow: 0 4px 8px rgba(5, 175, 255, 0.2);
 }

 /* 下一节按钮选中动画效果 */
 .content-container .main__header-button:not(:disabled):active {
   background-color: #004da6;
   box-shadow: 0 2px 0 rgba(5, 175, 255, 0.1);
   animation: pulse 0.5s ease-in-out;
 }

 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.7);
   }
   70% {
     box-shadow: 0 0 0 10px rgba(0, 102, 204, 0);
   }
   100% {
     box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
   }
 }

 .content-container .main__header-button:disabled {
   cursor: not-allowed;
   color: rgba(0, 0, 0, 0.25);
   border-color: #d9d9d9;
   background-color: rgba(0, 0, 0, 0.04);
   box-shadow: none;
 }

 .content-container .main__header-title {
   font-size: 22px;
   font-weight: normal;
   letter-spacing: 1.5px;
   position: relative;
   padding-left: 15px;
 }

 /* 标题装饰 */
 .content-container .main__header-title::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 4px;
   height: 20px;
   background-color: #0066cc;
   border-radius: 2px;
 }

 .content-container .main__video-anchor {
   
   /* aspect-ratio: 16/9; */
   background-color: #333;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 /* 视频容器悬停效果 */
 .content-container .main__video-anchor:hover {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   transform: translateY(-3px);
 }

 /* 视频播放按钮 */
 .content-container .main__video-anchor::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(4px);
   transition: all 0.3s ease;
   z-index: -9999;
 }

 .content-container .main__video-anchor:hover::after {
   background-color: rgba(255, 255, 255, 0.3);
   transform: translate(-50%, -50%) scale(1.1);
 }

 /* 侧边栏样式优化 */
 .sidebar {
   width: 280px;
   overflow-y: auto;
   max-height: 100%;
   padding-right: 10px;
   scrollbar-width: thin;
   scrollbar-color: rgba(29, 74, 153, 0.3) transparent;
 }

 .sidebar::-webkit-scrollbar {
   width: 6px;
 }

 .sidebar::-webkit-scrollbar-thumb {
   background-color: rgba(29, 74, 153, 0.3);
   border-radius: 3px;
 }

 .sidebar::-webkit-scrollbar-track {
   background-color: transparent;
 }

 /* 响应式设计 - 平板设备 */
 @media (max-width: 1024px) {
   .content-container {
     column-gap: 40px;
     padding: 0 15px;
   }
   
   .sidebar {
     width: 240px;
   }
   
   .main__header-title {
     font-size: 20px;
   }
   
   .main__header-button {
     padding: 0 18px;
     font-size: 13px;
   }
 }

 /* 响应式设计 - 移动设备 */
 @media (max-width: 768px) {
   body {
     padding-top: 15px;
   }
   
   .content-container {
     flex-direction: column;
     height: calc(100% - 15px);
     padding: 0 10px;
     column-gap: 0;
     row-gap: 15px;
   }
   
   .mobile-menu-toggle {
     display: flex;
   }
   
   .sidebar {
     position: fixed;
     top: 0;
     left: -280px;
     height: 100%;
     width: 280px;
     background-color: white;
     z-index: 99;
     padding: 60px 10px 10px;
     box-shadow: 2px 0 10px rgba(0,0,0,0.1);
     transition: left 0.3s ease;
   }
   
   .sidebar.active {
     left: 0;
   }
   
   .main {
     width: 100%;
     height: 100%;
   }
   
   .main__header {
     flex-direction: column;
     align-items: flex-start;
     row-gap: 15px;
   }
   
   .main__header-buttons {
     width: 100%;
     justify-content: space-between;
   }
   
   .main__header-button {
     flex: 1;
     justify-content: center;
     max-width: calc(50% - 8px);
   }
   
   .main__header-title {
     font-size: 18px;
     width: 100%;
   }
   
   .main__video-anchor {
     border-radius: 4px;
   }
   
   .main__video-anchor::after {
     width: 60px;
     height: 60px;
   }
 }