#labels-container {
	display: flex;
	flex-direction: column;
	gap: 14px; /* 12 → 14 */
}

/* Row (beat line) */
.label-row {
	display: flex;
	align-items: center;
	gap: 11px; /* 10 → 11 */

	flex-wrap: wrap;

	margin-bottom: 9px;
}

/* Label card */
.label-card {
	display: inline-flex;
	align-items: center;
	gap: 9px; /* 8 → 9 */

	padding: 10px 12px; /* 9x10 → slightly bigger */
	border-radius: 9px; /* 10 → 12 */

	font-size: 15px; /* 11 → 12 */
	font-weight: bold;

	color: white;

	box-shadow: 0 3px 8px rgba(0,0,0,0.18); /* slightly stronger */
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover effect */
.label-card:hover {
	transform: translateY(-2px); /* slightly more lift */
	box-shadow: 0 5px 12px rgba(0,0,0,0.25);
}

/* Delete button */
.label-card button {
	background: rgba(255,255,255,0.2);
	border: none;
	border-radius: 9px;

	width: 20px;  /* 18 → 20 */
	height: 20px;

	color: white;
	font-size: 15px; /* 11 → 12 */
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: background 0.15s ease;
}

.label-card button:hover {
	background: rgba(255,0,0,1);
}

/* Plus button */
.label-add {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;  /* 28 → 32 */
	height: 32px;

	border-radius: 9px;

	border: 2px dashed #ccc;

	font-size: 20px; /* 18 → 20 */
	font-weight: bold;
	color: #888;

	cursor: pointer;

	transition: all 0.15s ease;
}

.label-add:hover {
	border-color: #666;
	color: #333;
	background: rgba(0,0,0,0.05);
}

/* Animation */
.label-card {
	animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

.label-beat {
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 8px;

	background: #1e293b;
	color: #fff;

	opacity: 0.9;

	padding: 10px 12px; /* 9x10 → slightly bigger */
	border-radius: 9px; /* 10 → 12 */

	font-size: 15px; /* 11 → 12 */
	font-weight: bold;

}