.pp-spc {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 20px;
	padding: 16px 18px;
	border: 1px solid #cfe0ef;
	border-left: 5px solid #5a9bd5;
	border-radius: 14px;
	background: linear-gradient(135deg, #f3f9fd 0%, #f8f5ff 100%);
	color: #2b4357;
	box-shadow: 0 8px 24px rgba(43, 67, 87, 0.07);
}

.pp-spc__icon {
	display: grid;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: #5a9bd5;
	box-shadow: 0 4px 14px rgba(90, 155, 213, 0.15);
}

.pp-spc__icon svg {
	width: 27px;
	height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.pp-spc__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.pp-spc__title {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.075em;
	line-height: 1.3;
	text-transform: uppercase;
	color: #417fb8;
}

.pp-spc__total {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.pp-spc__detail {
	font-size: 0.86rem;
	line-height: 1.4;
	color: #607485;
}

.pp-spc--complete {
	border-left-color: #42aa83;
	background: linear-gradient(135deg, #eefaf6 0%, #f3f8fd 100%);
}

.pp-spc--complete .pp-spc__icon {
	color: #42aa83;
}

.pp-spc--complete .pp-spc__total {
	font-size: 1.2rem;
	color: #2f78b9;
}

@media (max-width: 600px) {
	.pp-spc {
		align-items: flex-start;
		gap: 12px;
		margin: 15px 0 18px;
		padding: 14px;
		border-radius: 12px;
	}

	.pp-spc__icon {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}

	.pp-spc__icon svg {
		width: 23px;
		height: 23px;
	}

	.pp-spc__total {
		font-size: 0.96rem;
	}

	.pp-spc--complete .pp-spc__total {
		font-size: 1.08rem;
	}
}