bitforum-frontend/app/component/crypto/market-header.scss

.market-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 16px;
	background: var(--bg-page);
	border-bottom: 1px solid var(--border-default);
	flex-wrap: wrap;
	min-height: 48px;

	.market-header-loading {
		color: var(--text-muted);
		font-size: 0.875rem;
	}

	.market-title {
		.symbol {
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--text-primary);
		}

		.pair {
			font-size: 0.875rem;
			color: var(--text-muted);
			margin-left: 2px;
		}
	}

	.market-price {
		.current-price {
			font-size: 1.375rem;
			font-weight: 700;
			font-variant-numeric: tabular-nums;
		}
	}

	.market-change {
		display: flex;
		gap: 6px;
		font-size: 0.875rem;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}

	.market-stats {
		display: flex;
		gap: 16px;
		margin-left: auto;

		.stat {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 1px;

			.label {
				font-size: 0.688rem;
				color: var(--text-muted);
			}

			.value {
				font-size: 0.813rem;
				font-weight: 500;
				font-variant-numeric: tabular-nums;
				color: var(--text-primary);
			}
		}

		.volume-stat {
			.volume-sparkline-wrapper {
				position: relative;

				.volume-sparkline {
					flex-shrink: 0;
					cursor: pointer;
					border-radius: 3px;
					transition: background 0.15s;

					&:hover {
						background: var(--bg-subtle);
					}
				}

				.volume-popover {
					position: absolute;
					top: calc(100% + 6px);
					right: 0;
					background: var(--bg-page);
					border: 1px solid var(--border-default);
					border-radius: 6px;
					box-shadow: 0 4px 12px var(--shadow-color);
					padding: 8px 12px;
					white-space: nowrap;
					z-index: 100;
					display: flex;
					flex-direction: column;
					gap: 2px;

					.volume-popover-label {
						font-size: 0.625rem;
						color: var(--text-muted);
					}

					.volume-popover-value {
						font-size: 0.813rem;
						font-weight: 600;
						font-variant-numeric: tabular-nums;
						color: var(--text-primary);
					}
				}
			}
		}
	}

	.up {
		color: hsl(var(--crypto-up));
	}

	.down {
		color: hsl(var(--crypto-down));
	}

	.neutral {
		color: hsl(var(--crypto-neutral));
	}
}

@media (max-width: 640px) {
	.market-header {
		gap: 8px;
		padding: 8px 12px;

		.market-stats {
			width: 100%;
			margin-left: 0;
			justify-content: space-between;
		}
	}
}