/* 货币兑换详情页 - 附加样式 */

.pair-tables { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 20px 28px; margin-bottom: 20px; }
.pair-container { display: flex; gap: 20px; }
.pair-col { flex: 1; min-width: 0; }
.pair-heading { font-size: 0.95rem; color: #1b3a5c; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #eee; font-weight: 600; }
.pair-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pair-table th { background: #f0f3f7; color: #555; padding: 8px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd; white-space: nowrap; }
.pair-table td { padding: 7px 12px; border-bottom: 1px solid #eee; color: #333; }
.pair-table tbody tr:hover { background: #f8fafc; }
.pair-table tbody tr.clickable-row { cursor: pointer; transition: background 0.15s; }
.pair-table tbody tr.clickable-row:hover { background: #fff4e6; }
.pair-table tbody tr.clickable-row:hover td { color: #e6550d; }
.pair-table tbody tr.clickable-row:hover .rate-val { color: #e6550d; font-weight: 700; }
.pair-table .rate-val { color: #e6550d; font-weight: 600; font-family: Consolas, Monaco, monospace; }
.loading-cell { text-align: center; color: #999; padding: 20px; }

/* 骨架屏加载动画 */
.result-loading { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.skel { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skel-line { width: 100%; }
.skel-short { width: 60%; }
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
    .pair-container { flex-direction: column; }
    .pair-table { font-size: 0.78rem; }
    .pair-table th, .pair-table td { padding: 6px 8px; }
}