/* =====================================
   GiftCardsRate - Final Unified Table CSS
   历史表 + 倍数表最终整合版
   ===================================== */

/* ===== 外层容器 ===== */
.gcr-table-wrap{
	width: 100%;
	margin: 20px 0 28px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #e5eaf1;
	border-radius: 20px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

/* ===== 主表 ===== */
.gcr-simple-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	font-size: 14px;
	line-height: 1.45;
	color: #334155;
	table-layout: auto;
}

/* ===== 表头 ===== */
.gcr-simple-table thead th{
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	color: #0f172a;
	font-weight: 700;
	font-size: 14px;
	padding: 14px 10px;
	text-align: center;
	white-space: nowrap;
	border-top: 1px solid #dbe3ec;
	border-bottom: 1px solid #dbe3ec;
	border-right: 1px solid #e8eef5;
}

.gcr-simple-table thead th:first-child{
	border-left: 1px solid #dbe3ec;
	border-top-left-radius: 14px;
}

.gcr-simple-table thead th:last-child{
	border-right: 1px solid #dbe3ec;
	border-top-right-radius: 14px;
}

/* ===== 表体 ===== */
.gcr-simple-table tbody td{
	padding: 13px 10px;
	border-bottom: 1px solid #e8eef5;
	border-right: 1px solid #edf2f7;
	vertical-align: middle;
	background: #fff;
	text-align: center;
}

.gcr-simple-table tbody td:first-child{
	border-left: 1px solid #e8eef5;
}

.gcr-simple-table tbody tr:nth-child(even) td{
	background: #fcfdff;
}

.gcr-simple-table tbody tr:hover td{
	background: #f8fbff;
}

.gcr-simple-table tbody tr:last-child td:first-child{
	border-bottom-left-radius: 14px;
}

.gcr-simple-table tbody tr:last-child td:last-child{
	border-bottom-right-radius: 14px;
}

/* ===== 通用图片 ===== */
.gcr-simple-table img{
	display: inline-block;
	width: 28px;
	height: 28px;
	object-fit: contain;
	vertical-align: middle;
}

/* =====================================
   历史表：img + 文本
   ===================================== */
.gcr-history-table .col-card,
.gcr-history-table .col-market{
	white-space: nowrap;
	text-align: center;
}

.gcr-history-table .col-card{
	width: 120px;
	min-width: 120px;
}

.gcr-history-table .col-market{
	width: 96px;
	min-width: 96px;
}

.gcr-history-table .col-card img,
.gcr-history-table .col-market img{
	width: 24px;
	height: 24px;
	margin-right: 6px;
	vertical-align: middle;
}

.gcr-history-table .col-rate{
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.gcr-history-table .col-change,
.gcr-history-table .col-changepct,
.gcr-history-table .col-updated{
	white-space: nowrap;
}

/* =====================================
   倍数表：.cell-inline 结构
   ===================================== */
.gcr-db-table .cell-inline{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	vertical-align: middle;
	flex-wrap: nowrap;
}

.gcr-db-table .cell-inline img{
	flex: 0 0 28px;
}

.gcr-db-table .cell-inline span{
	display: inline-block;
	white-space: nowrap;
	overflow: visible;
	text-overflow: unset;
	vertical-align: middle;
}

.gcr-db-table .col-card,
.gcr-db-table .col-market{
	white-space: nowrap;
	text-align: center;
}

.gcr-db-table .col-card{
	width: 122px;
	min-width: 122px;
}

.gcr-db-table .col-market{
	width: 96px;
	min-width: 96px;
}

.gcr-db-table .col-card .cell-inline,
.gcr-db-table .col-market .cell-inline{
	width: 100%;
	justify-content: center;
	gap: 6px;
}

.gcr-db-table .col-value,
.gcr-db-table .col-est{
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.gcr-db-table .col-updated{
	white-space: nowrap;
}

/* ===== 涨跌颜色 ===== */
.gcr-simple-table .price-up,
.gcr-simple-table .trend.up{
	color: #ef4444 !important;
	font-weight: 700;
}

.gcr-simple-table .price-down,
.gcr-simple-table .trend.down{
	color: #16a34a !important;
	font-weight: 700;
}

.gcr-simple-table .price-flat,
.gcr-simple-table .trend.flat{
	color: #475569 !important;
	font-weight: 700;
}

.gcr-simple-table .date-text{
	color: #334155;
	font-weight: 500;
}

.gcr-simple-table .ngn{
	font-size: 0.88em;
	margin-left: 1px;
}

/* ===== 分页 ===== */
.gcr-pagination{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 18px 0 4px;
}

.gcr-page-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #dbe3ec;
	border-radius: 10px;
	background: #fff;
	color: #334155;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
}

.gcr-page-btn:hover{
	background: #f8fbff;
	border-color: #cfd8e3;
	color: #0f172a;
}

.gcr-page-btn.current{
	background: #e9eef5;
	color: #111827;
	border-color: #d6dee8;
}

/* =====================================
   平板端
   ===================================== */
@media (max-width: 1024px){
	.gcr-table-wrap{
		padding: 14px;
		border-radius: 18px;
	}

	.gcr-simple-table{
		font-size: 13px;
	}

	.gcr-simple-table thead th{
		padding: 12px 8px;
		font-size: 13px;
	}

	.gcr-simple-table tbody td{
		padding: 11px 8px;
	}

	.gcr-simple-table img{
		width: 24px;
		height: 24px;
	}

	.gcr-history-table .col-card{
		width: 108px;
		min-width: 108px;
	}

	.gcr-history-table .col-market{
		width: 84px;
		min-width: 84px;
	}

	.gcr-db-table .col-card{
		width: 110px;
		min-width: 110px;
	}

	.gcr-db-table .col-market{
		width: 86px;
		min-width: 86px;
	}

	.gcr-history-table .col-rate,
	.gcr-db-table .col-value,
	.gcr-db-table .col-est{
		font-size: 14px;
	}
}

/* =====================================
   手机端
   不滑动，不整张卡片
   ===================================== */
@media (max-width: 768px){

	.gcr-table-wrap{
		padding: 10px;
		border-radius: 14px;
		margin: 14px 0 20px;
		overflow: hidden;
	}

	.gcr-simple-table{
		width: 100%;
		font-size: 12px;
		table-layout: auto;
	}

	.gcr-simple-table thead th{
		padding: 10px 4px;
		font-size: 11px;
	}

	.gcr-simple-table tbody td{
		padding: 10px 4px;
		font-size: 12px;
	}

	.gcr-simple-table img{
		width: 18px;
		height: 18px;
	}

	/* ===== 历史表：隐藏 Market 和 Change (%) ===== */
	.gcr-history-table th:nth-child(2),
	.gcr-history-table td:nth-child(2),
	.gcr-history-table th:nth-child(5),
	.gcr-history-table td:nth-child(5){
		display: none;
	}

	.gcr-history-table th:nth-child(1),
	.gcr-history-table td:nth-child(1){ width: 30%; }

	.gcr-history-table th:nth-child(3),
	.gcr-history-table td:nth-child(3){ width: 24%; }

	.gcr-history-table th:nth-child(4),
	.gcr-history-table td:nth-child(4){ width: 22%; }

	.gcr-history-table th:nth-child(6),
	.gcr-history-table td:nth-child(6){ width: 24%; }

	.gcr-history-table .col-card{
		width: 96px;
		min-width: 96px;
		text-align: center;
	}

	.gcr-history-table .col-card img,
	.gcr-history-table .col-market img{
		width: 18px;
		height: 18px;
		margin-right: 4px;
	}

	.gcr-history-table .col-rate{
		font-size: 12px;
	}

	.gcr-history-table .date-text{
		font-size: 11px;
	}

	/* ===== 倍数表：隐藏 Market 和 Updated ===== */
	.gcr-db-table th:nth-child(2),
	.gcr-db-table td:nth-child(2),
	.gcr-db-table th:nth-child(5),
	.gcr-db-table td:nth-child(5){
		display: none;
	}

	.gcr-db-table th:nth-child(1),
	.gcr-db-table td:nth-child(1){ width: 40%; }

	.gcr-db-table th:nth-child(3),
	.gcr-db-table td:nth-child(3){ width: 22%; }

	.gcr-db-table th:nth-child(4),
	.gcr-db-table td:nth-child(4){ width: 38%; }

	.gcr-db-table .col-card{
		width: 108px;
		min-width: 108px;
		text-align: center;
	}

	.gcr-db-table .col-card .cell-inline{
		gap: 4px;
		justify-content: center;
	}

	.gcr-db-table .col-card .cell-inline span{
		white-space: nowrap;
		overflow: visible;
		text-overflow: unset;
		font-size: 11px;
	}

	.gcr-db-table .col-market{
		width: 76px;
		min-width: 76px;
	}

	.gcr-db-table .col-market .cell-inline span{
		font-size: 11px;
	}

	.gcr-db-table .col-value,
	.gcr-db-table .col-est{
		font-size: 12px;
	}

	.gcr-db-table .date-text{
		font-size: 11px;
	}

	.gcr-page-btn{
		min-width: 32px;
		height: 32px;
		padding: 0 8px;
		font-size: 12px;
		border-radius: 8px;
	}
}

/* =====================================
   超小屏
   ===================================== */
@media (max-width: 480px){
	.gcr-table-wrap{
		padding: 8px;
	}

	.gcr-simple-table thead th{
		padding: 9px 3px;
		font-size: 10px;
	}

	.gcr-simple-table tbody td{
		padding: 9px 3px;
		font-size: 11px;
	}

	.gcr-simple-table img{
		width: 16px;
		height: 16px;
	}

	.gcr-history-table .col-card{
		width: 88px;
		min-width: 88px;
	}

	.gcr-db-table .col-card{
		width: 98px;
		min-width: 98px;
	}

	.gcr-history-table .col-rate,
	.gcr-db-table .col-value,
	.gcr-db-table .col-est{
		font-size: 11px;
	}

	.gcr-history-table .date-text,
	.gcr-db-table .date-text{
		font-size: 10px;
	}
}