body {
		font-family: "Microsoft YaHei", sans-serif;
		background-color: #f7f7f7;
		margin: 0;
		padding: 20px;
	}
	
	.content-section {
		max-width: 1000px;
		margin: auto;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 20px;
		box-sizing: border-box;
	}
	
	.popular-tags-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.popular-tags-label {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}
	
	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.tags-container a {
		display: inline-block;
		padding: 6px 14px;
		background-color: #ffcc00;
		border-radius: 20px;
		color: #000;
		text-decoration: none;
		font-size: 14px;
		transition: background-color 0.2s, transform 0.2s;
		word-break: break-word;
		text-align: center;
	}
	
	.tags-container a:hover {
		background-color: #ffa500;
		transform: translateY(-2px);
	}
	
	@media (max-width: 768px) {
		.content-section {
			padding: 15px;
		}
		.popular-tags-label {
			font-size: 18px;
		}
		.tags-container a {
			font-size: 13px;
			padding: 5px 12px;
		}
	}
	
	@media (max-width: 480px) {
		.content-section {
			padding: 10px;
		}
		.popular-tags-label {
			font-size: 16px;
		}
		.tags-container a {
			font-size: 12px;
			padding: 4px 10px;
		}
	}
	
	
	* {
		box-sizing: border-box;
	}
	
	body {
		margin: 0;
		font-family: Arial, sans-serif;
		background: #f5f5f5;
	}
	
	.promo-section {
		max-width: 960px;
		margin: 20px auto;
		padding: 0 2px;
	}
	
	.promo-H3 {
		color: #000;
		font-size: 1.5em;
		font-weight: bold;
		margin: 1em 0;
	}
	
	.promo-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}
	
	.promo-title .left span {
		margin-right: 12px;
		padding: 6px 12px;
		border-radius: 20px;
		background: #eee;
		cursor: pointer;
		font-weight: 500;
		font-size: 14px;
		color: #000;
		/* 黑色 */
	}
	
	.promo-title .left .active {
		background: #ff5a00;
		color: #fff;
		font-weight: bold;
	}
	
	.promo-title .right {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
	}
	
	.promo-title .right img {
		width: 16px;
		margin-left: 8px;
	}
	
	.promo-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: space-between;
	}
	
	.promo-item {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		width: calc(50% - 8px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s;
	}
	
	.promo-item:hover {
		transform: translateY(-5px);
	}
	
	.promo-item img {
		width: 100%;
		display: block;
	}
	
	.promo-item .title {
		font-size: 16px;
		font-weight: bold;
		padding: 10px 12px;
		color: #222;
	}
	
	.promo-item .bottom {
		padding: 0 12px 12px;
	}
	
	.promo-item .des {
		font-size: 13px;
		color: #999;
		margin-bottom: 4px;
	}
	
	.promo-item .tip {
		display: inline-block;
		font-size: 12px;
		color: #fff;
		background: #ff5a00;
		padding: 2px 8px;
		border-radius: 12px;
	}
	
	@media (max-width: 640px) {
		.promo-item {
			width: 100%;
		}
		.promo-title {
			flex-direction: column;
			align-items: flex-start;
		}
		.promo-title .right {
			margin-top: 10px;
		}
	}
	
	
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		background-color: #f9fafb;
		line-height: 1.6;
	}
	
	.container {
		max-width: 448px;
		margin: 0 auto;
		background-color: white;
		min-height: 100vh;
		position: relative;
	}
	
	.main-content {
		padding: 16px;
		padding-bottom: 80px;
	}
	/* Navigation Tabs */
	
	.nav-tabs {
		margin-bottom: 16px;
	}
	
	.tabs-container {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.tabs-container::-webkit-scrollbar {
		display: none;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1px;
		padding: 4px 8px;
		border-radius: 8px;
		background-color: #f3f4f6;
		color: #6b7280;
		min-width: fit-content;
		text-decoration: none;
		transition: all 0.3s ease;
	}
	
	.tab-item:hover {
		background-color: #e5e7eb;
	}
	
	.tab-item.active {
		background-color: #fed7aa;
		color: #ea580c;
	}
	
	.tab-icon {
		font-size: 18px;
		position: relative;
	}
	
	.tab-item.active .tab-icon::after {
		content: '';
		position: absolute;
		bottom: -4px;
		left: 50%;
		transform: translateX(-50%);
		width: 16px;
		height: 4px;
		background-color: #ea580c;
		border-radius: 2px;
	}
	
	.tab-label {
		font-size: 12px;
		font-weight: 500;
	}
	/* Statistics Cards */
	
	.stats-cards {
		margin-bottom: 16px;
	}
	
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}
	
	.stat-card {
		padding: 12px;
		border-radius: 8px;
		text-align: center;
		color: white;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease;
	}
	
	.stat-card:hover {
		transform: translateY(-2px);
	}
	
	.stat-card.red {
		background: linear-gradient(135deg, #fca5a5, #f87171);
	}
	
	.stat-card.yellow {
		background: linear-gradient(135deg, #fde047, #facc15);
	}
	
	.stat-card.green {
		background: linear-gradient(135deg, #86efac, #22c55e);
	}
	
	.stat-card.orange {
		background: linear-gradient(135deg, #fdba74, #fb923c);
	}
	
	.stat-number {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 4px;
	}
	
	.stat-label {
		font-size: 12px;
		font-weight: 500;
		margin-bottom: 4px;
	}
	
	.stat-subtitle {
		font-size: 12px;
		opacity: 0.9;
	}
	/* Viber Banner */
	
	.viber-banner {
		margin-bottom: 16px;
	}
	
	.banner-content {
		position: relative;
		background: linear-gradient(90deg, #8b5cf6, #7c3aed, #3b82f6);
		padding: 16px;
		border-radius: 12px;
		color: white;
		overflow: hidden;
	}
	
	.banner-bg-elements {
		position: absolute;
		right: 0;
		top: 0;
		width: 50%;
		height: 100%;
		opacity: 0.2;
	}
	
	.bg-circle {
		position: absolute;
		border-radius: 50%;
		animation: float 3s ease-in-out infinite;
	}
	
	.bg-circle.yellow {
		background-color: #fde047;
		width: 32px;
		height: 32px;
		right: 16px;
		top: 8px;
		animation-delay: 0s;
	}
	
	.bg-circle.pink {
		background-color: #f9a8d4;
		width: 16px;
		height: 16px;
		right: 32px;
		top: 32px;
		animation-delay: 1s;
	}
	
	.bg-circle.blue {
		background-color: #93c5fd;
		width: 24px;
		height: 24px;
		right: 8px;
		top: 48px;
		animation-delay: 2s;
	}
	
	@keyframes float {
		0%,
		100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-5px);
		}
	}
	
	.banner-main {
		position: relative;
		z-index: 10;
	}
	
	.banner-title {
		margin-bottom: 8px;
	}
	
	.banner-title .highlight {
		background: linear-gradient(90deg, #fde047, #facc15);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		font-weight: bold;
	}
	
	.banner-subtitle {
		margin-bottom: 12px;
		font-size: 14px;
	}
	
	.viber-badge {
		display: inline-block;
		background-color: #facc15;
		color: #7c2d12;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: bold;
	}
	
	.banner-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.banner-left {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	
	.viber-icon {
		width: 48px;
		height: 48px;
		background-color: rgba(139, 92, 246, 0.4);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
	}
	
	.phone-mockup {
		position: relative;
		width: 40px;
		height: 64px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 8px;
		padding: 4px;
	}
	
	.phone-screen {
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 4px;
	}
	
	.notification-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		width: 16px;
		height: 16px;
		background-color: #ec4899;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
		animation: pulse 2s infinite;
	}
	
	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.1);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.banner-right {
		text-align: right;
	}
	
	.banner-description {
		font-size: 12px;
		opacity: 0.8;
		margin-bottom: 4px;
	}
	
	.claim-btn {
		background-color: #facc15;
		color: #7c2d12;
		padding: 4px 16px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: bold;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;
		display: inline-block;
	}
	
	.claim-btn:hover {
		background-color: #fde047;
		transform: scale(1.05);
	}
	/* Jackpot Section */
	
	.jackpot-section {
		margin-bottom: 24px;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
	}
	
	.more-btn {
		display: flex;
		align-items: center;
		gap: 4px;
		color: #2563eb;
		font-size: 14px;
		text-decoration: none;
		transition: color 0.3s ease;
	}
	
	.more-btn:hover {
		color: #1d4ed8;
	}
	
	.jackpot-carousel {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.jackpot-carousel::-webkit-scrollbar {
		display: none;
	}
	
	.jackpot-card {
		min-width: 200px;
		flex-shrink: 0;
		position: relative;
		border-radius: 12px;
		overflow: hidden;
		transition: transform 0.3s ease;
	}
	
	.jackpot-card:hover {
		transform: translateY(-4px);
	}
	
	.jackpot-image {
		width: 100%;
		height: 128px;
		object-fit: cover;
	}
	
	.jackpot-overlay {
		position: absolute;
		inset: 0;
		opacity: 0.8;
	}
	
	.jackpot-overlay.purple {
		background: linear-gradient(to top, #8b5cf6, #ec4899);
	}
	
	.jackpot-overlay.orange {
		background: linear-gradient(to top, #fb923c, #facc15);
	}
	
	.jackpot-content {
		position: absolute;
		inset: 0;
		padding: 12px;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.jackpot-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	.jackpot-badge {
		background-color: rgba(0, 0, 0, 0.3);
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 500;
	}
	
	.jackpot-info h3 {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 4px;
	}
	
	.jackpot-amount {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
	}
	
	.play-btn {
		width: 100%;
		background: linear-gradient(90deg, #fb923c, #ec4899);
		color: white;
		padding: 8px;
		border: none;
		border-radius: 20px;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.2s ease;
		text-decoration: none;
		text-align: center;
		display: block;
	}
	
	.play-btn:hover {
		transform: scale(1.05);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
	/* Latest Posts */
	
	.latest-posts {
		margin-bottom: 80px;
	}
	
	.hot-posts {
		margin-bottom: 16px;
	}
	
	.hot-posts-container {
		background-color: #f9fafb;
		padding: 12px;
		border-radius: 8px;
	}
	
	.hot-post-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 4px 0;
		transition: all 0.3s ease;
	}
	
	.hot-post-item:hover {
		background-color: rgba(239, 68, 68, 0.1);
		border-radius: 4px;
		padding-left: 8px;
	}
	
	.hot-icon {
		width: 16px;
		height: 16px;
		background-color: #ef4444;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: white;
		animation: glow 2s ease-in-out infinite alternate;
	}
	
	@keyframes glow {
		from {
			box-shadow: 0 0 5px #ef4444;
		}
		to {
			box-shadow: 0 0 10px #ef4444, 0 0 15px #ef4444;
		}
	}
	
	.hot-text {
		font-size: 14px;
		color: #374151;
	}
	
	.news-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	
	.news-item {
		display: flex;
		gap: 12px;
		background-color: white;
		padding: 12px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		border: 1px solid #f3f4f6;
		transition: all 0.3s ease;
	}
	
	.news-item:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	
	.news-image {
		position: relative;
		width: 172px;
		height: 103px;
		flex-shrink: 0;
		border-radius: 8px;
		overflow: hidden;
	}
	
	.news-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}
	
	.news-item:hover .news-img {
		transform: scale(1.1);
	}
	
	.news-category {
		position: absolute;
		bottom: 4px;
		left: 4px;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 2px 4px;
		border-radius: 2px;
		font-size: 10px;
	}
	
	.news-new-badge {
		position: absolute;
		top: 4px;
		right: 4px;
		background-color: #ef4444;
		color: white;
		padding: 2px 4px;
		border-radius: 2px;
		font-size: 10px;
		animation: pulse 2s infinite;
	}
	
	.news-content {
		flex: 1;
	}
	
	.news-title {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
		margin-bottom: 4px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	
	.news-time {
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 8px;
	}
	
	.news-actions {
		display: flex;
		gap: 16px;
	}
	
	.action-item {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		color: #6b7280;
		transition: color 0.3s ease;
	}
	
	.action-item:hover {
		color: #374151;
	}
	/* Bottom Navigation */
	
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: 448px;
		background-color: white;
		border-top: 1px solid #e5e7eb;
		padding: 8px;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	.nav-items {
		display: flex;
		justify-content: space-around;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 4px 8px;
		color: #6b7280;
		text-decoration: none;
		transition: all 0.3s ease;
		border-radius: 8px;
	}
	
	.nav-item:hover {
		background-color: #f3f4f6;
		color: #374151;
	}
	
	.nav-item.active {
		color: #ea580c;
	}
	
	.nav-icon {
		position: relative;
		font-size: 18px;
	}
	
	.nav-item.active .nav-icon::after {
		content: '';
		position: absolute;
		top: -4px;
		right: 0;
		width: 8px;
		height: 8px;
		background-color: #ef4444;
		border-radius: 50%;
		animation: pulse 2s infinite;
	}
	
	.nav-label {
		font-size: 12px;
		font-weight: 500;
	}
	/* Responsive */
	
	@media (max-width: 480px) {
		.container {
			max-width: 100%;
		}
		.main-content {
			padding: 12px;
		}
		.stats-grid {
			gap: 6px;
		}
		.stat-card {
			padding: 8px;
		}
		.stat-number {
			font-size: 16px;
		}
		.jackpot-card {
			min-width: 180px;
		}
		.banner-content {
			padding: 12px;
		}
		.news-item {
			padding: 10px;
		}
	}
	
	@media (max-width: 360px) {
		.main-content {
			padding: 8px;
		}
		.stats-grid {
			gap: 4px;
		}
		.stat-card {
			padding: 6px;
		}
		.stat-number {
			font-size: 14px;
		}
		.stat-label,
		.stat-subtitle {
			font-size: 10px;
		}
		.jackpot-card {
			min-width: 160px;
		}
	}
	
	
	* {
		box-sizing: border-box;
	}
	
	body {
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
		margin: 0;
		padding: 0;
	}
	
	.carousel-container {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding: 20px;
		background-color: #fff;
	}
	
	.carousel-slide {
		flex: 0 0 auto;
		width: 200px;
		scroll-snap-align: center;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		position: relative;
	}
	
	.carousel-slide img {
		width: 100%;
		height: auto;
		display: block;
	}
	
	.notice-bar {
		position: absolute;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		width: 100%;
		text-align: center;
		font-size: 13px;
		padding: 5px 0;
	}
	
	
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body {
		font-family: Arial, sans-serif;
		background: #f5f5f5;
	}
	
	.poster-container {
		max-width: 750px;
		margin: 30px auto;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}
	
	.poster-container img {
		width: 100%;
		display: block;
	}
	
	.btn-signup {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ff5a00;
		color: #fff;
		font-weight: bold;
		border: none;
		border-radius: 5px;
		padding: 12px 24px;
		font-size: 16px;
		cursor: pointer;
		transition: background 0.3s ease;
		z-index: 10;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	}
	
	.btn-signup:hover {
		background-color: #e04f00;
	}
	
	.poster-footer {
		background: #fff;
		text-align: center;
		padding: 20px 15px 10px;
	}
	
	.poster-footer .terms {
		display: block;
		font-size: 12px;
		color: #999;
	}
	
	
	.article-block[data-v-51d7c369] {
		background: #fff;
		padding: .42667rem;
		margin: .4rem 0;
		border-radius: .26667rem;
		box-shadow: 0 0 .10667rem rgba(0, 0, 0, 0.05);
		font-family: Inter, Helvetica, sans-serif;
		color: #333;
	}
	
	.article-toc[data-v-51d7c369] {
		background: #f2f2f2;
		padding: .32rem;
		border-radius: .21333rem;
		margin-bottom: .4rem;
		font-size: .37333rem;
	}
	
	.article-toc h3[data-v-51d7c369] {
		font-size: .42667rem;
		margin-bottom: .21333rem;
		color: #222;
		font-weight: 600;
	}
	
	.article-toc ul[data-v-51d7c369] {
		padding: 0;
		list-style: none;
		margin: 0;
	}
	
	.article-toc li[data-v-51d7c369] {
		margin-bottom: .21333rem;
	}
	
	.article-toc a[data-v-51d7c369] {
		text-decoration: none;
		color: #0066cc;
	}
	
	.article-toc a[data-v-51d7c369]:hover {
		text-decoration: underline;
	}
	
	.article-content[data-v-51d7c369] h2 {
		font-size: .48rem;
		margin: .53333rem 0 .26667rem;
		color: #323136;
		font-weight: 600;
	}
	
	.article-content[data-v-51d7c369] p {
		font-size: .37333rem;
		line-height: .6rem;
		color: #555;
		margin-bottom: .4rem;
	}