/* 基础重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
            list-style: none;
        }

        body {
            background-color: #f5f5f5;
            padding-bottom: 30px; /* 底部留空，避免内容被遮挡 */
        }

        /* 顶部导航 */
        .top-nav {
            width: 100%;
            height: 60px;
            background-color: #0d1729;
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: relative;
            z-index: 100;
        }

        .top-nav .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .top-nav .logo img {
            width: 36px;
            height: 36px;
            border-radius: 6px;
        }

        .top-nav .logo h1 {
            color: white;
            font-size: 18px;
            font-weight: 600;
        }
       .top-nav .logo h1 a{
       	  text-decoration: none;
       	  color:#fff;
       	}
       
        .top-nav .right-actions {
            margin-left: auto;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }
       .top-nav .right-actions span a{
       	  text-decoration: none;
       	  color:#fff;
       	}

        .top-nav .right-actions img {
            width: 16px;
            height: 16px;
        }
       
       /* 核心内容区布局 */
       .tk-sect{
        margin-top: 10px;
        padding: 0 15px; /* 改为左右内边距，避免超出屏幕 */
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        box-sizing: border-box; /* 确保padding不影响宽度计算 */
       } 
       
      /* 教程卡片基础样式 */
      .tk-sect-ios ,.tk-sect-anzuo{
        width: 50%;
        max-width: 800px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px; /* 增加内边距，内容不拥挤 */
        background-color: rgb(10,49,70);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 增加轻微阴影，区分卡片 */
      }
      
    /* 卡片标题区 */
    .ios-bt{
      width: 100%; /* 改为100%，避免小屏幕下左偏 */
      display: flex;
      flex-direction: column;
      gap:8px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    .ios-bt h3{
      color:#fff;
      font-size: 18px;
    }
    .ios-bt span{
      display: flex;
      align-items: center;
      font-size: 15px;
      color:#fff;
      gap: 5px;
    }
    .ios-bt img{
      width: 15px;
      height: 15px;
    }
    
    /* 步骤说明区 */
    .ios-tu{
      padding-top: 15px;
      display: flex;
      flex-direction: column;
      gap: 12px; /* 增加步骤间距，更易读 */
    }
   .ios-tu span{
    font-size: 15px;
    color:#fff;
    border-bottom: 1px solid rgba(13, 103, 152, 0.3);
    padding-bottom: 8px; /* 增加底部内边距，分隔更清晰 */
    display: flex;
    align-items: center;
    gap:1px;
     /* 确保小屏幕文字换行 */
   } 

   .ios-tu img{
    width: 18px;
    height: 18px;
    border-radius: 5px;
   }

  .ios-tu span code{
    color:rgb(227,147,31);
    border-radius: 2px;
  }

  /* 下载按钮区 */
  .cjyxiaz{
    padding-top:15px ;
    display: flex;
    gap: 10px; /* 按钮间距 */
    flex-wrap: wrap; /* 小屏幕按钮换行 */
  }
.cjyxiaz a{
  text-decoration: none;
  color: #fff;
}
.cjyxiaz button{
  padding: 10px 15px;
  color:#fff;
  background-color: rgb(15, 52, 233);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.cjyxiaz button:hover{
  background-color: rgb(30, 65, 230);
}

        /* 视频播放器容器 */
        .video-container {
            width: 90%;
            max-width: 750px;
            margin: 15px auto;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            padding-top: 56.25%; /* 16:9比例 */
            background: #000;
        }
        .responsive-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            object-fit: contain;
        }

        /* 响应式适配：小屏幕（≤768px） */
        @media(max-width:768px){
          .tk-sect{
            display: flex !important; /* 强制flex布局 */
            flex-direction: column !important; /* 上下排列 */
            
            gap: 20px !important; /* 增加卡片间距 */
            padding: 0 10px !important;
          }
          
          .tk-sect-ios, .tk-sect-anzuo{
            width: 100% !important; /* 占满屏幕宽度 */
            max-width: none !important; /* 取消最大宽度限制 */
            margin: 0 auto !important; /* 居中显示 */
          }
          
          .ios-tu span{
            font-size: 10px !important; /* 适当放大文字 */
            gap: 1px !important;
            line-height: 1.6 !important; /* 增加行高，提升可读性 */
          }
          
          .ios-tu img{
            width: 12px !important;
            height: 12px !important;
          }
          
          .ios-bt h3{
            font-size: 17px !important;
          }
          
          .cjyxiaz{
            justify-content: center !important; /* 按钮居中 */
          }
          
          .video-container{
            width: 95% !important; /* 视频更宽，适应小屏幕 */
          }
        }