/* PC homepage body — match screenshot 1:1 */
body {
	background: #f5f5f5 !important;
}
#app.m3d-pc-nav {
	background: #f5f5f5;
}

.m3d-pc-home {
	width: 1170px;
	margin: 20px auto 40px;
	box-sizing: border-box;
}

.m3d-pc-home .m3d-banner {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 18px;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	position: relative;
}
.m3d-pc-home .m3d-banner img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.m3d-pc-home .m3d-banner .swiper-container,
.m3d-pc-home .m3d-banner .swiper-slide {
	width: 100% !important;
	height: 220px;
}
.m3d-pc-home .m3d-banner .swiper-pagination {
	position: absolute;
	bottom: 92px;
	left: 50%;
	transform: translateX(-50%);
	top: auto !important;
	width: auto !important;
	z-index: 5;
}

/* 轮播图底部四彩种导航：磨砂白票签 */
.m3d-pc-home .m3d-banner > .m3d-pc-games {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 6;
	width: auto;
	max-width: none;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.m3d-pc-home .m3d-banner > .m3d-pc-games .m3d-pc-game a {
	min-height: 66px;
	padding: 10px 14px;
}
.m3d-pc-home .m3d-banner .swiper-pagination-bullet {
	background: rgba(255,255,255,.7);
	opacity: 1;
}
.m3d-pc-home .m3d-banner .swiper-pagination-bullet-active {
	background: #d7000f;
}
.m3d-pc-home .m3d-banner .swiper-button-prev,
.m3d-pc-home .m3d-banner .swiper-button-next {
	color: #fff;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	background: rgba(0,0,0,.28);
	border-radius: 50%;
}
.m3d-pc-home .m3d-banner .swiper-button-prev:after,
.m3d-pc-home .m3d-banner .swiper-button-next:after {
	font-size: 16px;
	font-weight: 700;
}
.m3d-pc-home .m3d-banner .swiper-button-prev { left: 12px; }
.m3d-pc-home .m3d-banner .swiper-button-next { right: 12px; }

/* main draw card */
.m3d-pc-draw {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	padding: 18px 22px 16px;
	margin-bottom: 18px;
}

.m3d-pc-draw-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
}

.m3d-pc-draw-head .name {
	color: #d7000f;
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.m3d-pc-draw-head .clock-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.m3d-pc-draw-head .leftTime {
	display: flex;
	align-items: center;
	gap: 4px;
}

.m3d-pc-draw-head .leftTime .hour,
.m3d-pc-draw-head .leftTime .minute,
.m3d-pc-draw-head .leftTime .second {
	display: flex;
	gap: 4px;
	float: none !important;
}

.m3d-pc-draw-head .leftTime .num {
	display: inline-block;
	width: 28px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	background: #3a3a3a;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	border-radius: 4px;
	font-family: Arial, "Microsoft YaHei", sans-serif;
}

.m3d-pc-draw-head .leftTime .dot {
	color: #3a3a3a;
	font-size: 20px;
	font-weight: 700;
	padding: 0 2px;
}

.m3d-pc-draw-head .nextTime {
	color: #888;
	font-size: 13px;
	white-space: nowrap;
}

.m3d-pc-draw-body {
	text-align: center;
	padding: 28px 10px 18px;
}

.m3d-pc-draw-body .lotteryName {
	font-size: 22px;
	font-weight: 700;
	color: #222;
	margin-bottom: 6px;
}

.m3d-pc-draw-body .lotteryIssue {
	color: #888;
	font-size: 14px;
	margin-bottom: 18px;
}

.m3d-pc-draw-balls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 36px;
}

.m3d-pc-draw-balls .m3d-ball {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 800;
	color: #222;
	box-shadow: 0 8px 16px rgba(0,0,0,.18);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.m3d-pc-draw-balls .m3d-ball.red { background-image: url(/images/red.png); }
.m3d-pc-draw-balls .m3d-ball.yellow { background-image: url(/images/yellow.png); }
.m3d-pc-draw-balls .m3d-ball.blue { background-image: url(/images/blue.png); }

.m3d-pc-draw-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 8px;
	border-top: 1px solid #f0f0f0;
}

.m3d-pc-draw-foot .live-btn {
	display: inline-block;
	min-width: 88px;
	height: 36px;
	line-height: 36px;
	padding: 0 22px;
	background: #d7000f;
	color: #fff !important;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
}

.m3d-pc-draw-foot .hist-link {
	color: #333 !important;
	font-size: 14px;
	text-decoration: none !important;
}

/* 最新专家预测条 — 站点红 + 程序号码球 */
.m3d-pc-pred {
	--pred-red: #d7000f;
	--pred-red-deep: #b8000d;
	--pred-soft: #fff1f2;
	--pred-soft-2: #ffe4e6;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 118px;
	margin-bottom: 18px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 18px rgba(215, 0, 15, .14);
	box-sizing: border-box;
}
.m3d-pc-pred-lead {
	position: relative;
	flex: 0 0 210px;
	padding: 22px 22px 18px;
	background: linear-gradient(160deg, #f01222 0%, var(--pred-red) 45%, var(--pred-red-deep) 100%);
	color: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}
.m3d-pc-pred-lead::before {
	content: "";
	position: absolute;
	right: -36px;
	top: 50%;
	width: 140px;
	height: 140px;
	margin-top: -70px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	pointer-events: none;
}
.m3d-pc-pred-lead::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 18px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 14px solid rgba(255,255,255,.07);
	pointer-events: none;
}
.m3d-pc-pred-lead .p-label {
	position: relative;
	z-index: 1;
	font-size: 13px;
	opacity: .92;
	letter-spacing: .5px;
}
.m3d-pc-pred-lead .p-issue {
	position: relative;
	z-index: 1;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .5px;
}
.m3d-pc-pred-lead .p-tip {
	position: relative;
	z-index: 1;
	font-size: 12px;
	opacity: .78;
}
.m3d-pc-pred-kaiji,
.m3d-pc-pred-shiji {
	flex: 1 1 0;
	padding: 16px 22px 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}
.m3d-pc-pred-kaiji {
	background: #fff;
}
.m3d-pc-pred-shiji {
	background: var(--pred-soft);
	border-left: 1px solid rgba(215,0,15,.08);
}
.m3d-pc-pred .p-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.m3d-pc-pred .p-title {
	color: var(--pred-red);
	font-size: 15px;
	font-weight: 700;
}
.m3d-pc-pred .p-note {
	color: #c28a90;
	font-size: 12px;
}
.m3d-pc-pred .p-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #a86a70;
	font-size: 12px;
}
.m3d-pc-pred .p-clock {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 1.5px solid #a86a70;
	border-radius: 50%;
	position: relative;
	box-sizing: border-box;
	flex-shrink: 0;
}
.m3d-pc-pred .p-clock::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 1.5px;
	height: 4px;
	background: #a86a70;
	transform-origin: bottom center;
}
.m3d-pc-pred .p-clock::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 3.5px;
	height: 1.5px;
	background: #a86a70;
}
.m3d-pc-pred .p-balls {
	display: flex;
	align-items: center;
	gap: 14px;
}
.m3d-pc-pred .p-balls .m3d-ball {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	color: #222;
	box-shadow: 0 4px 8px rgba(0,0,0,.15);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.m3d-pc-pred .p-balls .m3d-ball.red { background-image: url(/images/red.png); }
.m3d-pc-pred .p-balls .m3d-ball.yellow { background-image: url(/images/yellow.png); }
.m3d-pc-pred .p-balls .m3d-ball.blue { background-image: url(/images/blue.png); }
.m3d-pc-pred .p-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.m3d-pc-pred .p-chart-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--pred-red);
	border-radius: 16px;
	background: #fff;
	color: var(--pred-red) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.m3d-pc-pred .p-chart-btn:hover {
	background: var(--pred-red);
	color: #fff !important;
}
.m3d-pc-pred .p-chart-btn:hover .p-chart-ico {
	border-color: #fff;
	background: #fff;
}
.m3d-pc-pred .p-chart-ico {
	width: 12px;
	height: 12px;
	border: 1.5px solid var(--pred-red);
	border-radius: 3px;
	position: relative;
	box-sizing: border-box;
	background:
		linear-gradient(var(--pred-red), var(--pred-red)) 3px 7px / 2px 3px no-repeat,
		linear-gradient(var(--pred-red), var(--pred-red)) 6px 5px / 2px 5px no-repeat,
		linear-gradient(var(--pred-red), var(--pred-red)) 9px 3px / 2px 7px no-repeat;
}
.m3d-pc-pred-more {
	flex: 0 0 108px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--pred-soft-2);
	border-left: 1px solid rgba(215,0,15,.08);
	color: var(--pred-red) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	padding: 12px 10px;
	transition: background .2s ease;
}
.m3d-pc-pred-more:hover {
	background: #ffd6da;
}
.m3d-pc-pred-more .p-arrow {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

/* recent card */
.m3d-pc-recent {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	padding: 16px 22px 10px;
}

.m3d-pc-recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
	margin-bottom: 4px;
}

.m3d-pc-recent-head .left {
	color: #d7000f;
	font-size: 18px;
	font-weight: 700;
}

.m3d-pc-recent-head .right a {
	color: #d7000f !important;
	font-size: 14px;
	text-decoration: none !important;
}

.m3d-pc-recent-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 12px;
	border-bottom: 1px solid #f3f3f3;
	background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.m3d-pc-recent-item:last-child {
	border-bottom: none;
}

.m3d-pc-recent-item .iss {
	color: #444;
	font-size: 15px;
	font-weight: 600;
}

.m3d-pc-recent-item .balls {
	display: flex;
	gap: 18px;
}

.m3d-pc-recent-item .m3d-ball {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 800;
	color: #222;
	box-shadow: 0 4px 8px rgba(0,0,0,.15);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.m3d-pc-recent-item .m3d-ball.red { background-image: url(/images/red.png); }
.m3d-pc-recent-item .m3d-ball.yellow { background-image: url(/images/yellow.png); }
.m3d-pc-recent-item .m3d-ball.blue { background-image: url(/images/blue.png); }

/* hide old LotteryIndex layout if leftover */
.LotteryIndex { display: none !important; }