/* 通用页面样式 */

/* ===================================== */
/* 页面底部间距（各页面独立控制，避免全局 .container 一刀切）    */
/* router 会在 #spaContent 上设置 data-page 属性来匹配对应值 */
/* ===================================== */
#spaContent {
	padding-bottom: 22vw; /* 默认值，匹配浮动栏实际高度 (3.73+14.93+3.73≈22.4vw) */
}

/* 客服与帮助页面 */
#spaContent[data-page="help"] {
	padding-bottom: 20vw;
}

/* 专辑列表页 */
#spaContent[data-page="vip-list"],
#spaContent[data-page="free-list"] {
	padding-bottom: 20vw;
}

/* 带底部支付/提交按钮的页面：预留更多空间 */
#spaContent[data-page="order"] {
	padding-bottom: 22vw;
}

/* 确认订单页：按钮不固定，无需额外留白 */
#spaContent[data-page="order-confirm"] {
	padding-bottom: 0;
}

/* ===================================== */
/* 会员推广Banner（首页 & 个人中心共用） */
/* ===================================== */
.member-banner {
	width: 100%;
	padding: 0 4vw;
	height: 40vw;
	margin-top: 3.2vw;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
}
.member-banner img {
	width: 100%;
	height: 100%;
	display: block;
}

/* 带返回按钮和logo的member-header样式 */

/* 返回按钮 */
.member-header .back-btn {
	width: 10vw;
	height: 10vw;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

.member-header .back-btn span {
	font-size: 6vw;
	color: #333;
	font-weight: bold;
}

.member-header .header-placeholder {
	width: 10vw;
	flex-shrink: 0;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20vw 4vw;
}

.empty-icon {
	width: 30vw;
	height: 30vw;
	margin-bottom: 4vw;
	opacity: 0.5;
}

.empty-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.empty-text {
	font-size: 3.5vw;
	color: #999;
	margin-bottom: 6vw;
}

.empty-btn {
	display: inline-block;
	padding: 3vw 8vw;
	background: linear-gradient(135deg, #eb403e 0%, #f77472 100%);
	color: #fff;
	font-size: 3.5vw;
	border-radius: 6vw;
	text-decoration: none;
	cursor: pointer;
}

/* 列表容器 */
.list-container {
	padding: 4vw;
}

/* 通用列表项样式 */
.list-item {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 2vw;
	padding: 3vw;
	margin-bottom: 3vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.item-cover {
	width: 20vw;
	height: 20vw;
	border-radius: 1.5vw;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 3vw;
}

.item-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.item-info {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.item-title {
	font-size: 3.8vw;
	color: #333;
	font-weight: bold;
	margin: 0 0 1.5vw 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-desc {
	font-size: 3vw;
	color: #666;
	margin: 0 0 1.5vw 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-meta {
	display: flex;
	align-items: center;
}

.meta-text {
	font-size: 2.8vw;
	color: #999;
}

.meta-divider {
	margin: 0 2vw;
	color: #ddd;
}

.item-more {
	flex-shrink: 0;
	padding-left: 2vw;
}

.item-more span {
	font-size: 4vw;
	color: #999;
}

/* 记录项样式 */
.record-item {
	background-color: #fff;
	border-radius: 2vw;
	padding: 4vw;
	margin-bottom: 3vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3vw;
	padding-bottom: 3vw;
	border-bottom: 1px solid #f5f5f5;
}

.record-title {
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}

.record-status {
	font-size: 3.2vw;
	padding: 0.5vw 3vw;
	border-radius: 3vw;
}

.record-success {
	background-color: #e8f5e9;
	color: #4caf50;
}

.record-fail {
	background-color: #ffebee;
	color: #f44336;
}

.record-info p {
	margin: 1.5vw 0;
}

.record-price {
	font-size: 5vw;
	color: #eb403e;
	font-weight: bold;
}

.record-time {
	font-size: 3vw;
	color: #666;
}

.record-id {
	font-size: 3vw;
	color: #999;
}

.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 25vw 4vw;
}

.loading-text {
	font-size: 3.5vw;
	color: #999;
}

.item-action {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-left: 2vw;
}

.item-cancel {
	background: none;
	border: none;
	padding: 1.5vw;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.item-cancel .fav-icon {
	width: 5.5vw;
	height: 5.5vw;
	display: block;
}

.item-cancel:active {
	opacity: 0.6;
}

.load-more,
.no-more {
	text-align: center;
	padding: 4vw 0 2vw;
	font-size: 3.2vw;
}

.load-more {
	color: #eb403e;
	cursor: pointer;
}

.load-more:active {
	opacity: 0.7;
}

.no-more {
	color: #bbb;
}