.trade-history {
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	height: 100%;

	.trade-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.813rem;
		font-weight: 600;
		padding: 8px 12px;
		border-bottom: 1px solid var(--border-default);
		color: var(--text-primary);

		.trade-title-left {
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.sound-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 22px;
			height: 22px;
			border: none;
			border-radius: 4px;
			background: transparent;
			cursor: pointer;
			font-size: 0.75rem;
			padding: 0;
			transition: background 0.15s;

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

			&.active {
				color: var(--brand-orange);
			}

			&.muted {
				opacity: 0.5;
			}
		}

		.trade-intensity {
			font-size: 0.688rem;
			font-weight: 600;
			font-variant-numeric: tabular-nums;

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

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

	.trade-loading {
		padding: 24px;
		text-align: center;
		color: var(--text-muted);
		font-size: 0.813rem;
	}

	.trade-header {
		display: flex;
		justify-content: space-between;
		padding: 4px 12px;
		font-size: 0.688rem;
		color: var(--text-muted);
		border-bottom: 1px solid var(--bg-subtle);

		span:last-child {
			text-align: right;
		}
	}

	.trade-body {
		flex: 1;
		overflow-y: auto;
		font-variant-numeric: tabular-nums;
	}

	.trade-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3px 12px;
		font-size: 0.75rem;
		transition: background 0.1s;

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

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

		.price {
			font-weight: 500;
			flex: 1;
		}

		.size {
			color: var(--text-secondary);
			flex: 1;
			text-align: center;
		}

		.time {
			color: var(--text-muted);
			font-size: 0.688rem;
			flex-shrink: 0;
			text-align: right;
		}
	}
}