* {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
 	background-color: #f8f8f8;
 	color: #333;
 	line-height: 1.6;
 }

 .container {
 	max-width: 100%;
 	margin: 0 auto;
 	padding: 0 15px;
 }

 /* 顶部导航 */
 .header {
 	background-color: #fff;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	position: sticky;
 	top: 0;
 	z-index: 100;
 }

 .nav {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 60px;
 }

 .logo {
 	display: flex;
 	align-items: center;
 }

 .logo-text {
 	font-size: 22px;
 	font-weight: bold;
 	background: linear-gradient(45deg, #FE2C55, #6936F9);
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 }

 .search-box {
 	display: flex;
 	align-items: center;
 	background: #f1f1f1;
 	border-radius: 20px;
 	padding: 5px 15px;
 	width: 40%;
 }

 .search-box input {
 	border: none;
 	background: transparent;
 	padding: 8px;
 	width: 100%;
 	outline: none;
 }

 .search-btn {
 	border: none;
 	width: 80px;
 	height: 100%;
 	font-weight: bold;
 	color: #000;
 }

 .user-actions {
 	display: flex;
 	align-items: center;
 }

 .user-actions button {
 	margin-left: 15px;
 	padding: 8px 16px;
 	border-radius: 20px;
 	border: none;
 	cursor: pointer;
 	font-weight: 500;
 }

 .upload-btn {
 	background: #FE2C55;
 	color: white;
 }

 /* 用户信息区 */
 .user-profile {
 	margin-top: 10px;
 	display: flex;
 	padding: 30px 0;
 	background-color: #fff;
 	margin-bottom: 20px;
 	border-radius: 10px;
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .avatar {
 	width: 100px;
 	height: 100px;
 	border-radius: 50%;
 	margin: 0 40px;
 	border: 3px solid #fff;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 	object-fit: cover;
 }

 .user-info {
 	flex: 1;
 }

 .username {
 	font-size: 24px;
 	font-weight: bold;
 	margin-bottom: 10px;
 }

 .user-id {
 	color: #777;
 	margin-bottom: 15px;
 }

 .user-bio {
 	margin-bottom: 15px;
 	max-width: 500px;
 }

 .stats {
 	display: flex;
 	margin-bottom: 15px;
 }

 .stat-item {
 	margin-right: 20px;
 	text-align: center;
 }

 .stat-value {
 	font-weight: bold;
 	font-size: 18px;
 }

 .stat-label {
 	color: #777;
 	font-size: 14px;
 }

 .action-buttons {
 	display: flex;
 	margin-top: 20px;
 }

 .action-buttons button {
 	padding: 8px 20px;
 	border-radius: 20px;
 	border: none;
 	cursor: pointer;
 	font-weight: 500;
 	margin-right: 10px;
 }

 .follow-btn {
 	background: #FE2C55;
 	color: white;
 }

 .message-btn {
 	background: #f1f1f1;
 	color: #333;
 }

 .detail-btn {
 	background: #f1f1f1;
 	color: #333;
 }

 /* 产品区*/
 .user-product {
 	margin: 5px;
 	display: flex;
 	flex-direction: row;

 }

 .user-product-item {
 	margin: 5px;


 }

 .user-product-item img {
 	width: 140px;
 	height: 200px;
 	object-fit: cover;
	border-radius: 8px;
 }

 .user-product-item-memo {
 	font-size: 14px;
 	color: #777;
 }

 /* 标签页 */
 .tabs {
 	display: flex;
 	background: #fff;
 	border-radius: 10px;
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 	margin-bottom: 20px;
 	overflow: hidden;
 }

 .tab {
 	padding: 15px 20px;
 	text-align: center;
 	flex: 1;
 	cursor: pointer;
 	transition: background 0.3s;
 	font-weight: 500;
 }

 .tab.active {
 	color: #FE2C55;
 	border-bottom: 2px solid #FE2C55;
 }

 .tab:hover {
 	background: #f9f9f9;
 }

 /* 内容区 */
 .content {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 15px;
 	margin-bottom: 50px;
 }

 .video-item {
 	position: relative;
 	border-radius: 10px;
 	overflow: hidden;
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 	aspect-ratio: 9/16;
 	background-color: #000;
 }

 .video-thumb {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	transition: transform 0.3s;
 }

 .video-item:hover .video-thumb {
 	transform: scale(1.05);
 	opacity: 0.8;
 }

 .video-info {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	padding: 10px;
 	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
 	color: white;
 }

 .video-stats {
 	display: flex;
 	align-items: center;
 	margin-top: 5px;
 }

 .video-stats span {
 	margin-right: 15px;
 	display: flex;
 	align-items: center;
 	font-size: 14px;
 }

 .video-stats i {
 	margin-right: 5px;
 }

 /* 底部导航 */
 .bottom-nav {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	background: #fff;
 	display: flex;
 	justify-content: space-around;
 	padding: 10px 0;
 	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 	display: none;
 }

 .nav-item {
 	text-align: center;
 	color: #777;
 	font-size: 12px;
 }

 .nav-item.active {
 	color: #FE2C55;
 }

 .nav-item i {
 	font-size: 20px;
 	display: block;
 	margin-bottom: 3px;
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
 	.content {
 		grid-template-columns: repeat(2, 1fr);
 	}

 	.search-box {
 		width: 50%;
 	}

 	.user-profile {
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
 	}

 	.avatar {
 		margin: 0 0 20px 0;
 	}

 	.stats {
 		justify-content: center;
 	}

 	.bottom-nav {
 		display: flex;
 	}
 }

 @media (max-width: 480px) {
 	.content {
 		grid-template-columns: 1fr;
 	}

 	.search-box {
 		display: none;
 	}

 	.user-actions button span {
 		display: none;
 	}

 	.user-actions button {
 		padding: 10px;
 		border-radius: 50%;
 	}
 }

 html,
 body {
 	width: 100%;
 	height: 100%;
 	position: relative;
 }