.circle-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        #outer-circle, #inner-circle {
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            visibility: hidden; /* 隐藏两个圆 */
        }
        
        .avatar {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(3);
            opacity: 0;
            transition: transform 0.5s ease, opacity 0.5s ease;
            z-index: 10; /* 初始层级设为 */
			    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); /* 添加白色发光效果 */
			filter: blur(0.5px); /* 轻微模糊边缘 */
			 border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
        }
        
        .avatar.zoom-in {
            opacity: 1;
            transform: translate(-50%, -50%) scale(3);
        }
        
        .avatar.normal-size {
            transform: translate(-50%, -50%) scale(1);
        }
           
        .stats {
            margin-top: 20px;
        }
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(0deg, #642a17,#8B4513, #CD853F,#483D8B,#191970,#0a253f);
            height: 100vh;
            overflow: hidden;
            position: relative;
			display: flex;
        }
		.star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
		/* 添加以下样式隐藏圆环 */
		#outerRing, #innerRing {
			display: none;
		 }
        #left {
            flex: 1;
            position: relative;
            /*background: #f0f0f0; */
            overflow: hidden;
			height:100%;
			display: flex;
			flex-direction: column; /* 垂直排列子元素 */
        }
        #right {
            width: 35%;
			text-align: center;
			/*box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
			display: flex;
			flex-direction: column; /* 垂直排列子元素 */
        }
		#youshang{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 7px;
			height:80px;
		
		}
        #outerRing {
            position: absolute;
            width: 130vh;
            height: 98vh;
            border-radius: 50%;
            border: 2px dashed #999;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        #innerRing {
            position: absolute;
            width: 260px;
            height: 220px;
            border-radius: 50%;
            border: 2px dashed #999;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .bubble {
			transition: z-index 0.01s;
            width: 60px;
            height: 60px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transform: scale(0);
            animation: bubbleScale 2s ease-out forwards;
        }
        @keyframes bubbleScale {
            0% { transform: scale(0); }
            50% { transform: scale(3); }
            100% { transform: scale(1); }
        }
        #counter {
            position: fixed;
            left: 10px;
            top: 20px;
            font-size: 20px;
			color:#FFFFFF;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            cursor: pointer;
			border-radius: 5px;
			
        }
		.btn {        
            /*
			background-color: rgba(255, 255, 255, 0.5); /* 背景透明度 */
            /*box-shadow: 0 5px 15px rgba(0,0,0,0.2);*/
        }
		.btn {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
		.btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            background-color: #45a049;
        }
        
        .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 3px rgba(0,0,0,0.1);
        }
        
        .btn.disabled {
            background: #e0e0e0;
            color: #a0a0a0;
            cursor: not-allowed;
			
            pointer-events: none;
        }
		.btn:disabled {  
		  color: #a0a0a0;
		  cursor: not-allowed;
		  background: #e0e0e0;
		  pointer-events: none;
		}
             
        .btn-secondary {
            background-color: #f44336;
        }
        
        .btn-secondary:hover {
            background-color: #d32f2f;
        }
		#user-img{
			width: 50px;
			height: 50px;
			object-fit: cover; /* 或 contain */
			border-radius: 50%;
			/*
			background: #B0C4DE;
			border: 2px solid #BEBEBE;*/
		}
		.user-info {margin-top:20px; padding:10px; border:1px solid #ddd;}

		/* 新增关闭按钮样式 */
.close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #333;
}
   		#qrcode-modal {display:none;  top:30%;position:fixed; left:40%; width:280px;height: 290px;padding:15px; border:1px solid #ccc;  z-index:1000;
			
			place-items: center; /* 同时水平和垂直居中 */  
			background-color: rgba(255, 255, 255, 0.5); /* 背景透明度 */
			opacity: 0;
			transition: opacity 0.8s ease;
		}
		#qrcode-modal.active {
			opacity: 1;
			display: block;
		}
		#qdcode-modal.active {
			opacity: 1;
			display: block;
		}
		#qdcode-modal {
			opacity: 0;
			
			display:none;
			color:#FFFFFF;
			font-size:24px;
			place-items: center; /* 同时水平和垂直居中 */
		}     
		#qrcode-img,#qdcode-img {
			border: 1px solid #ddd;
			overflow: hidden;
			height: 200px;
			width: 200px;
			margin: 10px;
			/* 网格子容器也要居中 */
			display: grid;
			place-items: center;
		}

		#qrcode-img img,
		#qdcode-img img {
		  width: 100%;      /* 使用百分比适应容器 */
		  height: 100%;
		  object-fit: contain; /* 保持比例完整显示 */
		  display: block;   /* 消除图片底部间隙 */
		}